新的默认设置：Sass颜色同义词库

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).

该CSS命名的颜色系统是出了名的坏：关键字往往很难记住( 印地安 )，不合逻辑(darkgrey实际显示轻于暗灰 )和/或视觉上有问题( 石灰和紫红色边缘的胆汁)。

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.

在广泛支持CSS自定义名称的色相和变量之前， 预处理器仍然是创建自己的自定义颜色名称的最佳方法。 在Sass中定义站点颜色会创建一个内聚的颜色库，该库可用于快速轻松地对内容进行样式设置，其命名的颜色比其十六进制等效项更容易记住和键入。 但是，使用逻辑命名系统构建体面的颜色库可能会很麻烦。

blue#0074d9

蓝色＃0074d9

navy#001f3f

海军＃001f3f

aqua#7fdbff

浅绿色＃7fdbff

sky#00b2ff

天空＃00b2ff

teal#39cccc

蓝绿色＃39cccc

slate#757b87

板岩＃757b87

indigo#281e5d

靛蓝＃281e5d

cobalt#1438bd

钴＃1438bd

ocean#026063

海洋＃026063

peacock#002d37

Kong雀＃002d37

azure#1621a6

天蓝色＃1621a6

cerulean#0592c2

蔚蓝的＃0592c2

lapis#2632c2

青金石＃2632c2

spruce#2c3e4b

云杉＃2c3e4b

stone#59788d

石头＃59788d

aegean#1e456e

爱琴海＃1e456e

berry#24146f

浆果＃24146f

denim#141e3c

牛仔布＃141e3c

admiral#060f94

海军上将＃060f94

sapphire#52b2c0

蓝宝石＃52b2c0

arctic#82edfe

北极＃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.

受Ingrid Sundberg的色彩词库以及Adam Morse和Joe Hanson的启发，我创建了一个Sass视觉色彩库，用于网站原型设计，设计和开发。 这些新的默认值(共204个关键字)使用唤起性和逻辑性名称，易于实现。 关键字尽可能引用自然界中熟悉的色调。 在某些情况下，它们用更具视觉吸引力的颜色替换了经典CSS关键字名称。

tan#e5dbac

棕褐色＃e5dbac

beige#ecdc99

米色＃ecdc99

macaroon#f7df75

蛋白杏仁饼干＃f7df75

hazelwood#c9bc8e

榛木＃c9bc8e

granola#d6b75a

格兰诺拉麦片＃d6b75a

oat#dec98a

燕麦＃dec98a

eggnog#fbe29d

蛋酒＃fbe29d

fawn#c7a951

小鹿＃c7a951

sand#d7b963

沙＃d7b963

sepia#e3b678

棕褐色＃e3b678

latte#e9c17b

拿铁咖啡＃e9c17b

oyster#dcd69f

牡蛎＃dcd69f

biscotti#e3c565

比斯科蒂＃e3c565

parmesean#fee993

巴马＃fee993

hazelnut#bda55d

榛子＃bda55d

sandcastle#dbc27d

沙堡＃dbc27d

buttermilk#fdefb2

酪乳＃fdefb2

sanddollar#ebe7b9

沙多拉＃ebe7b9

shortbread#fce791

脆饼＃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:

在Sass中使用color关键字库很容易。 在Github存储库中 ，将_color-map.scss和_color-generator.scss包含在您的项目中：

@import 'maps/_color-map.scss';@import 'functions/_color-generator.scss';

This provides access to any of the named colors in your Sass:

这可以访问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.

如果您尚未使用Sass，为方便起见，我在此处介绍了等效的十六进制颜色。 颜色和Sass代码的副本也可以从CodePen和相关的GitHub Pages站点上获得 。

yellow#FFDC00

黄色＃FFDC00

canary#fac801

金丝雀＃fac801

gold#f9a602

金＃f9a602

daffodil#feee88

水仙花＃feee88

flaxen#d5b65a

亚麻＃d5b65a

butter#fee226

黄油＃fee226

lemon#effd5f

柠檬＃effd5f

mustard#e9b829

芥末酱＃e9b829

corn#e4cd04

玉米＃e4cd04

medallion#e4b103

纪念章＃e4b103

dandelion#fdce2a

蒲公英＃fdce2a

bumblebee#fce206

大WaSP＃fce206

banana#fcf4a3

香蕉＃fcf4a3

butterscotch#fabd04

奶油糖＃fabd04

dijon#c29200

第戎＃c29200

honey#ec9707

蜂蜜＃ec9707

blonde#fdeb75

金发女郎＃fdeb75

pineapple#ffe327

菠萝＃ffe327

tuscansun#fcd12a

托斯卡纳太阳＃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!

当然，在科学领域之外，颜色完全是主观的：非常欢迎您在颜色图中创建自己的变体，或者根据自己的口味进行更改，而传统的颜色关键字仍然完全可用。 我期待任何使用和反馈！

black#111111

黑色＃111111

ebony#080401

乌木＃080401

crow#3d3934

乌鸦＃3d3934

charcoal#222023

木炭＃222023

grey#aaaaaa

灰色#aaaaaa

shadow#373737

阴影＃373737

graphite#584d5b

石墨＃584d5b

iron#332d31

铁＃332d31

pewter#6a6880

锡＃6a6880

cloud#c5c5d0

云＃c5c5d0

silver#dddddd

银#dddddd

smoke#59515f

烟＃59515f

anchor#42424c

锚点＃42424c

ash#554c4d

灰＃554c4d

porpoise#4d4c5d

海豚＃4d4c5d

dove#7c6e7f

鸽子＃7c6e7f

fog#655965

雾＃655965

flint#7d7c9c

火石＃7d7c9c

pebble#333333

卵石＃333333

lead#403f4e

铅＃403f4e

coin#9897a9

硬币＃9897a9

fossil#787276

化石＃787276

brown#241709

棕色＃241709

coffee#4b371c

咖啡＃4b371c

mocha#3c290d

摩卡＃3c290d

peanut#795c34

花生＃795c34

carob#35260f

角豆树＃35260f

hickory#371d10

山核桃＃371d10

pecan#4a2512

山核桃＃4a2512

walnut#432711

核桃＃432711

caramel#66360f

焦糖＃66360f

gingerbread#5d2c04

姜饼＃5d2c04

chocolate#2c1603

巧克力＃2c1603

tortilla#9a7b4f

玉米饼＃9a7b4f

umber#352415

琥珀色＃352415

tawny#7e491d

黄褐色＃7e491d

brunette#391e07

黑发＃391e07

cinammon#642b0d

肉桂＃642b0d

penny#522915

一分钱＃522915

green#2ecc40

绿色＃2ecc40

chartreuse#b0fc37

黄绿色＃b0fc37

juniper#395311

杜松＃395311

sage#728c69

贤者＃728c69

lime#01ff70

石灰＃01ff70

fern#5dbc64

蕨＃5dbc64

olive#98bf64

橄榄＃98bf64

emerald#038911

翡翠＃038911

pear#74b62d

梨＃74b62d

moss#476d1e

青苔＃476d1e

shamrock#03ac13

三叶草＃03ac13

seafoam#3cec96

海泡＃3cec96

pine#24501e

松树＃24501e

parakeet#02c04a

长尾小鹦鹉＃02c04a

mint#98ecc3

薄荷＃98ecc3

seaweed#354b21

海藻＃354b21

pickle#5a7d36

泡菜＃5a7d36

pistachio#b2d3c1

阿月浑子＃b2d3c1

basil#32622d

罗勒＃32622d

crocodile#5f7c3a

鳄鱼＃5f7c3a

purple#b10dc9

紫色＃b10dc9

mauve#7a4a89

淡紫色＃7a4a89

violet#710193

紫罗兰色＃710193

boysenberry#630536

波森莓＃630536

lavender#e3a0f6

薰衣草＃e3a0f6

maroon#85144B

栗色＃85144B

plum#601a36

李子＃601a36

lilac#b65fcd

丁香＃b65fcd

periwinkle#be93d4

长春花＃be93d4

eggplant#311431

茄子＃311431

iris#9866c5

虹膜＃9866c5

heather#9b7cb9

希瑟＃9b7cb9

amethyst#a45de4

紫水晶＃a45de4

raisin#290916

葡萄干＃290916

orchid#af69ee

兰花＃af69ee

mulberry#4d0220

桑树＃4d0220

pink#f69acd

粉色＃f69acd

fuchsia#f012be

紫红色＃f012be

punch#f25278

冲床＃f25278

watermelon#fe809c

西瓜＃fe809c

flamingo#fda4b8

火烈鸟＃fda4b8

rouge#f26c8c

胭脂＃f26c8c

salmon#fdab9f

三文鱼＃fdab9f

coral#fe7d67

珊瑚＃fe7d67

peach#fb9483

桃子＃fb9483

strawberry#fc4c4e

草莓＃fc4c4e

rosewood#a04242

紫檀木＃a04242

lemonade#fabacb

柠檬水#fabacb

taffy#fa85c4

太妃糖＃fa85c4

bubblegum#fd5ca8

泡泡糖＃fd5ca8

balletslipper#f69abf

芭蕾舞演员＃f69abf

crepe#f1b7c6

绉＃f1b7c6

maroon#85144be

栗色＃85144be

hotpink#ff1696

热粉红色＃ff1696

red#ff4136

红色＃ff4136

cherry#9a0f02

樱桃＃9a0f02

rose#e2252a

玫瑰＃e2252a

jam#600f0b

卡纸＃600f0b

merlot#541f1b

梅洛＃541f1b

garnet#5f0a04

石榴石＃5f0a04

crimson#b8100a

深红色＃b8100a

ruby#900503

Ruby＃900503

scarlet#910d08

猩红＃910d08

redwine#4c0805

红葡萄酒＃4c0805

redapple#a91b0d

红苹果＃a91b0d

mahogany#420d09

桃花心木＃420d09

blood#710c04

血液＃710c04

sangria#5f1914

桑格利亚汽酒＃5f1914

currant#670c07

醋栗＃670c07

blush#bb544a

脸红＃bb544a

candy#d31603

糖果＃d31603

lipstick#9b0f02

口红＃9b0f02

orange#ff851b

橙色＃ff851b

tangerine#f98228

橘子＃f98228

merigold#fdae1d

梅格尔德＃fdae1d

cider#b66827

苹果酒＃b66827

rust#8c4005

锈＃8c4005

ginger#bc5703

姜＃bc5703

tiger#fb6b02

老虎＃fb6b02

bronze#b2560c

青铜＃b2560c

cantaloupe#fca172

哈密​​瓜＃fca172

apricot#ed810f

杏＃ed810f

carrot#ed7116

胡萝卜＃ed7116

squash#c95c09

壁球＃c95c09

spice#7a3a03

香料＃7a3a03

marmalade#d16102

果酱＃d16102

amber#893201

琥珀色的＃893201

sandstone#d57128

砂岩＃d57128

yam#cc5801

山药＃cc5801

翻译自: https://thenewcode.com/927/The-New-Defaults-A-Sass-Color-Thesaurus