Color
디자인시스템에서 사용되는 컬러는 정보 전달과 브랜드 정체성 구축하는 요소입니다. 지속적인 동일 색상의 사용은 브랜드 아이덴티티에 중요한 역할을 하므로 반드시 색상 활용 기준을 준수해야 합니다.
사용 가이드
• Color는 명확한 커뮤니케이션을 위해 Hex 또는 RGB Code보다는 컬러명을 사용합니다.
• 색상 사용을 제한함으로서 사용자 경험에 통일성과 일관성을 고려하고자합니다. 정의되지 않은 새로운 컬러는 재사용성이 높을 경우에만 담당자와 논의하여 컬러파레트에 추가하여 관리합니다.
Primary Color
Primary Color는 버튼, 활성 상태와 같은 UI 전체의 주요 구성 요소에 사용됩니다.
10
#FFE7D8
20
#FFC7A4
30
#FFB180
40
#FF8F48
50
#FF6300
60
#E05700
70
#C74D00
80
#903D07
90
#652C06
Disable
Main
Hover
Name
View
Hex
RGB
Use
--color-primary10
#FFE7D8
rgb(255, 231, 216)
--color-primary20
#FFC7A4
rgb(255, 199, 164)
disable
--color-primary30
#FFB180
rgb(255, 177, 128)
--color-primary40
#FF8F48
rgb(255, 143, 72)
--color-primary50
#FF6300
rgb(255, 99, 0)
main
--color-primary60
#E05700
rgb(224, 87, 0)
hover
--color-primary70
#C74D00
rgb(199, 77, 0)
--color-primary80
#903D07
rgb(144, 61, 7)
--color-primary90
#652C06
rgb(101, 44, 6)
Sementic Color
Semantic Color는 UI요소들의 기능 또는 정보 유형에 따라 의미를 강조하여 전달하는 등의 목적으로 보조적으로 사용하는 컬러입니다.
사용되는 목적과 UI에 적용되는 상황에 따라 일관된 색상 사용은 인지 부하를 낮게 유지하고 통합된 사용자 경험을 제공합니다.
UI에 적용되는 상황에 맞는 의미를 담은 명칭으로 관리하며, 여러 상황에 대해서는 컬러 팔레트와 함께 사용합니다.
green50
#00C344
blue50
#006FFF
red50
#FE0000
orange50
#FF7A0C
purple50
#8E2AFF
Complete
Success
Danger
Warning
Pending
Green : Complete
Name
View
Hex
RGB
Use
--color-green10
#E5F9EC
rgb(229, 249, 236)
--color-green20
#BBF7D0
rgb(187, 247, 208)
disable
--color-green30
#86EFAC
rgb(134, 239, 172)
--color-green40
#4ADE80
rgb(74, 222, 128)
--color-green50
#00C344
rgb(0, 195, 68)
main
--color-green60
#00A63A
rgb(0, 166, 58)
hover
--color-green70
#047857
rgb(4, 120, 87)
--color-green80
#14532D
rgb(20, 83, 45)
--color-green90
#052E16
rgb(5, 46, 22)
Blue : Success
Name
View
Hex
RGB
Use
--color-blue10
#E5F1FF
rgb(229, 241, 255)
--color-blue20
#BDDBFF
rgb(189, 219, 255)
disable
--color-blue30
#8CBDFF
rgb(140, 189, 255)
--color-blue40
#4193FF
rgb(65, 147, 255)
--color-blue50
#006FFF
rgb(0, 111, 255)
main
--color-blue60
#005DD8
rgb(0, 93, 216)
hover
--color-blue70
#004BAE
rgb(0, 75, 174)
--color-blue80
#00357B
rgb(0, 53, 123)
--color-blue90
#0A2C58
rgb(10, 44, 88)
Rad : Danger
Name
View
Hex
RGB
Use
--color-red10
#FFE5E5
rgb(255, 229, 229)
--color-red20
#FFBFBF
rgb(255, 191, 191)
disable
--color-red30
#FF8585
rgb(255, 133, 133)
--color-red40
#FF5454
rgb(255, 84, 84)
--color-red50
#FE0000
rgb(254, 0, 0)
main
--color-red60
#DA120D
rgb(218, 18, 13)
hover
--color-red70
#BF0A03
rgb(191, 10, 3)
--color-red80
#8B0800
rgb(139, 8, 0)
--color-red90
#6A0700
rgb(106, 7, 0)
Orange : Warning
Name
View
Hex
RGB
Use
--color-purple10
#F8F7FF
rgb(248, 247, 255)
--color-purple20
#E9E4FF
rgb(233, 228, 255)
disable
--color-purple30
#D5C7FF
rgb(213, 199, 255)
--color-purple40
#B190FF
rgb(177, 144, 255)
--color-purple50
#8E2AFF
rgb(142, 42, 255)
main
--color-purple60
#6B16CA
rgb(107, 22, 202)
hover
--color-purple70
#550AA9
rgb(85, 10, 169)
--color-purple80
#400387
rgb(64, 3, 135)
--color-purple90
#2C0066
rgb(44, 0, 102)
Gray Color
무채색 색상으로 Black에서부터 White까지 이루어지며 색상이 적용되는 UI의 특정 부분에 따라 구분하여 사용하는 컬러입니다.
white
#FFFFFF
gray40
#D9D9D9
gray50
#A8A8A8
gray90
#060606
black
#000000
background default
border
Normal
Secondary
font default
Black & White
Name
View
Hex
RGB
Use
--color-black
#000000
rgb(0, 0, 0)
font default
--color-white
#FFFFFF
rgb(255, 255, 255)
background default
Gray
Name
View
Hex
RGB
Use
--color-gray10
#F3F4F6
rgb(243, 244, 246)
--color-gray20
#E5E7EB
rgb(229, 231, 235)
disable
--color-gray30
#D1D5DB
rgb(209, 213, 219)
--color-gray40
#9CA3AF
rgb(156, 163, 175)
--color-gray50
#6B7280
rgb(107, 114, 128)
main
--color-gray60
#4B5563
rgb(75, 85, 99)
hover
--color-gray70
#374151
rgb(55, 65, 81)
--color-gray80
#1F2937
rgb(31, 41, 55)
--color-gray90
#111827
rgb(17, 24, 39)
Blue-Gray
Name
View
Hex
RGB
Use
--color-blue-gray10
#ECEFF1
rgb(236, 239, 241)
--color-blue-gray20
#CFD8DC
rgb(207, 216, 220)
disable
--color-blue-gray30
#B0BEC5
rgb(176, 190, 197)
--color-blue-gray40
#90A4AE
rgb(144, 164, 174)
--color-blue-gray50
#607D8B
rgb(96, 125, 139)
main
--color-blue-gray60
#546E7A
rgb(84, 110, 122)
hover
--color-blue-gray70
#455A64
rgb(69, 90, 100)
--color-blue-gray80
#37474F
rgb(55, 71, 79)
--color-blue-gray90
#263238
rgb(38, 50, 56)
Alpha Assist Color
알파코드의 솔루션인 알파 어시스트의 색상입니다.
Name
View
Hex
RGB
Use
--color-assist10
#DEEFFF
rgb(222, 239, 255)
--color-assist20
#B0D9FF
rgb(176, 217, 255)
disable
--color-assist30
#80C2FF
rgb(128, 194, 255)
--color-assist40
#38A0FF
rgb(56, 160, 255)
--color-assist50
#0085FE
rgb(0, 133, 254)
main
--color-assist60
#0078E5
rgb(0, 120, 229)
hover
--color-assist70
#0067C4
rgb(0, 103, 196)
--color-assist80
#004F97
rgb(0, 79, 151)
--color-assist90
#003464
rgb(0, 52, 100)