Replacing the CSS color keyword system with improved hues and more memorable, relevant names
Dudley Storey
The CSS named color system is notoriously bad: keywords are often difficult to remember (navajowhite), illogical (darkgrey actually displays lighter than dimgray) and/or visually questionable (lime and fuchsia verge on the bilious).
Until CSS custom named hues and variables are widely supported, preprocessors remain the best way to create your own custom color names. Defining site colors in Sass creates a cohesive color library that can be used to style content quickly and easily, with named colors that are significantly easier to remember and type than their hex equivalents. However, it can be burdensome to build a decent color library with a logical naming system.
Inspired by Ingrid Sundberg’s color thesaurus, as well as the work of Adam Morse and Joe Hanson, I’ve created a Sass visual color library for site prototyping, design and development. These new defaults – 204 keywords in all – use evocative and logical names, making for easy implementation. As much as possible, the keywords reference familiar hues from the natural world. In some cases, they replace the classic CSS keyword names with more visually appealing colors.tan#e5dbacbeige#ecdc99macaroon#f7df75hazelwood#c9bc8egranola#d6b75aoat#dec98aeggnog#fbe29dfawn#c7a951sand#d7b963sepia#e3b678latte#e9c17boyster#dcd69fbiscotti#e3c565parmesean#fee993hazelnut#bda55dsandcastle#dbc27dbuttermilk#fdefb2sanddollar#ebe7b9shortbread#fce791
Using the color keyword library in Sass is easy. From the Github repo, include _color-map.scss and _color-generator.scss in your project:
@import 'maps/_color-map.scss';
@import 'functions/_color-generator.scss';
This provides access to any of the named colors in your Sass:
body { background: color(sky); }
If you’re not yet using Sass, I’ve presented the equivalent hex colors here for your convenience; a copy of the colors and Sass code is also available at CodePen, and on the related GitHub Pages site. yellow#FFDC00canary#fac801gold#f9a602daffodil#feee88flaxen#d5b65abutter#fee226lemon#effd5fmustard#e9b829corn#e4cd04medallion#e4b103dandelion#fdce2abumblebee#fce206banana#fcf4a3butterscotch#fabd04dijon#c29200honey#ec9707blonde#fdeb75pineapple#ffe327tuscansun#fcd12a
Of course, outside the scientific realm, color is entirely subjective: you’re very welcome to create your own variations in the color map, or change them to suit your tastes, while the traditional color keywords remain entirely available to you. I look forward to any use and feedback!orange#ff851btangerine#f98228merigold#fdae1dcider#b66827rust#8c4005ginger#bc5703tiger#fb6b02bronze#b2560ccantaloupe#fca172apricot#ed810fcarrot#ed7116squash#c95c09spice#7a3a03marmalade#d16102amber#893201sandstone#d57128yam#cc5801red#ff4136cherry#9a0f02rose#e2252ajam#600f0bmerlot#541f1bgarnet#5f0a04crimson#b8100aruby#900503scarlet#910d08redwine#4c0805redapple#a91b0dmahogany#420d09blood#710c04sangria#5f1914currant#670c07blush#bb544acandy#d31603lipstick#9b0f02pink#f69acdfuchsia#f012bepunch#f25278watermelon#fe809cflamingo#fda4b8rouge#f26c8csalmon#fdab9fcoral#fe7d67peach#fb9483strawberry#fc4c4erosewood#a04242lemonade#fabacbtaffy#fa85c4bubblegum#fd5ca8balletslipper#f69abfcrepe#f1b7c6maroon#85144behotpink#ff1696purple#b10dc9mauve#7a4a89violet#710193boysenberry#630536lavender#e3a0f6maroon#85144Bplum#601a36lilac#b65fcdperiwinkle#be93d4 eggplant#311431iris#9866c5heather#9b7cb9amethyst#a45de4raisin#290916orchid#af69eemulberry#4d0220green#2ecc40chartreuse#b0fc37juniper#395311sage#728c69lime#01ff70fern#5dbc64olive#98bf64emerald#038911pear#74b62dmoss#476d1eshamrock#03ac13seafoam#3cec96pine#24501eparakeet#02c04amint#98ecc3seaweed#354b21pickle#5a7d36pistachio#b2d3c1basil#32622dcrocodile#5f7c3abrown#241709coffee#4b371cmocha#3c290dpeanut#795c34carob#35260fhickory#371d10pecan#4a2512walnut#432711caramel#66360fgingerbread#5d2c04chocolate#2c1603tortilla#9a7b4fumber#352415tawny#7e491dbrunette#391e07cinammon#642b0dpenny#522915grey#aaaaaashadow#373737graphite#584d5biron#332d31pewter#6a6880cloud#c5c5d0silver#ddddddsmoke#59515fanchor#42424cash#554c4dporpoise#4d4c5ddove#7c6e7ffog#655965flint#7d7c9cpebble#333333lead#403f4ecoin#9897a9fossil#787276black#111111ebony#080401crow#3d3934charcoal#222023
Explore the Sass and colors at CodePen