왼쪽 동그라미가 고른 색이고, 아래 12칸이 그 색으로 만든 결과다. 테두리를 두른 9번이 고른 색이 앉는 자리다.
대부분은 고른 색이 9번에 그대로 들어간다. 다만 너무 밝은 색은 어둡게 낮춘다 — 9번은 버튼처럼 색으로 꽉 찬 면의 배경이라, 밝으면 그 위에 흰 글자도 검은 글자도 읽히지 않기 때문이다.
낮춘 경우에는 카드에 밝아서 …로 낮춤 이라고 적어뒀다. 밝기가 76 언저리를 넘으면 그렇게 된다.
#fee698밝아서 #f2cd48 로 낮춤92.96°보조 색 같은 색조에서 채도를 절반으로. 덜 중요한 버튼과 구분용 면. 글자 대비 3.45:1 · 다크 14.57:1
npm run color:generate -- --preset 103회색 브랜드의 색깔을 물려받되 선명함을 거의 0으로 둔다
반투명 포커스 링과 구분선에 쓴다
글자색 9번 배경 위에 얹는 색
#c9ba86밝아서 #baa351 로 낮춤93.92°보조 색 같은 색조에서 채도를 절반으로. 덜 중요한 버튼과 구분용 면. 글자 대비 8.75:1 · 다크 9.46:1
npm run color:generate -- --preset 104회색 브랜드의 색깔을 물려받되 선명함을 거의 0으로 둔다
반투명 포커스 링과 구분선에 쓴다
글자색 9번 배경 위에 얹는 색
#f7e298밝아서 #d4b433 로 낮춤94.14°보조 색 같은 색조에서 채도를 절반으로. 덜 중요한 버튼과 구분용 면. 글자 대비 3.46:1 · 다크 14.02:1
npm run color:generate -- --preset 105회색 브랜드의 색깔을 물려받되 선명함을 거의 0으로 둔다
반투명 포커스 링과 구분선에 쓴다
글자색 9번 배경 위에 얹는 색
#ddc35d밝아서 #ffe002 로 낮춤95.18°보조 색 같은 색조에서 채도를 절반으로. 덜 중요한 버튼과 구분용 면. 글자 대비 7.78:1 · 다크 10.47:1
npm run color:generate -- --preset 106회색 브랜드의 색깔을 물려받되 선명함을 거의 0으로 둔다
반투명 포커스 링과 구분선에 쓴다
글자색 9번 배경 위에 얹는 색
#ffd708밝아서 #ffe100 로 낮춤95.24°보조 색 같은 색조에서 채도를 절반으로. 덜 중요한 버튼과 구분용 면. 글자 대비 12.67:1 · 다크 12.97:1
npm run color:generate -- --preset 107회색 브랜드의 색깔을 물려받되 선명함을 거의 0으로 둔다
반투명 포커스 링과 구분선에 쓴다
글자색 9번 배경 위에 얹는 색
#fcf2c7밝아서 #e3d392 로 낮춤96.42°보조 색 같은 색조에서 채도를 절반으로. 덜 중요한 버튼과 구분용 면. 글자 대비 3.43:1 · 다크 15.88:1
npm run color:generate -- --preset 108회색 브랜드의 색깔을 물려받되 선명함을 거의 0으로 둔다
반투명 포커스 링과 구분선에 쓴다
글자색 9번 배경 위에 얹는 색
#fbdb14밝아서 #ffe600 로 낮춤98.27°보조 색 같은 색조에서 채도를 절반으로. 덜 중요한 버튼과 구분용 면. 글자 대비 12.86:1 · 다크 13.11:1
npm run color:generate -- --preset 109회색 브랜드의 색깔을 물려받되 선명함을 거의 0으로 둔다
반투명 포커스 링과 구분선에 쓴다
글자색 9번 배경 위에 얹는 색
#f0ec73밝아서 #f4eb00 로 낮춤107.18°보조 색 같은 색조에서 채도를 절반으로. 덜 중요한 버튼과 구분용 면. 글자 대비 11.2:1 · 다크 14.38:1
npm run color:generate -- --preset 110회색 브랜드의 색깔을 물려받되 선명함을 거의 0으로 둔다
반투명 포커스 링과 구분선에 쓴다
글자색 9번 배경 위에 얹는 색
#c7c79e밝아서 #8f8e52 로 낮춤107.56°보조 색 같은 색조에서 채도를 절반으로. 덜 중요한 버튼과 구분용 면. 글자 대비 3.36:1 · 다크 10.46:1
npm run color:generate -- --preset 111회색 브랜드의 색깔을 물려받되 선명함을 거의 0으로 둔다
반투명 포커스 링과 구분선에 쓴다
글자색 9번 배경 위에 얹는 색
#dae3bb밝아서 #a3ae74 로 낮춤117.79°보조 색 같은 색조에서 채도를 절반으로. 덜 중요한 버튼과 구분용 면. 글자 대비 3.33:1 · 다크 13.4:1
npm run color:generate -- --preset 112회색 브랜드의 색깔을 물려받되 선명함을 거의 0으로 둔다
반투명 포커스 링과 구분선에 쓴다
글자색 9번 배경 위에 얹는 색