你怎么能分辨出一种颜色是红色还是蓝色..着色(Javascript)



假设我给你一个十六进制颜色#f9090,你如何确定这个颜色是否是橙色的?

如果前面的是不可能的,那么用RGB值是可能的吗?

const coloTint = getColorTint('#f90')
/* should log 'orange' 

如果您将十六进制代码转换为hsv并使用查找表将色调值映射到颜色名称,这是非常直接的。

请注意,使用此逻辑,十六进制代码的名称不会是橙色,而是红色。因此,要获得橙色,您的颜色需要至少30°(#f9c000(的色调值

如果该值需要橙色,则可以根据需要调整查找表。

(如果翻译不正确,请原谅。我刚刚把表格粘贴到谷歌翻译中(

const hex = '#f90900';
const name = hex2name(hex);
console.log (`Name of '${hex}' is '${name}'`);

const orangeHSV = [30, 1, 249];
const orangeRGB = hsv2rgb(...orangeHSV);
const orangeHEX = rgb2hex(...orangeRGB);
console.log (`hex for first orange value is '${orangeHEX}'`);
const test = hex2name(orangeHEX);
console.log (`Test if ${orangeHEX} yields orange: ${test}`)
<script>
// https://stackoverflow.com/a/54024653/1487756
function hsv2rgb(h,s,v) {                              
let f= (n,k=(n+h/60)%6) => v - v*s*Math.max( Math.min(k,4-k,1), 0);     
return [f(5),f(3),f(1)];       
}   
// https://stackoverflow.com/a/54070620/1487756
function rgb2hsv(r,g,b) {
let v=Math.max(r,g,b), n=v-Math.min(r,g,b);
let h= n && ((v==r) ? (g-b)/n : ((v==g) ? 2+(b-r)/n : 4+(r-g)/n)); 
return [60*(h<0?h+6:h), v&&n/v, v];
} 
const clrLkp = [["red", 0],["vermilion", 15],["brown", 20],["orange", 30],["safran", 45],["yellow", 60],["light green yellow", 75],["green yellow", 90],["limett", 105],["dark green", 120],["green", 120],["light blue-green", 135],["blue green", 150],["green cyan", 165],["cyan", 180],["blaucyan", 195],["green blue", 210],["light green blue", 225],["blue", 240],["indigo", 255],["violet", 270],["blue magenta", 285],["magenta", 300],["red magenta", 315],["blue red", 330],["light blue red", 345]].reverse()
const hex2rgb = hex => {
const parts = hex.slice(1).match(/../g);
if (!parts || parts.length <3) throw new Error('Invalid hex value');
const dec = parts.map(p => parseInt(p, 16));
return dec;
}
const hsv2name = (h,s,v) => clrLkp.find(([clr,val]) => h >= val)[0];
const hex2name = hex => [hex2rgb, rgb2hsv, hsv2name].reduce((a,v) => v(...[a].flat()),hex);
const pad = v => (v+'0').slice(0,2);
const rgb2hex = (r,g,b) => '#' + [r,g,b].map(Math.round).map(n => pad(n.toString(16))).join('');
</script>

最新更新