Color Palette

Gray

100

200

300

400

500

600

700

800

900

1000

Gray

Chromatic

100

200

300

400

500

600

700

800

900

Carrot

Blue

Green

Yellow

Red

Purple

Tokens

Palette Colors

이름	값
$color.palette.gray-00	#ffffff
$color.palette.gray-100	#f7f8f9
$color.palette.gray-200	#f3f4f5
$color.palette.gray-300	#eeeff1
$color.palette.gray-400	#dcdee3
$color.palette.gray-500	#d1d3d8
$color.palette.gray-600	#b0b3ba
$color.palette.gray-700	#868b94
$color.palette.gray-800	#555d6d
$color.palette.gray-900	#2a3038
$color.palette.gray-1000	#1a1c20
$color.palette.carrot-100	#fff2ec
$color.palette.carrot-200	#ffe8db
$color.palette.carrot-300	#ffd5c0
$color.palette.carrot-400	#ffb999
$color.palette.carrot-500	#ff9364
$color.palette.carrot-600	#ff6600
$color.palette.carrot-700	#e14d00
$color.palette.carrot-800	#b93901
$color.palette.carrot-900	#862b00
$color.palette.carrot-1000	#471601
$color.palette.blue-100	#eff6ff
$color.palette.blue-200	#e2edfc
$color.palette.blue-300	#cbdffa
$color.palette.blue-400	#aacefd
$color.palette.blue-500	#85b8fd
$color.palette.blue-600	#5e98fe
$color.palette.blue-700	#217cf9
$color.palette.blue-800	#135fcd
$color.palette.blue-900	#0b4596
$color.palette.blue-1000	#032451
$color.palette.red-100	#fdf0f0
$color.palette.red-200	#fde7e7
$color.palette.red-300	#fed4d2
$color.palette.red-400	#feb7b3
$color.palette.red-500	#fe928d
$color.palette.red-600	#fc6a66
$color.palette.red-700	#fa342c
$color.palette.red-800	#ca1d13
$color.palette.red-900	#921708
$color.palette.red-1000	#4a1209
$color.palette.green-100	#edfaf6
$color.palette.green-200	#d9f6e9
$color.palette.green-300	#b9e9d2
$color.palette.green-400	#7ddcb3
$color.palette.green-500	#42c593
$color.palette.green-600	#10ab7d
$color.palette.green-700	#079171
$color.palette.green-800	#00745f
$color.palette.green-900	#075445
$color.palette.green-1000	#0a2b24
$color.palette.yellow-100	#fff7de
$color.palette.yellow-200	#fdefb9
$color.palette.yellow-300	#fbdc65
$color.palette.yellow-400	#e9c647
$color.palette.yellow-500	#d4ab28
$color.palette.yellow-600	#c49725
$color.palette.yellow-700	#9b7821
$color.palette.yellow-800	#755b22
$color.palette.yellow-900	#4f3e1f
$color.palette.yellow-1000	#2c2512
$color.palette.purple-100	#f5f3fe
$color.palette.purple-200	#efeafe
$color.palette.purple-300	#e1d8ff
$color.palette.purple-400	#d0c0ff
$color.palette.purple-500	#b8a1ff
$color.palette.purple-600	#9f84fb
$color.palette.purple-700	#8969ea
$color.palette.purple-800	#6d50cb
$color.palette.purple-900	#50379b
$color.palette.purple-1000	#29175d
$color.palette.static-black	#000000
$color.palette.static-black-alpha-100	#00000007
$color.palette.static-black-alpha-200	#0000000c
$color.palette.static-black-alpha-300	#00000010
$color.palette.static-black-alpha-400	#00000021
$color.palette.static-black-alpha-500	#0000002c
$color.palette.static-black-alpha-600	#0000004c
$color.palette.static-black-alpha-700	#00000074
$color.palette.static-black-alpha-800	#000000a2
$color.palette.static-black-alpha-900	#000000d0
$color.palette.static-black-alpha-1000	#000000e3
$color.palette.static-white	#ffffff
$color.palette.static-white-alpha-50	#ffffff0d
$color.palette.static-white-alpha-100	#ffffff17
$color.palette.static-white-alpha-200	#ffffff20
$color.palette.static-white-alpha-300	#ffffff2e
$color.palette.static-white-alpha-400	#ffffff3d
$color.palette.static-white-alpha-500	#ffffff60
$color.palette.static-white-alpha-600	#ffffff8b
$color.palette.static-white-alpha-700	#ffffffb3
$color.palette.static-white-alpha-800	#ffffffde
$color.palette.static-white-alpha-900	#ffffffea
$color.palette.static-white-alpha-1000	#fffffff4

이름	값
$color.banner.blue	#e1f7ff
$color.banner.cool-gray	#ebf1f5
$color.banner.green	#f0fbe5
$color.banner.orange	#fff2e1
$color.banner.pink	#ffebf1
$color.banner.purple	#f5ecff
$color.banner.red	#ffecee
$color.banner.teal	#e6faf6
$color.banner.warm-gray	#f2f0ee
$color.banner.yellow	#fffae1

Color Palette

Gray

Chromatic

Tokens

Palette Colors

Banner Colors

On this page