The New Defaults: A Sass Color Thesaurus

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.

blue#0074d9navy#001f3faqua#7fdbffsky#00b2ffteal#39ccccslate#757b87indigo#281e5dcobalt#1438bdocean#026063peacock#002d37azure#1621a6cerulean#0592c2lapis#2632c2spruce#2c3e4bstone#59788daegean#1e456eberry#24146fdenim#141e3cadmiral#060f94sapphire#52b2c0arctic#82edfe

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#cc5801

red#ff4136cherry#9a0f02rose#e2252ajam#600f0bmerlot#541f1bgarnet#5f0a04crimson#b8100aruby#900503scarlet#910d08redwine#4c0805redapple#a91b0dmahogany#420d09blood#710c04sangria#5f1914currant#670c07blush#bb544acandy#d31603lipstick#9b0f02

pink#f69acdfuchsia#f012bepunch#f25278watermelon#fe809cflamingo#fda4b8rouge#f26c8csalmon#fdab9fcoral#fe7d67peach#fb9483strawberry#fc4c4erosewood#a04242lemonade#fabacbtaffy#fa85c4bubblegum#fd5ca8balletslipper#f69abfcrepe#f1b7c6maroon#85144behotpink#ff1696

purple#b10dc9mauve#7a4a89violet#710193boysenberry#630536lavender#e3a0f6maroon#85144Bplum#601a36lilac#b65fcdperiwinkle#be93d4 eggplant#311431iris#9866c5heather#9b7cb9amethyst#a45de4raisin#290916orchid#af69eemulberry#4d0220

green#2ecc40chartreuse#b0fc37juniper#395311sage#728c69lime#01ff70fern#5dbc64olive#98bf64emerald#038911pear#74b62dmoss#476d1eshamrock#03ac13seafoam#3cec96pine#24501eparakeet#02c04amint#98ecc3seaweed#354b21pickle#5a7d36pistachio#b2d3c1basil#32622dcrocodile#5f7c3a

brown#241709coffee#4b371cmocha#3c290dpeanut#795c34carob#35260fhickory#371d10pecan#4a2512walnut#432711caramel#66360fgingerbread#5d2c04chocolate#2c1603tortilla#9a7b4fumber#352415tawny#7e491dbrunette#391e07cinammon#642b0dpenny#522915

grey#aaaaaashadow#373737graphite#584d5biron#332d31pewter#6a6880cloud#c5c5d0silver#ddddddsmoke#59515fanchor#42424cash#554c4dporpoise#4d4c5ddove#7c6e7ffog#655965flint#7d7c9cpebble#333333lead#403f4ecoin#9897a9fossil#787276

black#111111ebony#080401crow#3d3934charcoal#222023

Explore the Sass and colors at CodePen