JSFiddle - React, Tailwind, and code Playground

by Dongor7

HTML

<canvas id="canvas"></canvas>

CSS

canvas {
  height: 5px;
  width: 130px;
}

JavaScript

const canvas = document.getElementById('canvas')
const context = canvas.getContext('2d')
const gradient = context.createLinearGradient(0, 0, canvas.width, 0)

gradient.addColorStop(0, 'rgb(207, 0, 0)')
gradient.addColorStop(0.51, 'rgb(255, 167, 0)')
gradient.addColorStop(1, 'rgb(14, 129, 62)')

context.fillStyle = gradient
context.fillRect(0, 0, canvas.width, canvas.height)

const coef = 2
const xPoint = canvas.width * coef / 2 

const imgData = context.getImageData(xPoint === canvas.width ? xPoint - 1 : xPoint, 0, 1, 1)
const rgba = imgData.data
const color = `rgb(${rgba[0]}, ${rgba[1]}, ${rgba[2]})`

console.log("%c" + color, "color:" + color)