Tuesday 18 June 2013

OS X Crayon Color Hex Table

I've been doing dozens of wireframes recently using OmniGraffle.
Which, I might add, is very useful for this.
To help me along, I've been using some stencils:

  • jQmobile
  • iPhone 5 UI
  • Mobile - iPhone
  • Best Practice UX Forms Stencil v2.0
  • Ultimate iPhone

All pretty cool.

But when I came to actually creating some of the layouts to HTML and specifically CSS, I found getting the colors from the Color Picker crayons to hex values was irritating. I did try ColorPicker from RubiCode.com, but in the end I just built a table.

For my reference and for anyone else who needs a visual representation of those crayons I put this together:


Cayenne
#800000

Clover
#008000

Midnight
#000080

Tin
#7F7F7F

Asparagus
#808000

Teal
#008080

Plum
#800080

Nickel
#808080

Mocha
#804000

Moss
#008040

Eggplant
#400080

Steel
#666666

Fern
#408000

Ocean
#004080

Maroon
#800040

Aluminum
#999999

Marascino
#FF0000

Spring
#00FF00

Blueberry
#0000FF

Iron
#4C4C4C

Lemon
#FFFF00

Turquoise
#00FFFF

Magenta
#FF00FF

Magnesium
#B3B3B3

Tangerine
#FF8000

Sea Foam
#00FF80

Grape
#8000FF

Tungsten
#333333

Lime
#80FF00

Aqua
#0080FF

Strawberry
#FF0080

Silver
#CCCCCC

Salmon
#FF6666

Flora
#66FF66

Orchid
#6666FF

Lead
#191919

Banana
#FFFF66

Ice
#66FFFF

Bubblegum
#FF66FF

Mercury
#E6E6E6

Cantaloupe
#FFCC66

Spindrift
#66FFCC

Lavender
#CC66FF

Licorice
#000000

Honeydew
#CCFF66

Sky
#66CCFF

Carnation
#FF6FCF

Snow
#FFFFFF


For reference, here is the CSS used for the above table for your cut-n-paste convenience:

.Cayenne { background-color: #800000; }
.Asparagus { background-color: #808000; }
.Clover  { background-color: #008000; }
.Teal  { background-color: #008080; }
.Midnight { background-color: #000080; }
.Plum  { background-color: #800080; }
.Tin  { background-color: #7F7F7F; }
.Nickel  { background-color: #808080; }
.Mocha  { background-color: #804000; }
.Fern  { background-color: #408000; }
.Moss  { background-color: #008040; }
.Ocean  { background-color: #004080; }
.Eggplant { background-color: #400080; }
.Maroon  { background-color: #800040; }
.Steel  { background-color: #666666; }
.Aluminum { background-color: #999999; }
.Marascino { background-color: #FF0000; }
.Lemon  { background-color: #FFFF00; }
.Spring  { background-color: #00FF00; }
.Turquoise { background-color: #00FFFF; }
.Blueberry { background-color: #0000FF; }
.Magenta { background-color: #FF00FF; }
.Iron  { background-color: #4C4C4C; }
.Magnesium { background-color: #B3B3B3; }
.Tangerine { background-color: #FF8000; }
.Lime  { background-color: #80FF00; }
.SeaFoam { background-color: #00FF80; }
.Aqua  { background-color: #0080FF; }
.Grape  { background-color: #8000FF; }
.Strawberry { background-color: #FF0080; }
.Tungsten { background-color: #333333; }
.Silver  { background-color: #CCCCCC; }
.Salmon  { background-color: #FF6666; }
.Banana  { background-color: #FFFF66; }
.Flora  { background-color: #66FF66; }
.Ice  { background-color: #66FFFF; }
.Orchid  { background-color: #6666FF; }
.Bubblegum { background-color: #FF66FF; }
.Lead  { background-color: #191919; }
.Mercury { background-color: #E6E6E6; }
.Cantaloupe { background-color: #FFCC66; }
.Honeydew { background-color: #CCFF66; }
.Spindrift { background-color: #66FFCC; }
.Sky  { background-color: #66CCFF; }
.Lavender { background-color: #CC66FF; }
.Carnation { background-color: #FF6FCF; }
.Licorice { background-color: #000000; }
.Snow  { background-color: #FFFFFF; }

3 comments:

  1. String colors[][] = {
    {"#000000", "#191919", "#333333", "#4C4C4C", "#666666"},
    {"#7F7F7F", "#999999", "#B3B3B3", "#E6E6E6", "#FFFFFF"},
    {"#004080", "#000080", "#0000FF", "#0080FF", "#66CCFF"},
    {"#66FFFF", "#00FFFF", "#008080", "#008040", "#408000"},
    {"#008000", "#00FF00", "#80FF00", "#66FF66", "#00FF80"},
    {"#66FFCC", "#804000", "#800000", "#FF0000", "#FF6666"},
    {"#FF8000", "#FFFF00", "#FFFF66", "#FFCC66", "#400080"},
    {"#800080", "#800040", "#8000FF", "#FF00FF", "#FF0080"},
    {"#CC66FF", "#FF66FF"}
    };

    here is a two-dimensional array of 42 of those colors. They are "sorted" by hand (so not very sorted).

    ReplyDelete
  2. We are really grateful for your blog post. You will find a lot of approaches after visiting your post. I was exactly searching for. Thanks for such post and please keep it up. Great work. hex To decimal Online convertor

    ReplyDelete