브랜드 색 고르기

보라 270~300° · 3

왼쪽 동그라미가 고른 색이고, 아래 12칸이 그 색으로 만든 결과다. 테두리를 두른 9번이 고른 색이 앉는 자리다.

대부분은 고른 색이 9번에 그대로 들어간다. 다만 너무 밝은 색은 어둡게 낮춘다 — 9번은 버튼처럼 색으로 꽉 찬 면의 배경이라, 밝으면 그 위에 흰 글자도 검은 글자도 읽히지 않기 때문이다.

낮춘 경우에는 카드에 밝아서 …로 낮춤 이라고 적어뒀다. 밝기가 76 언저리를 넘으면 그렇게 된다.

161Nyctophile Blue#080e2c270.39°
123456789101112

보조 색 같은 색조에서 채도를 절반으로. 덜 중요한 버튼과 구분용 면. 글자 대비 20.29:1 · 다크 10.48:1

123456789101112
npm run color:generate -- --preset 161
회색 · 반투명 · 글자색 보기

회색 브랜드의 색깔을 물려받되 선명함을 거의 0으로 둔다

123456789101112

반투명 포커스 링과 구분선에 쓴다

a4a5a6a7
a3a4a5a6a7

글자색 9번 배경 위에 얹는 색

가나다 Abc 123대비 18.93:1 · 다크 4.8:1
162Dark Indigo#171d4b273.25°
123456789101112

보조 색 같은 색조에서 채도를 절반으로. 덜 중요한 버튼과 구분용 면. 글자 대비 18.31:1 · 다크 7.53:1

123456789101112
npm run color:generate -- --preset 162
회색 · 반투명 · 글자색 보기

회색 브랜드의 색깔을 물려받되 선명함을 거의 0으로 둔다

123456789101112

반투명 포커스 링과 구분선에 쓴다

a4a5a6a7
a3a4a5a6a7

글자색 9번 배경 위에 얹는 색

가나다 Abc 123대비 15.98:1 · 다크 5.13:1
163Purple Amethyst#908db9287.61°
123456789101112

보조 색 같은 색조에서 채도를 절반으로. 덜 중요한 버튼과 구분용 면. 글자 대비 3.94:1 · 다크 7.86:1

123456789101112
npm run color:generate -- --preset 163
회색 · 반투명 · 글자색 보기

회색 브랜드의 색깔을 물려받되 선명함을 거의 0으로 둔다

123456789101112

반투명 포커스 링과 구분선에 쓴다

a4a5a6a7
a3a4a5a6a7

글자색 9번 배경 위에 얹는 색

가나다 Abc 123대비 3.14:1 · 다크 3.14:1

빨강 54주황 28노랑 20연두 10초록 11청록 9하늘 18파랑 7남색 3보라 3자주 8분홍 14