Color
Color Palette
디자인 시스템의 컬러 팔레트를 확인할 수 있습니다.
컬러 팔레트는 디자인 시스템의 기본 색상 세트입니다. 각 색상은 일관된 사용자 경험을 제공하기 위해 특정 용도로 설계되었습니다.
아래 팔레트는 현재 빌드된 토큰(designTokens.colors)을 기준으로 자동 구성됩니다. (팔레트 스케일/시맨틱 그룹 모두 포함)
Palette
neutral
5
5
#f7f7f8
10
10
#f4f4f5
20
20
#eaebec
30
30
#dbdcdf
40
40
#c2c4c8
50
50
#989ba2
60
60
#70737c
70
70
#46474c
80
80
#2e2f33
90
90
#1b1c1e
coolgray
5
5
#f7f8fa
10
10
#f2f4f8
20
20
#e5eaf0
30
30
#d7dde6
40
40
#bec4cf
50
50
#959ba6
60
60
#6d747f
70
70
#414852
80
80
#292f3b
90
90
#161c27
navy
5
5
#f1f5fe
10
10
#d8e8ff
20
20
#afcdff
30
30
#7ca5ff
40
40
#4a78ea
50
50
#244ecc
60
60
#1e41a8
70
70
#173485
80
80
#0f2669
90
90
#08173f
blue
5
5
#ebf5ff
10
10
#d6e8ff
20
20
#afcdff
30
30
#84aeff
40
40
#5b8bff
50
50
#2c61fe
60
60
#214cd1
70
70
#1336ac
80
80
#072187
90
90
#020964
green
5
5
#ebf9ef
10
10
#d0f2da
20
20
#9ee0b4
30
30
#69c88e
40
40
#1fad66
50
50
#009a58
60
60
#007435
70
70
#005a26
80
80
#004118
90
90
#002a0a
yellow
5
5
#fefadb
10
10
#fff4b4
20
20
#ffeb7b
30
30
#ffe241
40
40
#ffd300
50
50
#ffc107
60
60
#e49a15
70
70
#b87700
80
80
#754c00
90
90
#492c00
red
5
5
#ffece9
10
10
#ffdad5
20
20
#ffb3ab
30
30
#ff847c
40
40
#f84b4b
50
50
#e82011
60
60
#b8000e
70
70
#910006
80
80
#6b0001
90
90
#480000
purple
5
5
#fdf0ff
10
10
#f7defd
20
20
#ebb9f7
30
30
#dd8df0
40
40
#ca59e4
50
50
#ae29c9
60
60
#8f17a6
70
70
#700983
80
80
#520062
90
90
#360041
aqua
5
5
#dffcff
10
10
#c1f7fd
20
20
#98eff9
30
30
#79e4f0
40
40
#4ddae9
50
50
#00cee2
60
60
#00acbc
70
70
#00808d
80
80
#005b6f
90
90
#00373e
blueviolet
5
5
#f4f2ff
10
10
#e7e2ff
20
20
#ccc3ff
30
30
#b19eff
40
40
#937af7
50
50
#7a47f3
60
60
#6337c8
70
70
#4d22a4
80
80
#380b80
90
90
#25005f
brown
5
5
#fdf3ef
10
10
#fae2d8
20
20
#f0c2ae
30
30
#e09675
40
40
#d16631
50
50
#cb4b00
60
60
#a53700
70
70
#762900
80
80
#541600
90
90
#360800
coral
5
5
#ffefe6
10
10
#ffe0d0
20
20
#ffc9b1
30
30
#ffa683
40
40
#ff9165
50
50
#ff7237
60
60
#eb520e
70
70
#b22b00
80
80
#871500
90
90
#5b0700
darkred
5
5
#fdf2f1
10
10
#fce1de
20
20
#f3bfba
30
30
#e3928b
40
40
#d25450
50
50
#ba2b2e
60
60
#90101a
70
70
#760711
80
80
#5c0109
90
90
#370406
fuchsia
5
5
#ffeffd
10
10
#fcdcf8
20
20
#f4b6ed
30
30
#ec92e5
40
40
#ed66e5
50
50
#dc3dd5
60
60
#af25a9
70
70
#891984
80
80
#660962
90
90
#3b0039
gold
5
5
#fff3e4
10
10
#fee3c5
20
20
#fece96
30
30
#fab45f
40
40
#fea408
50
50
#f19200
60
60
#c77700
70
70
#985800
80
80
#6b3a00
90
90
#411f00
hotpink
5
5
#ffeff7
10
10
#ffdbed
20
20
#ffb3d7
30
30
#fe8dc5
40
40
#ff5cb8
50
50
#f034a3
60
60
#c20d80
70
70
#980563
80
80
#720048
90
90
#430027
lime
5
5
#eefae5
10
10
#def4ca
20
20
#caebab
30
30
#b5e285
40
40
#8bcf23
50
50
#70b600
60
60
#579000
70
70
#3f6d00
80
80
#264800
90
90
#132c00
limegreen
5
5
#ebfbe7
10
10
#d7f6d0
20
20
#bfedb5
30
30
#98e188
40
40
#5bcf3e
50
50
#11b900
60
60
#009600
70
70
#007300
80
80
#004d00
90
90
#002f00
olive
5
5
#f6f7e4
10
10
#e9ebc5
20
20
#dadd9f
30
30
#c1c476
40
40
#a9ab4a
50
50
#909000
60
60
#757400
70
70
#5a5a00
80
80
#414000
90
90
#272600
orange
5
5
#fff0e4
10
10
#ffe1c9
20
20
#ffcfad
30
30
#ffb481
40
40
#ff9d56
50
50
#ff7f00
60
60
#e85f00
70
70
#ae4300
80
80
#7b2a00
90
90
#541700
pink
5
5
#ffeff6
10
10
#ffdbe9
20
20
#ffb2cd
30
30
#ff81ab
40
40
#fc4a90
50
50
#e91e63
60
60
#b20056
70
70
#8b0044
80
80
#660032
90
90
#440022
royalblue
5
5
#e7f8ff
10
10
#ccedff
20
20
#93d6ff
30
30
#57c1ff
40
40
#00aeff
50
50
#0097f6
60
60
#0074c5
70
70
#00599c
80
80
#004076
90
90
#002146
saddlebrown
5
5
#fcf3ed
10
10
#f8e4d4
20
20
#ecc5a7
30
30
#d99c68
40
40
#c96f00
50
50
#bb5e00
60
60
#964800
70
70
#6f3200
80
80
#542300
90
90
#310f00
salmon
5
5
#ffefeb
10
10
#ffdcd4
20
20
#febbaf
30
30
#fb9989
40
40
#ff6c58
50
50
#f44a37
60
60
#c92516
70
70
#a30000
80
80
#7b0000
90
90
#490402
skyblue
5
5
#e2faff
10
10
#c3f4ff
20
20
#a1eaff
30
30
#71dcff
40
40
#25ceff
50
50
#00b8fc
60
60
#0097d3
70
70
#006e9b
80
80
#005074
90
90
#00344f
teal
5
5
#e3fbf9
10
10
#c3f3ef
20
20
#8edfd9
30
30
#60ccc5
40
40
#1dbcb5
50
50
#00a19a
60
60
#00837d
70
70
#006661
80
80
#004a47
90
90
#002d2b
Semantic
action
black
black
#1b1c1e
black-active
black-active
#46474c
black-disable
black-disable
#00000029
black-hover
black-hover
#2e2f33
cautionary
cautionary
#ffc107
cautionary-active
cautionary-active
#b87700
cautionary-disable
cautionary-disable
#ffc10729
cautionary-hover
cautionary-hover
#e49a15
destructive
destructive
#e82011
destructive-active
destructive-active
#910006
destructive-disable
destructive-disable
#e8201129
destructive-hover
destructive-hover
#b8000e
positive
positive
#11b900
positive-active
positive-active
#007300
positive-disable
positive-disable
#11b90029
positive-hover
positive-hover
#009600
primary
primary
#244ecc
primary-active
primary-active
#173485
primary-disable
primary-disable
#0066fd29
primary-hover
primary-hover
#1e41a8
white
white
#ffffff
white-active
white-active
#eaebec
white-disable
white-disable
#00000029
white-hover
white-hover
#f4f4f5
background
neutral
neutral
#f7f8fa
normal
normal
#ffffff
base
0%
0%
#6d747f00
5%
5%
#6d747f0d
8%
8%
#6d747f14
12%
12%
#6d747f1f
16%
16%
#6d747f29
22%
22%
#6d747f38
28%
28%
#6d747f47
35%
35%
#6d747f59
43%
43%
#6d747f6e
52%
52%
#6d747f85
61%
61%
#6d747f9c
74%
74%
#6d747fbd
88%
88%
#6d747fe0
97%
97%
#6d747ff7
100%
100%
#6d747f
alpha
alpha
#feecec
background
background
#f2f4f8
beta
beta
#fef4e6
black
black
#161c27
button
button
#1b1c1e14
disabled
disabled
#1b1c1e29
enabled
enabled
#e5eaf0
primary
primary
#1e41a8
radio
radio
#1b1c1e14
select
select
#1b1c1e14
stable
stable
#d9ffe6
strong
strong
#e5eaf0
switch
switch
#1b1c1e14
white
white
#ffffff
black
strong
strong
#000000
border
normal
normal
#e5eaf0
strong
strong
#d7dde6
subtle
subtle
#e5eaf0
chip
black
black
#1b1c1e
blue
blue
#2c61fe
brown
brown
#cb4b00
coral
coral
#ff7237
fuchsia
fuchsia
#dc3dd5
green
green
#11b900
navy
navy
#244ecc
purple
purple
#ae29c9
red
red
#e82011
yellow
yellow
#ffc107
date
picker
picker
#1b1c1e14
time-field
time-field
#1b1c1e14
design
only
only
#f0ecfe
even
number
number
#f7f8fa
icon
alternative
alternative
#4148529c
disabled
disabled
#41485229
inverse
inverse
#ffffff
neutral
neutral
#414852e0
normal
normal
#161c27
odd
number
number
#ffffff
role
primary-10
primary-10
#d8e8ff
primary-20
primary-20
#afcdff
primary-30
primary-30
#7ca5ff
primary-40
primary-40
#4a78ea
primary-5
primary-5
#f1f5fe
primary-50
primary-50
#244ecc
primary-60
primary-60
#1e41a8
primary-70
primary-70
#173485
primary-80
primary-80
#0f2669
primary-90
primary-90
#08173f
stroke
normal
normal
#e5eaf0
text
alternative
alternative
#6d747f9c
area
area
#1b1c1e14
assistive
assistive
#41485247
disabled
disabled
#41485229
inverse
inverse
#ffffff
neutral
neutral
#414852e0
normal
normal
#161c27
readonly
readonly
#4148526e
strong
strong
#000000
time
field
field
#1b1c1e14
Tokens
Palette Colors
디자인 토큰에서 사용할 수 있는 모든 팔레트 색상입니다.
| 이름 | 값 | 설명 |
|---|---|---|
neutral-5 | #f7f7f8 | 가장 밝은 회색 |
neutral-10 | #f4f4f5 | 밝은 회색 |
neutral-20 | #eaebec | 연한 회색 |
neutral-30 | #dbdcdf | 중간 밝기 회색 |
neutral-40 | #c2c4c8 | 중간 회색 |
neutral-50 | #989ba2 | 중간 어두운 회색 |
neutral-60 | #70737c | 어두운 회색 |
neutral-70 | #46474c | 매우 어두운 회색 |
neutral-80 | #2e2f33 | 거의 검은색 |
neutral-90 | #2e2f33 | 가장 어두운 회색 |
blue-5 | #f0f3ff | 가장 밝은 파란색 |
blue-50 | #1c4efc | 기본 파란색 |
blue-90 | #061032 | 가장 어두운 파란색 |
green-5 | #eef7ee | 가장 밝은 초록색 |
green-50 | #008000 | 기본 초록색 |
green-90 | #001a00 | 가장 어두운 초록색 |
yellow-5 | #fffbe5 | 가장 밝은 노란색 |
yellow-50 | #ffd400 | 기본 노란색 |
yellow-90 | #332a00 | 가장 어두운 노란색 |
red-5 | #fef1f1 | 가장 밝은 빨간색 |
red-50 | #ee0000 | 기본 빨간색 |
red-90 | #300000 | 가장 어두운 빨간색 |
purple-5 | #f5eef7 | 가장 밝은 보라색 |
purple-50 | #6b0080 | 기본 보라색 |
purple-90 | #15001a | 가장 어두운 보라색 |
primary-5 | #e6f0ff | 가장 밝은 Primary 색상 |
primary-50 | #065dff | 기본 Primary 색상 |
primary-90 | #03276b | 가장 어두운 Primary 색상 |
secondary-5 | #f1e8fe | 가장 밝은 Secondary 색상 |
secondary-50 | #7614f5 | 기본 Secondary 색상 |
secondary-90 | #320867 | 가장 어두운 Secondary 색상 |
Base Colors
| 이름 | 값 | 설명 |
|---|---|---|
base-white | #ffffff | 흰색 |
base-black | #1b1c1e | 검은색 |
base-positive | #32cd32 | 긍정 상태 색상 |
base-cautionary | #ffd400 | 주의 상태 색상 |
base-destructive | #ee0000 | 위험 상태 색상 |
Status Colors
| 이름 | 값 | 설명 |
|---|---|---|
status-positive | #32cd32 | 긍정 상태 |
status-cautionary | #ffd400 | 주의 상태 |
status-destructive | #ee0000 | 위험 상태 |
Action Colors
| 이름 | 값 | 설명 |
|---|---|---|
action-primary | #065dff | 기본 Primary 액션 |
action-primary-disabled | #065dff29 | 비활성 Primary 액션 |
action-primary-hover | #0555e8 | 호버 Primary 액션 |
action-primary-active | #0442b5 | 활성 Primary 액션 |
action-positive | #32cd32 | 기본 Positive 액션 |
action-positive-disabled | #32cd3229 | 비활성 Positive 액션 |
action-positive-hover | #1fad1f | 호버 Positive 액션 |
action-positive-active | #1e7b1e | 활성 Positive 액션 |
action-cautionary | #ffd400 | 기본 Cautionary 액션 |
action-cautionary-disabled | #ffd40029 | 비활성 Cautionary 액션 |
action-cautionary-hover | #d6ab00 | 호버 Cautionary 액션 |
action-cautionary-active | #a38500 | 활성 Cautionary 액션 |
action-destructive | #ee0000 | 기본 Destructive 액션 |
action-destructive-disabled | #ee000029 | 비활성 Destructive 액션 |
action-destructive-hover | #cd0404 | 호버 Destructive 액션 |
action-destructive-active | #8f0000 | 활성 Destructive 액션 |