왼쪽 동그라미가 고른 색이고, 아래 12칸이 그 색으로 만든 결과다. 테두리를 두른 9번이 고른 색이 앉는 자리다.
대부분은 고른 색이 9번에 그대로 들어간다. 다만 너무 밝은 색은 어둡게 낮춘다 — 9번은 버튼처럼 색으로 꽉 찬 면의 배경이라, 밝으면 그 위에 흰 글자도 검은 글자도 읽히지 않기 때문이다.
낮춘 경우에는 카드에 밝아서 …로 낮춤 이라고 적어뒀다. 밝기가 76 언저리를 넘으면 그렇게 된다.
#caaaf3밝아서 #8855bd 로 낮춤304.14°보조 색 같은 색조에서 채도를 절반으로. 덜 중요한 버튼과 구분용 면. 글자 대비 8.64:1 · 다크 9.45:1
npm run color:generate -- --preset 164회색 브랜드의 색깔을 물려받되 선명함을 거의 0으로 둔다
반투명 포커스 링과 구분선에 쓴다
글자색 9번 배경 위에 얹는 색
#caa6db밝아서 #8f5aa6 로 낮춤314.81°보조 색 같은 색조에서 채도를 절반으로. 덜 중요한 버튼과 구분용 면. 글자 대비 8.11:1 · 다크 8.94:1
npm run color:generate -- --preset 165회색 브랜드의 색깔을 물려받되 선명함을 거의 0으로 둔다
반투명 포커스 링과 구분선에 쓴다
글자색 9번 배경 위에 얹는 색
#2f1a35318.48°보조 색 같은 색조에서 채도를 절반으로. 덜 중요한 버튼과 구분용 면. 글자 대비 18.27:1 · 다크 5.17:1
npm run color:generate -- --preset 166회색 브랜드의 색깔을 물려받되 선명함을 거의 0으로 둔다
반투명 포커스 링과 구분선에 쓴다
글자색 9번 배경 위에 얹는 색
#35063e320.48°보조 색 같은 색조에서 채도를 절반으로. 덜 중요한 버튼과 구분용 면. 글자 대비 18.85:1 · 다크 4.68:1
npm run color:generate -- --preset 167회색 브랜드의 색깔을 물려받되 선명함을 거의 0으로 둔다
반투명 포커스 링과 구분선에 쓴다
글자색 9번 배경 위에 얹는 색
#3d1144321.9°보조 색 같은 색조에서 채도를 절반으로. 덜 중요한 버튼과 구분용 면. 글자 대비 17.81:1 · 다크 4.84:1
npm run color:generate -- --preset 168회색 브랜드의 색깔을 물려받되 선명함을 거의 0으로 둔다
반투명 포커스 링과 구분선에 쓴다
글자색 9번 배경 위에 얹는 색
#8e6c90324.58°보조 색 같은 색조에서 채도를 절반으로. 덜 중요한 버튼과 구분용 면. 글자 대비 5.66:1 · 다크 3.73:1
npm run color:generate -- --preset 169회색 브랜드의 색깔을 물려받되 선명함을 거의 0으로 둔다
반투명 포커스 링과 구분선에 쓴다
글자색 9번 배경 위에 얹는 색
#462b45328.05°보조 색 같은 색조에서 채도를 절반으로. 덜 중요한 버튼과 구분용 면. 글자 대비 15.17:1 · 다크 4.93:1
npm run color:generate -- --preset 170회색 브랜드의 색깔을 물려받되 선명함을 거의 0으로 둔다
반투명 포커스 링과 구분선에 쓴다
글자색 9번 배경 위에 얹는 색
#d4a6d1밝아서 #a463a1 로 낮춤328.44°보조 색 같은 색조에서 채도를 절반으로. 덜 중요한 버튼과 구분용 면. 글자 대비 8.3:1 · 다크 9.14:1
npm run color:generate -- --preset 171회색 브랜드의 색깔을 물려받되 선명함을 거의 0으로 둔다
반투명 포커스 링과 구분선에 쓴다
글자색 9번 배경 위에 얹는 색