Tqoon web style

Color

Default 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

Button Default

Name button-default
Hex #888d94
RGB 136 141 148
CMYK 54 42 36 00
Brand Color

브랜드를 나타내는 고유색으로 브랜드 전체의 통일감을 부여하며, 사용자에게 끊임없이 같은 메시지를 전달하기에 효과적이다.

Brand Color

Name brand-color
Hex #7700ee
RGB 119 0 238
CMYK 77 81 00 00
Text Color

전달되는 정보의 중요도를 나타내기 위해 색 대비를 가져야 한다. 색 대비의 정도는 배경색의 밝기에 따라 다른 색상 값을 가지며, 배경 색 대비 색상 범위에 해당하는 조합을 사용하길 권한다.

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
Primary Color

화면과 구성요소에 가장 자주 표시되는 기본 색상은 청록색, 회색 및 흰색입니다. 이 색상들은 모든 화면과 컴포넌트에 걸쳐 가장 넓게 사용되어야 합니다.

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

빨강은 위험, 녹색은 안전, 노랑은 주의를 의미하는 전 세계적으로 일관 된 공통 색채입니다.

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 주의, 경고