Color · WB Design Wiki

Source: specs/ux/tokens/Light.tokens.json.

Primitives

Grades are ordered by the source token scale. Higher grades are generally darker or stronger; 100, 200, and 250 grades are used for soft surfaces and content backgrounds.

Purple

Grade	Hex	Figma Variable ID
100	`#F2E6FE`	`VariableID:14785:20445`
150	`#EDD8FF`	`VariableID:14785:20444`
200	`#E2CFFC`	`VariableID:14785:20443`
300	`#C3A6FF`	`VariableID:14738:52595`
350	`#B692FF`	`VariableID:14738:47566`
400	`#AA80FF`	`VariableID:17193:104`
500	`#7F30E3`	`VariableID:14738:47567`
600	`#7021D4`	`VariableID:17193:105`
700	`#6117BE`	`VariableID:17193:106`
800	`#574E68`	`VariableID:16969:8913`
850	`#433A54`	`VariableID:16969:8912`
900	`#2F2640`	`VariableID:14785:20459`

Orange

Grade	Hex	Figma Variable ID
100	`#FFF2EA`	`VariableID:16287:46761`
200	`#FFE7D8`	`VariableID:16958:209052`
250	`#FFD9C0`	`VariableID:16958:209053`
300	`#FFAD46`	`VariableID:14753:264812`
350	`#FF973C`	`VariableID:14753:264811`
500	`#FF8533`	`VariableID:14753:264810`
600	`#FF761A`	`VariableID:14753:264809`
700	`#FF6700`	`VariableID:14753:264808`
800	`#6A3A1B`	`VariableID:16958:209051`
850	`#5A3117`	`VariableID:16958:209050`
900	`#4A2812`	`VariableID:16287:55174`

Green

Grade	Hex	Figma Variable ID
100	`#E4F8EE`	`VariableID:16287:46406`
200	`#D4F4E4`	`VariableID:16968:8809`
250	`#BFF0D6`	`VariableID:16968:8810`
300	`#28F094`	`VariableID:14753:264801`
350	`#1FDA8F`	`VariableID:14753:264800`
400	`#1DCB74`	`VariableID:14753:264799`
500	`#1DAF66`	`VariableID:14753:264798`
600	`#199959`	`VariableID:14753:264797`
700	`#16844D`	`VariableID:14753:264796`
800	`#335A45`	`VariableID:16968:8808`
850	`#294A39`	`VariableID:16967:9628`
900	`#203C2E`	`VariableID:16287:46748`

Red

Grade	Hex	Figma Variable ID
100	`#FEEAEE`	`VariableID:16287:115560`
200	`#FFDCE3`	`VariableID:16962:209056`
250	`#FFC9D3`	`VariableID:16967:8808`
300	`#FF8091`	`VariableID:14753:264819`
350	`#FF667B`	`VariableID:14753:264818`
400	`#FF4760`	`VariableID:14753:264817`
500	`#FA2B55`	`VariableID:14753:264816`
600	`#F90637`	`VariableID:14753:264815`
700	`#E00532`	`VariableID:14753:264814`
800	`#6D1E2D`	`VariableID:16967:8810`
850	`#5A1724`	`VariableID:16967:8809`
900	`#49121C`	`VariableID:16287:128898`

Blackberry

Primitive path: primitives.blackberry (bg).

Grade	Hex	Figma Variable ID
100	`#F2E6FE`	`VariableID:16969:8816`
200	`#E7D2FF`	`VariableID:16969:8817`
250	`#DBBEFF`	`VariableID:16969:8818`
800	`#473C60`	`VariableID:16969:8815`
850	`#3A3050`	`VariableID:16969:8814`
900	`#2F2640`	`VariableID:16969:8813`

Mint

Grade	Hex	Figma Variable ID
100	`#D8FBFD`	`VariableID:16994:8813`
200	`#C5F6F9`	`VariableID:16994:8812`
250	`#AEEEF3`	`VariableID:16994:8811`
300	`#3BE2EA`	`VariableID:17193:274293`
350	`#20D5DE`	`VariableID:17193:274292`
400	`#05C7D1`	`VariableID:16994:8817`
500	`#059DAE`	`VariableID:16994:8816`
600	`#048B9B`	`VariableID:17193:274290`
700	`#037988`	`VariableID:17193:274291`
800	`#185457`	`VariableID:16994:8810`
850	`#114447`	`VariableID:16994:8809`
900	`#0A3638`	`VariableID:16994:8808`

Sky

Grade	Hex	Figma Variable ID
100	`#D8F2FD`	`VariableID:16994:10472`
200	`#C4EAFE`	`VariableID:16994:10471`
250	`#AEDFFD`	`VariableID:16994:10470`
300	`#92D2F3`	`VariableID:17193:274297`
350	`#7BC6EC`	`VariableID:17193:274296`
400	`#67BAE4`	`VariableID:16994:10469`
500	`#0088C2`	`VariableID:16994:10468`
600	`#0078AD`	`VariableID:17193:274298`
700	`#006999`	`VariableID:17193:274299`
800	`#205265`	`VariableID:16994:10467`
850	`#174252`	`VariableID:16994:10466`
900	`#103341`	`VariableID:16994:10465`

River

Grade	Hex	Figma Variable ID
100	`#D1ECFF`	`VariableID:16998:8942`
200	`#BFE3FF`	`VariableID:16998:8941`
250	`#A8D7FF`	`VariableID:16998:8940`
400	`#74C7FF`	`VariableID:17064:11310`
500	`#0098FE`	`VariableID:16998:8938`
600	`#0089E5`	`VariableID:17193:274322`
700	`#007ACC`	`VariableID:17193:274323`
800	`#225471`	`VariableID:16998:8937`
850	`#19435F`	`VariableID:16998:8936`
900	`#12354F`	`VariableID:16998:8935`

Lavender

Grade	Hex	Figma Variable ID
100	`#EFECFF`	`VariableID:17064:10094`
200	`#E4DEFF`	`VariableID:17064:10093`
250	`#D7CEFF`	`VariableID:17064:10092`
300	`#B7B2FF`	`VariableID:17196:107`
350	`#A6A0FF`	`VariableID:17196:106`
400	`#968FFF`	`VariableID:17064:10095`
500	`#7158FE`	`VariableID:17064:10091`
600	`#6247F0`	`VariableID:17196:108`
700	`#5538DE`	`VariableID:17196:109`
800	`#433F66`	`VariableID:17064:10090`
850	`#353252`	`VariableID:17064:10089`
900	`#2A2843`	`VariableID:17064:10088`

Raspberry

Grade	Hex	Figma Variable ID
100	`#FCE8F3`	`VariableID:17064:10139`
200	`#F9DCEC`	`VariableID:17064:10138`
250	`#F5CCE2`	`VariableID:17064:10137`
300	`#FFBCE1`	`VariableID:17196:115`
350	`#FFABD9`	`VariableID:17196:114`
400	`#FF99D1`	`VariableID:17064:10136`
500	`#DC1984`	`VariableID:17064:10135`
600	`#C91475`	`VariableID:17196:112`
700	`#B10F66`	`VariableID:17196:113`
800	`#6A3352`	`VariableID:17064:10134`
850	`#572843`	`VariableID:17064:10133`
900	`#471F34`	`VariableID:17064:10132`

Gray

Grade	Hex	Figma Variable ID
100	`#F6F6F9`	`VariableID:14753:252222`
200	`#E0E0EB`	`VariableID:14753:252220`
250	`#D1D1E0`	`VariableID:14753:252219`
300	`#C4C4D4`	`VariableID:14753:252218`
350	`#B6B6C9`	`VariableID:14753:264302`
400	`#9D9DAE`	`VariableID:14753:252217`
500	`#8F8FA3`	`VariableID:14753:252216`
600	`#777788`	`VariableID:14753:252215`
650	`#5F5F6D`	`VariableID:14738:52593`
700	`#53535F`	`VariableID:14753:252568`
750	`#474752`	`VariableID:14753:252594`
800	`#3B3B44`	`VariableID:14753:252595`
900	`#2F2F37`	`VariableID:14753:252596`

Black

Grade	Hex	Figma Variable ID
800	`#242429`	`VariableID:14753:229418`
900	`#18181B`	`VariableID:14738:229179`

Alpha Light

Primitive path: alpha.light.

Grade	Hex	Alpha	Figma Variable ID
0	`#FFFFFF`	`0`	`VariableID:13896:4433`
5	`#FFFFFF`	`0.05`	`VariableID:13896:4438`
10	`#FFFFFF`	`0.1`	`VariableID:13896:4437`
20	`#FFFFFF`	`0.2`	`VariableID:13896:4436`
25	`#FFFFFF`	`0.25`	`VariableID:13896:4434`
50	`#FFFFFF`	`0.5`	`VariableID:13896:4431`
75	`#FFFFFF`	`0.75`	`VariableID:13896:4432`
80	`#FFFFFF`	`0.8`	`VariableID:13896:4430`
100	`#FFFFFF`	`1`	`VariableID:13896:4435`

Alpha Dark

Primitive path: alpha.dark.

Grade	Hex	Alpha	Figma Variable ID
0	`#000000`	`0`	`VariableID:13893:18632`
5	`#000000`	`0.05`	`VariableID:13895:3071`
10	`#000000`	`0.1`	`VariableID:13895:3196`
20	`#000000`	`0.2`	`VariableID:13895:3072`
25	`#000000`	`0.25`	`VariableID:13895:3082`
50	`#000000`	`0.5`	`VariableID:13895:3081`
75	`#000000`	`0.75`	`VariableID:13895:3080`
80	`#000000`	`0.8`	`VariableID:13895:3089`
100	`#000000`	`1`	`VariableID:13895:3088`