# Any sites for the color blind? **URL:** \ **Category:** design\ **Created:** [June 5, 2008, 2:56pm UTC](https://forum.kirupa.com/t/any-sites-for-the-color-blind/262380 "2008-06-05T14:56:02Z")\ **Posts on this page:** 12\ **Page:** 1
**Author:** ![w1sh](https://avatars.discourse-cdn.com/v4/letter/w/7feea3/32.png) [@w1sh](https://forum.kirupa.com/u/w1sh)\ **Post date:** [June 5, 2008, 2:56pm UTC](https://forum.kirupa.com/t/any-sites-for-the-color-blind/262380/1 "2008-06-05T14:56:02Z")
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. ---
**Author:** ![aho](https://avatars.discourse-cdn.com/v4/letter/a/b5ac83/32.png) [@aho](https://forum.kirupa.com/u/aho)\ **Post date:** [June 6, 2008, 3:15pm UTC](https://forum.kirupa.com/t/any-sites-for-the-color-blind/262380/2 "2008-06-06T15:15:27Z")
A good starting point are probably palettes such as Inkscape’s palette of SVG colors: ```auto 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: > **[Euclidean distance](https://en.wikipedia.org/wiki/Euclidean_distance)** > > In mathematics, the Euclidean distance or Euclidean metric is the "ordinary" straight-line distance between two points in Euclidean space. With this distance, Euclidean space becomes a metric space. The associated norm is called the Euclidean norm. Older literature refers to the metric as Pythagorean metric. A generalized term for the Euclidean norm is the L2 norm or L2 distance. The Euclidean distance between points p and q is the length of the line segment connecting them ( > > > > ... 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. ---
**Author:** ![redelite](https://avatars.discourse-cdn.com/v4/letter/r/dc4da7/32.png) [@redelite](https://forum.kirupa.com/u/redelite)\ **Post date:** [June 6, 2008, 3:25pm UTC](https://forum.kirupa.com/t/any-sites-for-the-color-blind/262380/3 "2008-06-06T15:25:16Z")
^ Ow my brain! :d: WAY too early to be reading replies like that… that is pretty cool though! ---
**Author:** ![thats\_all\_folks](https://avatars.discourse-cdn.com/v4/letter/t/e0b2c6/32.png) [@thats\_all\_folks](https://forum.kirupa.com/u/thats_all_folks)\ **Post date:** [June 6, 2008, 3:53pm UTC](https://forum.kirupa.com/t/any-sites-for-the-color-blind/262380/4 "2008-06-06T15:53:53Z")
aho, Nicely done!! ---
**Author:** ![aho](https://avatars.discourse-cdn.com/v4/letter/a/b5ac83/32.png) [@aho](https://forum.kirupa.com/u/aho)\ **Post date:** [June 6, 2008, 4:15pm UTC](https://forum.kirupa.com/t/any-sites-for-the-color-blind/262380/5 "2008-06-06T16:15:29Z")
Java: ```auto 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 "); 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 cs=new ArrayList(); 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{ 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(do.d) return -1; return 0; } } } ``` Output for 7676ff: ```auto 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. ---
**Author:** ![MTsoul](https://avatars.discourse-cdn.com/v4/letter/m/91b2a8/32.png) [@MTsoul](https://forum.kirupa.com/u/MTsoul)\ **Post date:** [June 6, 2008, 4:59pm UTC](https://forum.kirupa.com/t/any-sites-for-the-color-blind/262380/6 "2008-06-06T16:59:29Z")
[ot]aho (a hoe?), your blog is awesome.[/ot] ---
**Author:** ![aho](https://avatars.discourse-cdn.com/v4/letter/a/b5ac83/32.png) [@aho](https://forum.kirupa.com/u/aho)\ **Post date:** [June 6, 2008, 7:29pm UTC](https://forum.kirupa.com/t/any-sites-for-the-color-blind/262380/7 "2008-06-06T19:29:42Z")
\>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. 🙂 ---
**Author:** ![w1sh](https://avatars.discourse-cdn.com/v4/letter/w/7feea3/32.png) [@w1sh](https://forum.kirupa.com/u/w1sh)\ **Post date:** [June 6, 2008, 7:31pm UTC](https://forum.kirupa.com/t/any-sites-for-the-color-blind/262380/8 "2008-06-06T19:31:58Z")
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. ---
**Author:** ![matthewjumps](https://avatars.discourse-cdn.com/v4/letter/m/49beb7/32.png) [@matthewjumps](https://forum.kirupa.com/u/matthewjumps)\ **Post date:** [June 6, 2008, 7:33pm UTC](https://forum.kirupa.com/t/any-sites-for-the-color-blind/262380/9 "2008-06-06T19:33:50Z")
hey your blog really is awesome 😃 loads of interesting articles… huzzah for open source, big fan of inkscape for instance. ---
**Author:** ![aho](https://avatars.discourse-cdn.com/v4/letter/a/b5ac83/32.png) [@aho](https://forum.kirupa.com/u/aho)\ **Post date:** [June 7, 2008, 9:16am UTC](https://forum.kirupa.com/t/any-sites-for-the-color-blind/262380/10 "2008-06-07T09:16:31Z")
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. ![](http://forum.kirupa.com/uploads/kirupa/6940/bff77f306579117d.png) 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](http://inkscape.org/) for example offers an HSL color picker. ---
**Author:** ![glosrfc](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/glosrfc/32/8334_2.png) [@glosrfc](https://forum.kirupa.com/u/glosrfc)\ **Post date:** [June 7, 2008, 4:32pm UTC](https://forum.kirupa.com/t/any-sites-for-the-color-blind/262380/11 "2008-06-07T16:32:36Z")
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](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](http://www.vischeck.com/vischeck/vischeckURL.php) Another colour-blindness comparison site: [http://www.iamcal.com/toys/colors/](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.jessett.com/web_sites/usability/colour_blindness.shtml) [http://www.vischeck.com/downloads/](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/](http://chir.ag/phernalia/name-that-color/) ---
**Author:** ![w1sh](https://avatars.discourse-cdn.com/v4/letter/w/7feea3/32.png) [@w1sh](https://forum.kirupa.com/u/w1sh)\ **Post date:** [June 9, 2008, 3:55pm UTC](https://forum.kirupa.com/t/any-sites-for-the-color-blind/262380/12 "2008-06-09T15:55:45Z")
Sah-weet! I’ve bookmarked this thread so hard.