I’m color deficient and would like to know if there is a program or website out there where you can enter the hex and it will tell you the color.
IE: You type in “#7676FF” and it says “Light Blue”
It’d help me out a great deal. Thanks.
A good starting point are probably palettes such as Inkscape’s palette of SVG colors:
GIMP Palette
Name: SVG
#
0 0 0 black (#000000)
105 105 105 dimgray (#696969)
128 128 128 gray (#808080)
169 169 169 darkgray (#A9A9A9)
192 192 192 silver (#C0C0C0)
211 211 211 lightgray (#D3D3D3)
220 220 220 gainsboro (#DCDCDC)
245 245 245 whitesmoke (#F5F5F5)
255 255 255 white (#FFFFFF)
188 143 143 rosybrown (#BC8F8F)
205 92 92 indianred (#CD5C5C)
165 42 42 brown (#A52A2A)
178 34 34 firebrick (#B22222)
240 128 128 lightcoral (#F08080)
128 0 0 maroon (#800000)
139 0 0 darkred (#8B0000)
255 0 0 red (#FF0000)
255 250 250 snow (#FFFAFA)
255 228 225 mistyrose (#FFE4E1)
250 128 114 salmon (#FA8072)
255 99 71 tomato (#FF6347)
233 150 122 darksalmon (#E9967A)
255 127 80 coral (#FF7F50)
255 69 0 orangered (#FF4500)
255 160 122 lightsalmon (#FFA07A)
160 82 45 sienna (#A0522D)
255 245 238 seashell (#FFF5EE)
210 105 30 chocolate (#D2691E)
139 69 19 saddlebrown (#8B4513)
244 164 96 sandybrown (#F4A460)
255 218 185 peachpuff (#FFDAB9)
205 133 63 peru (#CD853F)
250 240 230 linen (#FAF0E6)
255 228 196 bisque (#FFE4C4)
255 140 0 darkorange (#FF8C00)
222 184 135 burlywood (#DEB887)
210 180 140 tan (#D2B48C)
250 235 215 antiquewhite (#FAEBD7)
255 222 173 navajowhite (#FFDEAD)
255 235 205 blanchedalmond (#FFEBCD)
255 239 213 papayawhip (#FFEFD5)
255 228 181 moccasin (#FFE4B5)
255 165 0 orange (#FFA500)
245 222 179 wheat (#F5DEB3)
253 245 230 oldlace (#FDF5E6)
255 250 240 floralwhite (#FFFAF0)
184 134 11 darkgoldenrod (#B8860B)
218 165 32 goldenrod (#DAA520)
255 248 220 cornsilk (#FFF8DC)
255 215 0 gold (#FFD700)
240 230 140 khaki (#F0E68C)
255 250 205 lemonchiffon (#FFFACD)
238 232 170 palegoldenrod (#EEE8AA)
189 183 107 darkkhaki (#BDB76B)
245 245 220 beige (#F5F5DC)
250 250 210 lightgoldenrodyellow (#FAFAD2)
128 128 0 olive (#808000)
255 255 0 yellow (#FFFF00)
255 255 224 lightyellow (#FFFFE0)
255 255 240 ivory (#FFFFF0)
107 142 35 olivedrab (#6B8E23)
154 205 50 yellowgreen (#9ACD32)
85 107 47 darkolivegreen (#556B2F)
173 255 47 greenyellow (#ADFF2F)
127 255 0 chartreuse (#7FFF00)
124 252 0 lawngreen (#7CFC00)
143 188 143 darkseagreen (#8FBC8F)
34 139 34 forestgreen (#228B22)
50 205 50 limegreen (#32CD32)
144 238 144 lightgreen (#90EE90)
152 251 152 palegreen (#98FB98)
0 100 0 darkgreen (#006400)
0 128 0 green (#008000)
0 255 0 lime (#00FF00)
240 255 240 honeydew (#F0FFF0)
46 139 87 seagreen (#2E8B57)
60 179 113 mediumseagreen (#3CB371)
0 255 127 springgreen (#00FF7F)
245 255 250 mintcream (#F5FFFA)
0 250 154 mediumspringgreen (#00FA9A)
102 205 170 mediumaquamarine (#66CDAA)
127 255 212 aquamarine (#7FFFD4)
64 224 208 turquoise (#40E0D0)
32 178 170 lightseagreen (#20B2AA)
72 209 204 mediumturquoise (#48D1CC)
47 79 79 darkslategray (#2F4F4F)
175 238 238 paleturquoise (#AFEEEE)
0 128 128 teal (#008080)
0 139 139 darkcyan (#008B8B)
0 255 255 cyan (#00FFFF)
224 255 255 lightcyan (#E0FFFF)
240 255 255 azure (#F0FFFF)
0 206 209 darkturquoise (#00CED1)
95 158 160 cadetblue (#5F9EA0)
176 224 230 powderblue (#B0E0E6)
173 216 230 lightblue (#ADD8E6)
0 191 255 deepskyblue (#00BFFF)
135 206 235 skyblue (#87CEEB)
135 206 250 lightskyblue (#87CEFA)
70 130 180 steelblue (#4682B4)
240 248 255 aliceblue (#F0F8FF)
30 144 255 dodgerblue (#1E90FF)
112 128 144 slategray (#708090)
119 136 153 lightslategray (#778899)
176 196 222 lightsteelblue (#B0C4DE)
100 149 237 cornflowerblue (#6495ED)
65 105 225 royalblue (#4169E1)
25 25 112 midnightblue (#191970)
230 230 250 lavender (#E6E6FA)
0 0 128 navy (#000080)
0 0 139 darkblue (#00008B)
0 0 205 mediumblue (#0000CD)
0 0 255 blue (#0000FF)
248 248 255 ghostwhite (#F8F8FF)
106 90 205 slateblue (#6A5ACD)
72 61 139 darkslateblue (#483D8B)
123 104 238 mediumslateblue (#7B68EE)
147 112 219 mediumpurple (#9370DB)
138 43 226 blueviolet (#8A2BE2)
75 0 130 indigo (#4B0082)
153 50 204 darkorchid (#9932CC)
148 0 211 darkviolet (#9400D3)
186 85 211 mediumorchid (#BA55D3)
216 191 216 thistle (#D8BFD8)
221 160 221 plum (#DDA0DD)
238 130 238 violet (#EE82EE)
128 0 128 purple (#800080)
139 0 139 darkmagenta (#8B008B)
255 0 255 magenta (#FF00FF)
218 112 214 orchid (#DA70D6)
199 21 133 mediumvioletred (#C71585)
255 20 147 deeppink (#FF1493)
255 105 180 hotpink (#FF69B4)
255 240 245 lavenderblush (#FFF0F5)
219 112 147 palevioletred (#DB7093)
220 20 60 crimson (#DC143C)
255 192 203 pink (#FFC0CB)
255 182 193 lightpink (#FFB6C1)
And then take the closest color. The distance can be calculated by mapping the 3 channels onto 3 axis, which gives you a color cube. Each possible color correspondents to one specific point inside of that cube.
The formula for calculating the distance can be found over at Wikipedia for example:
If you also output the distance together with the 3 closest colors you should be able to tell how accurate the picked name is.
>IE: You type in “#7676FF” [118 118 255] and it says “Light Blue”
Let’s see…
“173 216 230 lightblue (#ADD8E6)”
(118-173)(118-173)+(118-216)(118-216)+(255-230)*(255-230)=13254
sqrt(13254)=115.12601791080937061527235151118
115 looks somewhat big, but let’s compare it with a different shade of blue. Say… a full tilt blue (0000FF).
(118-0)(118-0)+(118-0)(118-0)+(255-255)*(255-255)=27848… sqrt… 166.8
Or teal (#008080).
(118-0)(118-0)+(118-128)(118-128)+(255-128)*(255-128)=30153… sqrt… 173.6
Hm. Well, your #7676FF color isn’t really a “light” blue. It’s a bit on the heavy rather saturated side of things, which explains the rather big distance.
^ Ow my brain! :d: WAY too early to be reading replies like that… that is pretty cool though!
aho,
Nicely done!!
Java:
import java.io.*;
import java.util.*;
public class WhatC{
public static void main(String[]args)throws Exception{
if(args.length!=1)
usageAndDie();
else if(args[0].length()!=6)
usageAndDie();
try{
int c=Integer.parseInt(args[0],16);
new WhatC(c);
}catch(Exception e){
usageAndDie();
}
}
private static void usageAndDie(){
System.out.println("java WhatC <hex>");
System.exit(1);
}
public WhatC(int col)throws Exception{
int r=(col&0xff0000)>>16;
int g=(col&0x00ff00)>>8;
int b=(col&0x0000ff);
C f=new C(r,g,b,"find me");
ArrayList<C> cs=new ArrayList<C>();
BufferedReader in=new BufferedReader(new FileReader("svg.gpl"));
boolean skip=true;
String line="";
while((line=in.readLine())!=null){
if(skip){
if(line.startsWith("#"))
skip=false;
}else{
Scanner s=new Scanner(line);
C c=new C(s.nextInt(),s.nextInt(),s.nextInt(),s.next());
c.d=dist(f,c);
cs.add(c);
}
}
Collections.sort(cs);
for(int i=cs.size()-1;i>=0;--i){
C c=cs.get(i);
System.out.printf("%-25s [%06X] [%6.2f]
",c.n,c.c,c.d);
}
}
private double dist(C c1,C c2){
return Math.sqrt((c1.r-c2.r)*(c1.r-c2.r) + (c1.g-c2.g)*(c1.g-c2.g) + (c1.b-c2.b)*(c1.b-c2.b));
}
class C implements Comparable<C>{
public int r,g,b,c;
public String n;
public double d;
public C(int r,int g,int b,String n){
this.r=r;
this.g=g;
this.b=b;
this.n=n;
this.c=(r<<16)|(g<<8)|b;
}
public int compareTo(C o){
if(d<o.d)
return 1;
if(d>o.d)
return -1;
return 0;
}
}
}
Output for 7676ff:
D:\>java WhatC 7676ff
mediumslateblue [7B68EE] [ 22.58]
cornflowerblue [6495ED] [ 40.11]
mediumpurple [9370DB] [ 46.62]
slateblue [6A5ACD] [ 58.55]
royalblue [4169E1] [ 62.27]
blueviolet [8A2BE2] [ 82.86]
mediumorchid [BA55D3] [ 87.46]
lightskyblue [87CEFA] [ 89.77]
steelblue [4682B4] [ 89.85]
dodgerblue [1E90FF] [ 91.76]
skyblue [87CEEB] [ 91.83]
darkorchid [9932CC] [ 91.92]
lightsteelblue [B0C4DE] [102.65]
lightslategray [778899] [103.58]
cadetblue [5F9EA0] [105.61]
orchid [DA70D6] [108.25]
slategray [708090] [111.61]
darkgray [A9A9A9] [112.24]
mediumturquoise [48D1CC] [114.01]
lightblue [ADD8E6] [115.13]
plum [DDA0DD] [116.31]
violet [EE82EE] [121.79]
silver [C0C0C0] [122.15]
mediumaquamarine [66CDAA] [122.68]
powderblue [B0E0E6] [123.39]
gray [808080] [127.78]
turquoise [40E0D0] [127.91]
thistle [D8BFD8] [128.27]
darkviolet [9400D3] [129.46]
paleturquoise [AFEEEE] [133.93]
darkseagreen [8FBC8F] [134.42]
rosybrown [BC8F8F] [134.42]
lightseagreen [20B2AA] [134.99]
darkslateblue [483D8B] [137.19]
lightgray [D3D3D3] [138.69]
deepskyblue [00BFFF] [138.76]
aquamarine [7FFFD4] [143.87]
palevioletred [DB7093] [147.99]
gainsboro [DCDCDC] [148.44]
dimgray [696969] [151.12]
darkturquoise [00CED1] [154.22]
hotpink [FF69B4] [156.73]
lavender [E6E6FA] [158.47]
tan [D2B48C] [159.79]
lightpink [FFB6C1] [163.43]
pink [FFC0CB] [164.16]
mediumseagreen [3CB371] [165.07]
lightgreen [90EE90] [165.52]
darkmagenta [8B008B] [166.80]
darkcyan [008B8B] [166.80]
blue [0000FF] [166.88]
palegreen [98FB98] [171.62]
burlywood [DEB887] [171.97]
lightcyan [E0FFFF] [173.22]
purple [800080] [173.65]
teal [008080] [173.65]
mediumblue [0000CD] [174.21]
mediumvioletred [C71585] [175.65]
lightcoral [F08080] [176.39]
darkkhaki [BDB76B] [176.55]
indigo [4B0082] [177.19]
mistyrose [FFE4E1] [178.24]
aliceblue [F0F8FF] [178.28]
darksalmon [E9967A] [178.71]
whitesmoke [F5F5F5] [179.88]
magenta [FF00FF] [180.81]
cyan [00FFFF] [180.81]
antiquewhite [FAEBD7] [180.87]
wheat [F5DEB3] [180.89]
linen [FAF0E6] [181.47]
beige [F5F5DC] [182.98]
azure [F0FFFF] [183.45]
peachpuff [FFDAB9] [183.49]
lavenderblush [FFF0F5] [183.72]
ghostwhite [F8F8FF] [183.85]
seagreen [2E8B57] [183.98]
honeydew [F0FFF0] [184.06]
bisque [FFE4C4] [185.34]
palegoldenrod [EEE8AA] [186.07]
indianred [CD5C5C] [186.59]
mintcream [F5FFFA] [186.88]
blanchedalmond [FFEBCD] [186.97]
oldlace [FDF5E6] [187.03]
papayawhip [FFEFD5] [187.55]
seashell [FFF5EE] [187.58]
snow [FFFAFA] [190.31]
navajowhite [FFDEAD] [190.55]
moccasin [FFE4B5] [190.64]
floralwhite [FFFAF0] [190.84]
lightgoldenrodyellow [FAFAD2] [192.02]
cornsilk [FFF8DC] [192.08]
salmon [FA8072] [193.40]
darkslategray [2F4F4F] [193.75]
white [FFFFFF] [193.75]
midnightblue [191970] [194.29]
ivory [FFFFF0] [194.33]
lightsalmon [FFA07A] [195.50]
lightyellow [FFFFE0] [196.21]
lemonchiffon [FFFACD] [196.71]
deeppink [FF1493] [200.09]
khaki [F0E68C] [201.63]
darkblue [00008B] [203.23]
mediumspringgreen [00FA9A] [203.84]
sandybrown [F4A460] [208.02]
navy [000080] [209.71]
darkolivegreen [556B2F] [210.89]
peru [CD853F] [211.32]
sienna [A0522D] [217.16]
springgreen [00FF7F] [221.53]
olivedrab [6B8E23] [221.58]
coral [FF7F50] [222.43]
yellowgreen [9ACD32] [225.59]
tomato [FF6347] [230.19]
brown [A52A2A] [230.98]
limegreen [32CD32] [232.85]
forestgreen [228B22] [237.36]
crimson [DC143C] [240.90]
saddlebrown [8B4513] [241.95]
chocolate [D2691E] [243.43]
firebrick [B22222] [243.92]
goldenrod [DAA520] [248.87]
darkgoldenrod [B8860B] [253.27]
greenyellow [ADFF2F] [255.06]
olive [808000] [255.39]
green [008000] [281.16]
maroon [800000] [281.16]
darkgreen [006400] [281.55]
darkred [8B0000] [281.76]
lawngreen [7CFC00] [288.13]
chartreuse [7FFF00] [289.61]
darkorange [FF8C00] [290.31]
orange [FFA500] [293.26]
orangered [FF4500] [293.59]
black [000000] [304.75]
gold [FFD700] [305.29]
lime [00FF00] [312.60]
red [FF0000] [312.60]
yellow [FFFF00] [320.25]
edit: Oh yea, I forgot. Human perception isn’t that linear of course. Nevertheless it should give you a rather good idea how that color might be called. Especially if the distance is very small (<10). A more exhaustive palette would be helpful though.
[ot]aho (a hoe?), your blog is awesome.[/ot]
>aho (a hoe?)
It’s Japanese for “idiot”/“retard”. Sort of like “baka”. But it’s also a Finnish name. I picked it for it’s Japanese meaning, however. And well, it was free (on freenode) and it only has 3 characters. Another reason was its excessive lack of coolness.
>your blog is awesome
Thanks. 
AHO, thank you so much. This will help more than you’ll ever know. I have a sense of color independence now and I owe it all to your gifted mind and beautiful fingers.
If this was Yahoo! Answers, I’d give you the best answer award and you’d get some points that’d you’d inevitably spend on all the hungry kids in the world.
Edit: And where is this awesome blog?
Edit2: Erk, nvrmind.
hey your blog really is awesome 
loads of interesting articles…
huzzah for open source, big fan of inkscape for instance.
Another probably better (or supportive) idea is to use the HSL (hue, saturation, lightness) color space instead of RGB. The perceptual color relationships are more obvious over there. HSV (hue, saturation, value) is similar, but a lot less intuitive imo.
Basically you only need to learn what different hue values mean. More or less saturation always means more or less saturation and the same goes for lightness. It’s really pleasant to work with. Hue itself is just a 7 step gradient going from red to yellow to lime (SVG color name) to cyan to blue to magenta and then back to red again.
So if we take that example color of #7676FF again and put that into some HSL color picker we can see that it’s got a hue of 170, which clearly belongs into the realm of blue shades.
Inkscape for example offers an HSL color picker.
You might also want to check out these sites:
Demonstrates how colours vary according to different colour-blindness conditions
http://www.btplc.com/inclusion/technology/RandD/colours/colours2.htm
Simulates different colour-blindness on a live webpage:
http://www.vischeck.com/vischeck/vischeckURL.php
Another colour-blindness comparison site:
http://www.iamcal.com/toys/colors/
Photoshop palettes/plug-ins to simulate colour-blindness:
http://www.jessett.com/web_sites/usability/colour_blindness.shtml
http://www.vischeck.com/downloads/
And finally, this allows you to enter a hex value and it returns the nearest colour name and vice versa
http://chir.ag/phernalia/name-that-color/
Sah-weet! I’ve bookmarked this thread so hard.
