Updated 2011-08-31 10:11:55 by RLE ▲

(March 10 2005 - page restored from previous, after some twerp wiped it)

MG Oct 7th 2004 - I just downloaded the Mozilla browser ([1]) and took a look at one of the web-pages I'd designed a little while back. While the page looks fine in Internet Explorer 6, the browser I've always used in the past, on Mozilla is displays with no background color. I'd used the "tcolor" demo that comes with ActiveTcl to pick a pale-blue that looks good, but not one of the "web-safe" colors. Mozilla wasn't showing it correctly, and on the assumption (read as: frustrated wild guess) that that might be why, I wrote this little script quickly. It's rather rough in terms of appearance, but it works fine. Just type in the color you want (either a Tk color name or in hex/#FFFFFF format), or click "Choose" and select your color in the tk_chooseColor dialog. Then click Go. It'll work out the closest Web-Safe Color, and show you a small sample of both what you entered and the closest web-safe one, including the RGB counts of both, and the hex-format color name of the web-safe version. My definition of what a Web Safe Color is comes from the list on the W3Schools page, at [2]. Some of the code for finding the closest color is an adaptation of that used in Closest color name - in fact, I guess this is basically the same app, but using a different set of pre-defined colors and with a GUI (if I dare use the term for this).

Anyway, here's the code. Seems to work OK - at least, it hasn't picked anything randomly off-track, with the few tests I've done - even it looks crap ;)

(Incidently, when it lists the RGB, it's 1-256, not 0-255)

KPV I came across a web page recently that described experiments somebody ran testing how well a large variety of browsers handled color. IIRC it would embed a solid gif image inside a table cell that had its background set to that color; if the gif was indistinguishable from the cell then the browser was said to handle that color correctly. The result was very disappointing--only about 12 colors were handled correctly by all browsers, and only about 20 colors were handled correctly by the more popular browser versions. Unfortunately I don't have the link anymore but I thought I got to it from this wiki.
 # Web-Safe Colors, version 1
 # By Mike Griffiths, Oct 7 2004. Use, edit and anything else as you please.
 set colors [list 000000 000033 000066 000099 0000CC 0000FF 003300 003333 003366 003399]
 lappend colors 0033CC 0033FF 006600 006633 006666 006699 0066CC 0066FF 009900 009933 009966
 lappend colors 009999 0099CC 0099FF 00CC00 00CC33 00CC66 00CC99 00CCCC 00CCFF 00FF00
 lappend colors 00FF33 00FF66 00FF99 00FFCC 00FFFF 330000 330033 330066 330099 3300CC
 lappend colors 3300FF 333300 333333 333366 333399 3333CC 3333FF 336600 336633 336666
 lappend colors 336699 3366CC 3366FF 339900 339933 339966 339999 3399CC 3399FF 33CC00
 lappend colors 33CC33 33CC66 33CC99 33CCCC 33CCFF 33FF00 33FF33 33FF66 33FF99 33FFCC
 lappend colors 33FFFF 660000 660033 660066 660099 6600CC 6600FF 663300 663333 663366
 lappend colors 663399 6633CC 6633FF 666600 666633 666666 666699 6666CC 6666FF 669900
 lappend colors 669933 669966 669999 6699CC 6699FF 66CC00 66CC33 66CC66 66CC99 66CCCC
 lappend colors 66CCFF 66FF00 66FF33 66FF66 66FF99 66FFCC 66FFFF 990000 990033 990066
 lappend colors 990099 9900CC 9900FF 993300 993333 993366 993399 9933CC 9933FF 996600
 lappend colors 996633 996666 996699 9966CC 9966FF 999900 999933 999966 999999 9999CC
 lappend colors 9999FF 99CC00 99CC33 99CC66 99CC99 99CCCC 99CCFF 99FF00 99FF33 99FF66
 lappend colors 99FF99 99FFCC 99FFFF CC0000 CC0033 CC0066 CC0099 CC00CC CC00FF CC3300
 lappend colors CC3333 CC3366 CC3399 CC33CC CC33FF CC6600 CC6633 CC6666 CC6699 CC66CC
 lappend colors CC66FF CC9900 CC9933 CC9966 CC9999 CC99CC CC99FF CCCC00 CCCC33 CCCC66
 lappend colors CCCC99 CCCCCC CCCCFF CCFF00 CCFF33 CCFF66 CCFF99 CCFFCC CCFFFF FF0000
 lappend colors FF0033 FF0066 FF0099 FF00CC FF00FF FF3300 FF3333 FF3366 FF3399 FF33CC
 lappend colors FF33FF FF6600 FF6633 FF6666 FF6699 FF66CC FF66FF FF9900 FF9933 FF9966
 lappend colors FF9999 FF99CC FF99FF FFCC00 FFCC33 FFCC66 FFCC99 FFCCCC FFCCFF FFFF00
 lappend colors FFFF33 FFFF66 FFFF99 FFFFCC FFFFFF

 foreach x $colors {
          scan [winfo rgb . "#$x"] "%d %d %d" color(#$x,r) color(#$x,g) color(#$x,b)
         }

 proc selCol {} {
   global color

   if { [set this [tk_chooseColor -initialcolor $color(q)]] == "" } {
        return;
      }
   set color(q) $this
 };# selCol

 proc go {} {
   global color colors

   if { [catch {scan [winfo rgb . $color(q)] "%d %d %d" t(r) t(g) t(b)}] } {
        tk_messageBox -icon error -message "Bad Color Name \"$color(a)\""
        return;
      }

   set dist 1000000
   foreach name $colors {
             set r $color(#$name,r) ; set g $color(#$name,g) ; set b $color(#$name,b)
             set d [expr abs($r - $t(r)) + abs($g - $t(g)) + abs($b - $t(b))]
             if {$d == "0"} {
                 set best_name $name ; break
                }
             if {$d < $dist} {
                 set dist $d
                 set best_name $name
                }
         }

   set r1 [expr {($t(r)/256)+1}]
   set g1 [expr {($t(g)/256)+1}]
   set b1 [expr {($t(b)/256)+1}]

   set color(a) "#$best_name"
   set c $color(a)

   .right.top.b configure -background $color(q)
   .right.btm.b configure -background $c

   set r2 [expr {($color($c,r)/256)+1}]
   set g2 [expr {($color($c,g)/256)+1}]
   set b2 [expr {($color($c,b)/256)+1}]

   set color(r) "$r1 / $r2"
   set color(g) "$g1 / $g2"
   set color(b) "$b1 / $b2"

 };# go

 pack [frame .left] -side left -fill both
 pack [frame .left.top] -fill x -side top
 pack [label .left.top.l -text "Color:"] -side left
 pack [entry .left.top.e -textvariable color(q) -width 15] -side left
 pack [button .left.top.b -command selCol -text "Choose..."] -side left

 pack [frame .mid] -fill x -side top
 pack [button .mid.b -command go -text "Go!"] -side left

 pack [frame .left.btm1] -fill x -side top
 pack [label .left.btm1.l -text "Closest Web-safe Color:" -width 25] -side left
 pack [entry .left.btm1.e -textvariable color(a) -state disabled] -side left

 pack [frame .left.btm2] -fill x -side top
 pack [label .left.btm2.l -text "Red (Yours / Web-Safe):" -width 25] -side left
 pack [entry .left.btm2.e -textvariable color(r) -state disabled] -side left

 pack [frame .left.btm3] -fill x -side top
 pack [label .left.btm3.l -text "Green (Yours / Web-Safe):" -width 25] -side left
 pack [entry .left.btm3.e -textvariable color(g) -state disabled] -side left

 pack [frame .left.btm4] -fill x -side top
 pack [label .left.btm4.l -text "Blue (Yours / Web-Safe)Color:" -width 25] -side left
 pack [entry .left.btm4.e -textvariable color(b) -state disabled] -side left

 image create photo blankImage

 pack [frame .right] -side left -fill both
 pack [frame .right.top] -side top -fill x
 pack [label .right.top.l -text "Your Color:" -width 18] -side left
 pack [label .right.top.b -compound top -image blankImage -height 20px -width 20px -bg white -borderwidth 2] -side left

 pack [frame .right.btm] -side left -fill x
 pack [label .right.btm.l -text "Web-Safe Color:" -width 18] -side left; # corrected a typo - male 2004-10-08
 pack [label .right.btm.b -compound top -image blankImage -height 20px -width 20px -borderwidth 2] -side left

 # -- init
 set color(q) "#ffffff"
 go
# [aa] suggests an alternative initialization for the colors list:

 set websafe [list 0 3 6 9 C F]
 set colors [list]
 foreach r $websafe {
   foreach g $websafe {
     foreach b $websafe {
       lappend colors $r$r$g$g$b$b
     }
   }
 }

EKB This is great! I've got some code for a browser-safe color picker on the colors page. Here's what it looks like:

And IMHO it goes very well with this code for the closest web-safe color picker. Here's the dynamic combo in action:

MG Thanks for sharing that, Eric - it's great to know someone's using it and finding it useful :) (And for the pointer to your color-picker, which looks very nifty and is now sitting on my desktop)

Category ApplicationCategory GUI