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; }
Thanks a lot!!!
ReplyDeleteString colors[][] = {
ReplyDelete{"#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).
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