Color Palette

본 문서는 디자인 시스템에서 사용하는 코어 색상에 대한 가이드입니다.
해당 컬러를 활용하여 Semantic Colors의 token을 정의합니다.

등급 사용 최소 대비율
AA
  • 일반 텍스트 (16px 이하, 보통 굵기)
  • 일반 크기/굵기의 기능성 아이콘
 ≥ 4.5:1
AA (Large)
  • 큰 텍스트 (18pt 이상, 또는 굵은 14pt 이상)
  • 크고 굵은 기능성 아이콘
 ≥ 3.0:1
AAA
일반 텍스트
  • 16px 이하이며 굵기가 보통(normal)인 텍스트를 의미
  • 18pt 이상 또는 굵은 14pt 이상일 경우에는 "큰 텍스트(Large Text)"로 분류되어 더 낮은 대비율 허용
 ≥ 7.0:1
등급 없음
  • 장식용 텍스트
  • 장식용 아이콘 (aria-hidden="true 권장)
 < 3.0:1

red

25
#fffbfa
50
#fef3f2
100
#fee4e2
200
#fecdca
300
#fda29b
400
#f97066
500
#f04438
600
#d92d20
700
#b42318
800
#912018
900
#7a271a
950
#55160c

orange

25
#fffaf5
50
#fff6ed
100
#ffead5
200
#fddcab
300
#feb273
400
#fd853a
500
#fb6514
600
#ec4a0a
700
#c4320a
800
#9c2a10
900
#7e2410
950
#511c10

amber

25
#fffcf5
50
#fffaeb
100
#fef0c7
200
#fedf89
300
#fec84b
400
#fdb022
500
#f79009
600
#dc6803
700
#b54708
800
#93370d
900
#7a2e0e
950
#4e1d09

yellow

25
#fffcf0
50
#fff9da
100
#fdf4ad
200
#fae96f
300
#f2cd3a
400
#e6b418
500
#d29a0c
600
#b9890a
700
#8a5f0a
800
#7a5b0a
900
#5a4708
950
#3c3205

lime

25
#fbfff6
50
#f8fee9
100
#eefccf
200
#dcf8a4
300
#a3e635
400
#84cc16
500
#6aaa12
600
#528d00
700
#417c00
800
#3b6d0b
900
#2e550a
950
#1a3305

green

25
#f6fef9
50
#ecfdf3
100
#d1fadf
200
#a6f4c5
300
#6ce9a6
400
#32d583
500
#12b76a
600
#039855
700
#027a48
800
#05603a
900
#054f31
950
#053321

emerald

25
#f5fef9
50
#ecfdf5
100
#d1fae5
200
#a7f3d0
300
#6ee7b7
400
#34d399
500
#10b981
600
#059669
700
#057749
800
#065c3b
900
#064933
950
#022c1b

teal

25
#f6fefc
50
#e9fbf8
100
#d7f9f7
200
#b7f0e8
300
#6ddfcc
400
#1fd1b3
500
#00b8a2
600
#099a89
700
#077871
800
#075f59
900
#044544
950
#042f2e

cyan

25
#f9feff
50
#f3fdfe
100
#e1fcfe
200
#c2f2f5
300
#6fe4ec
400
#0fcde6
500
#18b4c9
600
#0c95a7
700
#0b7684
800
#135c6d
900
#0f4a5b
950
#08313c

sky

25
#f5fbff
50
#f0f9ff
100
#e0f2fe
200
#b9e6fe
300
#7cd4fd
400
#36bffa
500
#0ba5ec
600
#0086c9
700
#026aa2
800
#065986
900
#0b4a6f
950
#062c41

blue

25
#f5faff
50
#eff8ff
100
#d1e9ff
200
#b2ddff
300
#84caff
400
#53b1fd
500
#2e90fa
600
#1570ef
700
#175cd3
800
#1849a9
900
#194185
950
#102a56

indigo

25
#f5f8ff
50
#eef4ff
100
#e0eaff
200
#c7d7fe
300
#a4bcfd
400
#8098f9
500
#6172f3
600
#444ce7
700
#3538cd
800
#2d31a6
900
#2d3282
950
#1f235b

violet

25
#fafaff
50
#f4f3ff
100
#ebe9fe
200
#d9d6fe
300
#bdb4fe
400
#9b8afb
500
#7a5af8
600
#6938ef
700
#5925dc
800
#4a1fb8
900
#3e1c96
950
#27115f

purple

25
#fafaff
50
#f9f2ff
100
#f2e5fe
200
#e5d0fd
300
#d3aafc
400
#bb7cf8
500
#9e4ff1
600
#842cdb
700
#6f1db4
800
#5e1b93
900
#4b1674
950
#32074f

fuchsia

25
#fefaff
50
#fdf4ff
100
#fae8ff
200
#f5d0fe
300
#f0abfc
400
#e879f9
500
#d946ef
600
#be1fb0
700
#9d1592
800
#82107a
900
#6a0c64
950
#460244

pink

25
#fef6fb
50
#fdf2fa
100
#fce7f6
200
#fcceee
300
#faa7e0
400
#f670c7
500
#ee46bc
600
#dd2590
700
#c11574
800
#9e165f
900
#851651
950
#4e0d30

rose

25
#fff5f6
50
#fff1f3
100
#ffe4e8
200
#fecdd6
300
#fea3b4
400
#fd6f8e
500
#f63d68
600
#e31b54
700
#c01048
800
#a11043
900
#89123e
950
#510b24

slate

25
#fdfefe
50
#fafcfd
100
#f5f9fb
200
#e9eff3
300
#d3dbe3
400
#a6b0bf
500
#6a788a
600
#555f71
700
#414a5a
800
#262f3e
900
#1a222f
950
#0a101a

gray

25
#fdfdfd
50
#fafafa
100
#f5f5f5
200
#e9eaeb
300
#d5d7da
400
#a4a7ae
500
#717680
600
#535862
700
#414651
800
#252b37
900
#181d27
950
#0a0d12

zinc

25
#fbfbfc
50
#f3f3f5
100
#e5e5e9
200
#d2d2d8
300
#b8b8c0
400
#9b9ba5
500
#747481
600
#60606b
700
#494954
800
#36363e
900
#232328
950
#151518

void

25
#fbfbfb
50
#f4f4f4
100
#e7e7e7
200
#d2d2d2
300
#b8b8b8
400
#9e9e9e
500
#757575
600
#666666
700
#4d4d4d
800
#373737
900
#2f2f2f
950
#242424

stone

25
#fbfaf9
50
#f4f3f2
100
#e6e4e3
200
#d3d0ce
300
#bab6b3
400
#9e9994
500
#787573
600
#66615c
700
#4f4a46
800
#3a3733
900
#262321
950
#1a1816

white

origin
#ffffff

black

origin
#000000