How to manipulate colors to generate red

This comes in handy when you’re working with a particular color mode in your application and your specifications come in a different mode. Color picker gives you the ability to select a particular color in one mode and copy its value in the other modes:

How to manipulate colors to generate red

Demonstrates color manipulation with a raster source.

A raster source allows arbitrary manipulation of pixel values. In this example, RGB values on the input tile source are adjusted in a pixel-wise operation before being rendered with a second raster source. The raster operation takes pixels in in RGB space, converts them to HCL color space, adjusts the values based on the controls above, and then converts them back to RGB space for rendering.

main.js

import ImageLayer from 'ol/layer/Image.js'; import Map from 'ol/Map.js'; import View from 'ol/View.js'; import from 'ol/source.js'; /** * Color manipulation functions below are adapted from * https://github.com/d3/d3-color. */ const Xn = 0.95047; const Yn = 1; const Zn = 1.08883; const t0 = 4 / 29; const t1 = 6 / 29; const t2 = 3 * t1 * t1; const t3 = t1 * t1 * t1; const twoPi = 2 * Math.PI; /** * Convert an RGB pixel into an HCL pixel. * @param > pixel A pixel in RGB space. * @return > A pixel in HCL space. */ function rgb2hcl(pixel) < const red = rgb2xyz(pixel[0]); const green = rgb2xyz(pixel[1]); const blue = rgb2xyz(pixel[2]); const x = xyz2lab( (0.4124564 * red + 0.3575761 * green + 0.1804375 * blue) / Xn ); const y = xyz2lab( (0.2126729 * red + 0.7151522 * green + 0.072175 * blue) / Yn ); const z = xyz2lab( (0.0193339 * red + 0.119192 * green + 0.9503041 * blue) / Zn ); const l = 116 * y - 16; const a = 500 * (x - y); const b = 200 * (y - z); const c = Math.sqrt(a * a + b * b); let h = Math.atan2(b, a); if (h < 0) < h += twoPi; >pixel[0] = h; pixel[1] = c; pixel[2] = l; return pixel; > /** * Convert an HCL pixel into an RGB pixel. * @param > pixel A pixel in HCL space. * @return > A pixel in RGB space. */ function hcl2rgb(pixel) < const h = pixel[0]; const c = pixel[1]; const l = pixel[2]; const a = Math.cos(h) * c; const b = Math.sin(h) * c; let y = (l + 16) / 116; let x = isNaN(a) ? y : y + a / 500; let z = isNaN(b) ? y : y - b / 200; y = Yn * lab2xyz(y); x = Xn * lab2xyz(x); z = Zn * lab2xyz(z); pixel[0] = xyz2rgb(3.2404542 * x - 1.5371385 * y - 0.4985314 * z); pixel[1] = xyz2rgb(-0.969266 * x + 1.8760108 * y + 0.041556 * z); pixel[2] = xyz2rgb(0.0556434 * x - 0.2040259 * y + 1.0572252 * z); return pixel; >function xyz2lab(t) < return t >t3 ? Math.pow(t, 1 / 3) : t / t2 + t0; > function lab2xyz(t) < return t >t1 ? t * t * t : t2 * (t - t0); > function rgb2xyz(x) < return (x /= 255) function xyz2rgb(x) < return ( 255 * (x const raster = new RasterSource(< sources: [ new StadiaMaps(< layer: 'stamen_watercolor', >), ], operation: function (pixels, data) < const hcl = rgb2hcl(pixels[0]); let h = hcl[0] + (Math.PI * data.hue) / 180; if (h < 0) < h += twoPi; >else if (h > twoPi) < h -= twoPi; >hcl[0] = h; hcl[1] *= data.chroma / 100; hcl[2] *= data.lightness / 100; return hcl2rgb(hcl); >, lib: < rgb2hcl: rgb2hcl, hcl2rgb: hcl2rgb, rgb2xyz: rgb2xyz, lab2xyz: lab2xyz, xyz2lab: xyz2lab, xyz2rgb: xyz2rgb, Xn: Xn, Yn: Yn, Zn: Zn, t0: t0, t1: t1, t2: t2, t3: t3, twoPi: twoPi, >, >); const controls = <>; raster.on('beforeoperations', function (event) < const data = event.data; for (const id in controls) < data[id] = Number(controls[id].value); >>); const map = new Map(< layers: [ new ImageLayer(< source: raster, >), ], target: 'map', view: new View(< center: [0, 2500000], zoom: 2, maxZoom: 18, >), >); const controlIds = ['hue', 'chroma', 'lightness']; controlIds.forEach(function (id) < const control = document.getElementById(id); const output = document.getElementById(id + 'Out'); control.addEventListener('input', function () < output.innerText = control.value; raster.changed(); >); output.innerText = control.value; controls[id] = control; >); 

index.html

      .map < width: 100%; height: 400px; >table.controls td < padding: 2px 5px; >table.controls td:nth-child(3)  
 
hue
 
 
° 
 
 
chroma
 
 
%
 
 
lightness
 
 
%
 
 
  

package.json

< "name": "color-manipulation", "dependencies": < "ol": "8.1.0" >, "devDependencies": < "vite": "^3.2.3" >, "scripts": < "start": "vite", "build": "vite build" >>

from green to red color depend on percentage

I have a poll system and I want answers for this poll to be colored. For example: If it’s 10% it would be red, if 40% it would be yellow and if 80% it would be green, so I want my javascript code to use the rgb colors to make a color according to the given percentage.

function hexFromRGB(r, g, b) < var hex = [ r.toString( 16 ), g.toString( 16 ), b.toString( 16 ) ]; $.each( hex, function( nr, val ) < if ( val.length === 1 ) < hex[ nr ] = "0" + val; >>); return hex.join( "" ).toUpperCase(); > 

Now I want hex from percent.
Follow
2,181 5 5 gold badges 27 27 silver badges 42 42 bronze badges
asked Aug 20, 2011 at 0:18
its me its me
1,217 2 2 gold badges 9 9 silver badges 8 8 bronze badges
Oct 18, 2020 at 17:50

16 Answers 16

Sorted by: Reset to default

A simple scheme using HSL along with fiddle:

function getColor(value) < //value from 0 to 1 var hue=((1-value)*120).toString(10); return ["hsl(",hue,",100%,50%)"].join(""); >

tweak saturation and luminosity as needed. and a fiddle.

function getColor(value) < //value from 0 to 1 var hue = ((1 - value) * 120).toString(10); return ["hsl(", hue, ",100%,50%)"].join(""); >var len = 20; for (var i = 0; i 
)" data-controller="se-share-sheet" data-se-share-sheet-title="Share a link to this answer" data-se-share-sheet-subtitle="" data-se-share-sheet-post-type="answer" data-se-share-sheet-social="facebook twitter devto" data-se-share-sheet-location="2" data-se-share-sheet-license-url="https%3a%2f%2fcreativecommons.org%2flicenses%2fby-sa%2f4.0%2f" data-se-share-sheet-license-name="CC BY-SA 4.0" data-s-popover-placement="bottom-start">Share
 Follow
)">edited Nov 8, 2019 at 15:18
 
mplungjan
171k2828 gold badges174174 silver badges236236 bronze badges
answered Jun 24, 2013 at 5:21
 
jongo45jongo45
3,05022 gold badges1616 silver badges1212 bronze badges