색상

Base Color

프로그래머스의 모든 제품에는 $blue-grey 계열의 색상을 주요 색상으로 사용합니다. $blue-grey-920을 대표색으로, $blue-grey-75를 보조색으로 사용합니다.

white

#FFFFFF

$blue-grey-10

#FBFBFD

$blue-grey-25

#F4F4F8

$blue-grey-50

#E9ECF3

$blue-grey-75

#D7E2EB

$blue-grey-100

#CDD7E0

보조색

$blue-grey-200

#B2C0CC

$blue-grey-300

#98A8B9

$blue-grey-400

#7890A0

$blue-grey-500

#5F7F90

$blue-grey-600

#4F6B81

$blue-grey-700

#44576C

$blue-grey-800

#37485D

$blue-grey-880

#2D4053

$blue-grey-900

#263747

대표색

$blue-grey-920

#202B3D

$blue-grey-940

#172334

$blue-grey-990

#142029

$blue-grey-999

#0C151C

black

#000000

기능적 색상

$color-info

#673AB7
안내

$color-warning

#FF9800
주의

$color-success

#4CAF50
긍정 / 성공 / 완료

$color-danger

#F44336
부정 / 실패 / 삭제

$color-primary

#0078ff
하이퍼링크

Root 페이지 배너 색상

$blue-grey-940

#172334

$blue-grey-990

#142029

$blue-grey-999

#0C151C

$indigo-700

#303F9F

$deep-purple-900

#311B92

$deep-purple-990

#051060

UI 색상

$color-background

#FBFBFD / $blue-grey-10
기본 배경

$color-code-background

#E9ECF3 / $blue-grey-50
마크다운 코드 배경

$color-border

#D7E2EB / $blue-grey-75
보더라인

$color-code-background--dark

#263238 / $blue-grey-900
코드에디터 배경

기타 색상

$green-500

#4CAF50

$yellow-500

#FFEB3B

$amber-500

#FFC107

$orange-500

#FF9800

$deep-orange-500

#FF5722

$red-500

#F44336

$pink-500

#E91E63

$purple-500

#9C27B0

$deep-purple-500

#673AB7

$indigo-500

#3F51B5

$blue-500

#0078FF

$blue-grey-500

#5F7F90

색의 변화

사용자의 행동에 의해 색을 변화시킬 경우, 현재 색상에서 2단계 이상 차이가 나도록 합니다. 예를들어 $blue-grey-500을 사용하는 버튼의 hover 색상은 $blue-grey-700을 사용합니다.

2단계 밝음

$blue-grey-300

보통

$blue-grey-500

2단계 어두움

$blue-grey-700

비활성 색상

비활성화된 컬러는 컬러 값은 그대로 두고, 투명도를 32%로 낮춥니다.

Base Color

white

$blue-grey-10

$blue-grey-25

$blue-grey-50

$blue-grey-75

$blue-grey-100

$blue-grey-200

$blue-grey-300

$blue-grey-400

$blue-grey-500

$blue-grey-600

$blue-grey-700

$blue-grey-800

$blue-grey-880

$blue-grey-900

$blue-grey-920

$blue-grey-940

$blue-grey-990

$blue-grey-999

black

기능적 색상

$color-info

$color-warning

$color-success

$color-danger

$color-primary

Root 페이지 배너 색상

$blue-grey-940

$blue-grey-990

$blue-grey-999

$indigo-700

$deep-purple-900

$deep-purple-990

UI 색상

$color-background

$color-code-background

$color-border

$color-code-background--dark

기타 색상

$green-500

$yellow-500

$amber-500

$orange-500

$deep-orange-500

$red-500

$pink-500

$purple-500

$deep-purple-500

$indigo-500

$blue-500

$blue-grey-500

색의 변화

2단계 밝음

보통

2단계 어두움

비활성 색상

보통

비활성

TOP