- https://harald.ist.org/paste/find_color.html
- 1<!DOCTYPE html><html lang="en" tabindex="0"><head><meta charset="UTF-8"><script>
- 7
- 8const hex_digits = "0123456789abcdef";
- 9
- 10function hex2_to_dec( hex ) {
- 11 hex = hex.toLowerCase();
- 12
- 13 return (
- 14 hex_digits.indexOf( hex.substr(0,1) ) * 16
- 15 + hex_digits.indexOf( hex.substr(1,1) )
- 16 );
- 17}
- 18
- 19function dec_to_hex2( dec ) {
- 20 const hi_nibble = (dec & 0xF0) >> 4;
- 21 const lo_nibble = (dec & 0x0F) >> 0;
- 22 return hex_digits[ hi_nibble ] + hex_digits[ lo_nibble ];
- 23}
- 24
- 25
- 26
- 27function rgb_to_hsl( r, g, b ) {
- 28 r /= 255, g /= 255, b /= 255;
- 29 var max = Math.max(r, g, b), min = Math.min(r, g, b);
- 30 var h, s, l = (max + min) / 2;
- 31
- 32 if (max == min){
- 33 h = s = 0;
- 34 } else {
- 35 var d = max - min;
- 36 s
- 37 = (l > 0.5)
- 38 ? d / (2 - max-min)
- 39 : d / (max + min)
- 40 ;
- 41 switch(max){
- 42 case r: h = (g - b) / d + (g < b ? 6 : 0); break;
- 43 case g: h = (b - r) / d + 2; break;
- 44 case b: h = (r - g) / d + 4; break;
- 45 }
- 46 h /= 6;
- 47 }
- 48
- 49 return [h, s, l];
- 50}
- 51
- 52function hsl_to_rgb( h, s, l ) {
- 53 var r, g, b;
- 54
- 55 if (s == 0) {
- 56 r = g = b = l;
- 57 } else {
- 58 var hue2rgb = function hue2rgb( p, q, t ) {
- 59 if (t < 0) t += 1;
- 60 if (t > 1) t -= 1;
- 61 if (t < 1/6) return p + (q - p) * 6 * t;
- 62 if (t < 1/2) return q;
- 63 if (t < 2/3) return p + (q - p) * (2/3 - t) * 6;
- 64 return p;
- 65 }
- 66
- 67 var q
- 68 = (l < 0.5)
- 69 ? l * (1 + s)
- 70 : l + s - l * s
- 71 ;
- 72 var p = 2 * l - q;
- 73 r = hue2rgb(p, q, h + 1/3);
- 74 g = hue2rgb(p, q, h );
- 75 b = hue2rgb(p, q, h - 1/3);
- 76 }
- 77
- 78 return [
- 79 Math.round(r * 255),
- 80 Math.round(g * 255),
- 81 Math.round(b * 255)
- 82 ];
- 83}
- 84
- 85function hsl_to_html_color( h, s, l ) {
- 86 const rgb = hsl_to_rgb( h, s, l );
- 87 const r = dec_to_hex2( rgb[0] );
- 88 const g = dec_to_hex2( rgb[1] );
- 89 const b = dec_to_hex2( rgb[2] );
- 90
- 91 return "#" + r + g + b;
- 92}
- 93
- 94function get_color_name( html_color_code ) {
- 95
- 96
- 97 const USE_DEGREES = !true;
- 98
- 99 const full_circle_range = (USE_DEGREES) ? 360 : 1.0 ;
- 100
- 101 const r = hex2_to_dec( html_color_code.substr(1,2) );
- 102 const g = hex2_to_dec( html_color_code.substr(3,2) );
- 103 const b = hex2_to_dec( html_color_code.substr(5,2) );
- 104
- 105 const hsl = rgb_to_hsl(r, g, b);
- 106 let hue = hsl[0] * full_circle_range;
- 107 const saturation = hsl[1];
- 108 const lightness = hsl[2];
- 109
- 110 var found_color_name = "COLOR NOT DETECTED";
- 111 var found_color_html_code = "#000000";
- 112
- 113 if (saturation == 0) {
- 114 const grey_shade_names = "black grey white".split(" ");
- 115 const nr_grey_shade_levels = grey_shade_names.length;
- 116
- 117
- 118 const adjusted_lightness = lightness * (1 - 1/255);
- 119 const grey_shade_level = Math.floor(adjusted_lightness * nr_grey_shade_levels);
- 120
- 121 found_color_name = grey_shade_names[grey_shade_level];
- 122 found_color_html_code = hsl_to_html_color( 0, 0, grey_shade_level/(nr_grey_shade_levels-1));
- 123 } else {
- 124
- 125
- 126 const color_names = "red yellow green cyan blue purple".split(" ");
- 127
- 128
- 129 const pallette_size = color_names.length;
- 130 const color_range = full_circle_range / pallette_size;
- 131
- 132
- 133
- 134
- 135 if (hue > full_circle_range - color_range/2) {
- 136 hue -= full_circle_range;
- 137 }
- 138
- 139
- 140 for( let color_nr = 0 ; color_nr < pallette_size ; ++color_nr ) {
- 141 if( (hue >= color_nr*color_range - color_range/2)
- 142 && (hue < color_nr*color_range + color_range/2)
- 143 ) {
- 144 const similar_to_hue = color_nr/pallette_size;
- 145 found_color_name = color_names[color_nr];
- 146 found_color_html_code = hsl_to_html_color(similar_to_hue, 1, 0.5);
- 147 }
- 148 }
- 149 }
- 150
- 151 const class_name = (found_color_html_code == "#ffffff") ? " class='white'" : "" ;
- 152 return (
- 153 "Color is most similar to <b"
- 154 + class_name + " style='color:"
- 155 + found_color_html_code + "'>"
- 156 + found_color_name + " ("
- 157 + found_color_html_code + ")</b>\n"
- 158 + "\n hue: " + (Math.round( hsl[0]*1000 ) / 1000)
- 159 + "\n saturation: " + (Math.round( hsl[1]*1000 ) / 1000)
- 160 + "\n lightness: " + (Math.round( hsl[2]*1000 ) / 1000)
- 161 + "\n\n(This program ignores saturation)"
- 162 );
- 163
- 178}
- 179
- 180function show_color_name() {
- 181 const PRE = document.querySelector("pre");
- 182 const color_picker = document.querySelector("input");
- 183 const html_color_code = color_picker.value;
- 184
- 185 PRE.innerHTML = get_color_name(html_color_code);
- 186}
- 187
- 188</script><style>
- 189.white { text-shadow:-1px 0 #888, 0 1px #888, 1px 0 #888, 0 -1px #888; }
- 190</style></head><body><h1>Find Color</h1>
- 191<p><input type="color" oninput="show_color_name()" value="#ff0000"></p>
- 192<p><button oclick="show_color_name()">Show color name</button></p>
- 193<pre></pre>
- 194</body></html>
Every program ends, but not all of them halt.
Find Color