Color
Gnb, Lnb, Snb, Body, Button등 기본으로 사용되는 컬러
GNB Default
Name | gnb-default |
---|---|
Hex | #f9f9f9 |
RGB | 247 247 247 0.8 |
CMYK | 03 02 02 00 |
LNB Default
SNB Default
Name | lnb-default, snb-default |
---|---|
Hex | #ffffff |
RGB | 255 255 255 |
CMYK | 00 00 00 00 |
SNB Active
Button Active
Name | snb-active, button-active |
---|---|
Hex | #7b8088 |
RGB | 123 128 136 |
CMYK | 59 48 41 00 |
Body Default
Name | body-default |
---|---|
Hex | #eeeff0 |
RGB | 238 239 240 |
CMYK | 08 06 05 0 |
Name | button-default |
---|---|
Hex | #888d94 |
RGB | 136 141 148 |
CMYK | 54 42 36 00 |
브랜드를 나타내는 고유색으로 브랜드 전체의 통일감을 부여하며, 사용자에게 끊임없이 같은 메시지를 전달하기에 효과적이다.
Brand Color
Name | brand-color |
---|---|
Hex | #7700ee |
RGB | 119 0 238 |
CMYK | 77 81 00 00 |
전달되는 정보의 중요도를 나타내기 위해 색 대비를 가져야 한다. 색 대비의 정도는 배경색의 밝기에 따라 다른 색상 값을 가지며, 배경 색 대비 색상 범위에 해당하는 조합을 사용하길 권한다.
Default Text Color
Name | default-text-color |
---|---|
Hex | #727579 |
RGB | 114 117 121 |
CMYK | 63 53 48 01 |
배경색 대비 텍스트 색상 조합
Primary text1
Name | primary-text1 |
---|---|
background | #ffffff |
text color | #333333 |
Primary text2
Name | primary-text2 |
---|---|
background | #ffffff |
text color | #767676 |
Primary text3
Name | primary-text3 |
---|---|
background | #ffffff |
text color | #b0b5b9 |
Primary text4
Name | primary-text4 |
---|---|
background | #fafafa |
text color | #767676 |
Primary text5
Name | primary-text5 |
---|---|
background | #f5f5f5 |
text color | #767676 |
Primary text6
Name | primary-text6 |
---|---|
background | #e5e5e5 |
text color | #767676 |
Primary text7
Name | primary-text7 |
---|---|
background | #c7cbd6 |
text color | #ffffff |
Primary text8
Name | primary-text8 |
---|---|
background | #32323a |
text color | #aeb2b7 |
Primary text9
Name | primary-text9 |
---|---|
background | #28282e |
text color | #aeb2b7 |
Primary text10
Name | primary-text10 |
---|---|
background | #ffffff |
text color | #53bee6 |
Primary text11
Name | primary-text11 |
---|---|
background | #ffffff |
text color | #ff6600 |
Primary text12
Name | primary-text12 |
---|---|
background | #ffffff |
text color | #ec6459 |
Primary text13
Name | primary-text13 |
---|---|
background | #1fb5ad |
text color | #ffffff |
Primary text14
Name | primary-text14 |
---|---|
background | #95b75d |
text color | #ffffff |
Primary text15
Name | primary-text15 |
---|---|
background | #88a755 |
text color | #ffffff |
Primary text16
Name | primary-text16 |
---|---|
background | #e4ba00 |
text color | #ffffff |
Primary text17
Name | primary-text17 |
---|---|
background | #fa8564 |
text color | #ffffff |
Primary text18
Name | primary-text18 |
---|---|
background | #ec6459 |
text color | #ffffff |
화면과 구성요소에 가장 자주 표시되는 기본 색상은 청록색, 회색 및 흰색입니다. 이 색상들은 모든 화면과 컴포넌트에 걸쳐 가장 넓게 사용되어야 합니다.
Black Default
Name | black-default |
---|---|
background | #32323a |
text color | #b2b6b9 |
Black Light
Name | black-light |
---|---|
background | #5b5b64 |
text color | #b2b6b9 |
Black Dark
Name | black-dark |
---|---|
background | #28282e |
text color | #b2b6b9 |
White Default
Name | white-default |
---|---|
background | #f1f2f7 |
text color | #747475 |
White Light
Name | white-light |
---|---|
background | #fff |
text color | #747475 |
White Dark
Name | white-dark |
---|---|
background | #bebfc4 |
text color | #747475 |
Gray Default
Name | gray-default |
---|---|
background | #f5f5f5 |
text color | #747475 |
Gray Light
Name | gray-light |
---|---|
background | #fff |
text color | #747475 |
Gray Dark
Name | gray-dark |
---|---|
background | #bebfc4 |
text color | #e8e8e8 |
빨강은 위험, 녹색은 안전, 노랑은 주의를 의미하는 전 세계적으로 일관 된 공통 색채입니다.
Safety Color RED
Name | safety-color-red |
---|---|
RGB | 158 11 15 |
Meaning | 오류, 금지, 정지, 위험, 불가 |
Safety Color GREEN
Name | safety-color-green |
---|---|
RGB | 0 166 81 |
Meaning | 안전, 진행, 계속, 성공 |
Safety Color YELLOW
Name | safety-color-yellow |
---|---|
RGB | 255 204 102 |
Meaning | 주의, 경고 |