왼쪽 동그라미가 고른 색이고, 아래 12칸이 그 색으로 만든 결과다. 테두리를 두른 9번이 고른 색이 앉는 자리다.
대부분은 고른 색이 9번에 그대로 들어간다. 다만 너무 밝은 색은 어둡게 낮춘다 — 9번은 버튼처럼 색으로 꽉 찬 면의 배경이라, 밝으면 그 위에 흰 글자도 검은 글자도 읽히지 않기 때문이다.
낮춘 경우에는 카드에 밝아서 …로 낮춤 이라고 적어뒀다. 밝기가 76 언저리를 넘으면 그렇게 된다.
#f5cde6밝아서 #a77195 로 낮춤340.39°보조 색 같은 색조에서 채도를 절반으로. 덜 중요한 버튼과 구분용 면. 글자 대비 3.42:1 · 다크 13.03:1
npm run color:generate -- --preset 172회색 브랜드의 색깔을 물려받되 선명함을 거의 0으로 둔다
반투명 포커스 링과 구분선에 쓴다
글자색 9번 배경 위에 얹는 색
#89687d340.46°보조 색 같은 색조에서 채도를 절반으로. 덜 중요한 버튼과 구분용 면. 글자 대비 6.16:1 · 다크 4.05:1
npm run color:generate -- --preset 173회색 브랜드의 색깔을 물려받되 선명함을 거의 0으로 둔다
반투명 포커스 링과 구분선에 쓴다
글자색 9번 배경 위에 얹는 색
#aa6890343.39°보조 색 같은 색조에서 채도를 절반으로. 덜 중요한 버튼과 구분용 면. 글자 대비 5.19:1 · 다크 3.44:1
npm run color:generate -- --preset 174회색 브랜드의 색깔을 물려받되 선명함을 거의 0으로 둔다
반투명 포커스 링과 구분선에 쓴다
글자색 9번 배경 위에 얹는 색
#f3b8d9밝아서 #b76697 로 낮춤344.32°보조 색 같은 색조에서 채도를 절반으로. 덜 중요한 버튼과 구분용 면. 글자 대비 3.48:1 · 다크 11.26:1
npm run color:generate -- --preset 175회색 브랜드의 색깔을 물려받되 선명함을 거의 0으로 둔다
반투명 포커스 링과 구분선에 쓴다
글자색 9번 배경 위에 얹는 색
#884a6f344.51°보조 색 같은 색조에서 채도를 절반으로. 덜 중요한 버튼과 구분용 면. 글자 대비 8.16:1 · 다크 5.3:1
npm run color:generate -- --preset 176회색 브랜드의 색깔을 물려받되 선명함을 거의 0으로 둔다
반투명 포커스 링과 구분선에 쓴다
글자색 9번 배경 위에 얹는 색
#631646346.97°보조 색 같은 색조에서 채도를 절반으로. 덜 중요한 버튼과 구분용 면. 글자 대비 14.66:1 · 다크 4.06:1
npm run color:generate -- --preset 177회색 브랜드의 색깔을 물려받되 선명함을 거의 0으로 둔다
반투명 포커스 링과 구분선에 쓴다
글자색 9번 배경 위에 얹는 색
#f340af347.43°보조 색 같은 색조에서 채도를 절반으로. 덜 중요한 버튼과 구분용 면. 글자 대비 4.1:1 · 다크 7.58:1
npm run color:generate -- --preset 178회색 브랜드의 색깔을 물려받되 선명함을 거의 0으로 둔다
반투명 포커스 링과 구분선에 쓴다
글자색 9번 배경 위에 얹는 색
#f03e9e352.45°보조 색 같은 색조에서 채도를 절반으로. 덜 중요한 버튼과 구분용 면. 글자 대비 4.3:1 · 다크 7.26:1
npm run color:generate -- --preset 179회색 브랜드의 색깔을 물려받되 선명함을 거의 0으로 둔다
반투명 포커스 링과 구분선에 쓴다
글자색 9번 배경 위에 얹는 색
#a4647f353.39°보조 색 같은 색조에서 채도를 절반으로. 덜 중요한 버튼과 구분용 면. 글자 대비 5.65:1 · 다크 3.72:1
npm run color:generate -- --preset 180회색 브랜드의 색깔을 물려받되 선명함을 거의 0으로 둔다
반투명 포커스 링과 구분선에 쓴다
글자색 9번 배경 위에 얹는 색
#872657353.5°보조 색 같은 색조에서 채도를 절반으로. 덜 중요한 버튼과 구분용 면. 글자 대비 10.68:1 · 다크 7:1
npm run color:generate -- --preset 181회색 브랜드의 색깔을 물려받되 선명함을 거의 0으로 둔다
반투명 포커스 링과 구분선에 쓴다
글자색 9번 배경 위에 얹는 색
#d55f8f356.89°보조 색 같은 색조에서 채도를 절반으로. 덜 중요한 버튼과 구분용 면. 글자 대비 4.4:1 · 다크 7.09:1
npm run color:generate -- --preset 182회색 브랜드의 색깔을 물려받되 선명함을 거의 0으로 둔다
반투명 포커스 링과 구분선에 쓴다
글자색 9번 배경 위에 얹는 색
#d186a0357.53°보조 색 같은 색조에서 채도를 절반으로. 덜 중요한 버튼과 구분용 면. 글자 대비 3.39:1 · 다크 9:1
npm run color:generate -- --preset 183회색 브랜드의 색깔을 물려받되 선명함을 거의 0으로 둔다
반투명 포커스 링과 구분선에 쓴다
글자색 9번 배경 위에 얹는 색
#fcacc7밝아서 #ce5e8a 로 낮춤357.6°보조 색 같은 색조에서 채도를 절반으로. 덜 중요한 버튼과 구분용 면. 글자 대비 3.6:1 · 다크 10.66:1
npm run color:generate -- --preset 184회색 브랜드의 색깔을 물려받되 선명함을 거의 0으로 둔다
반투명 포커스 링과 구분선에 쓴다
글자색 9번 배경 위에 얹는 색
#dd84a1359.43°보조 색 같은 색조에서 채도를 절반으로. 덜 중요한 버튼과 구분용 면. 글자 대비 3.25:1 · 다크 9.34:1
npm run color:generate -- --preset 185회색 브랜드의 색깔을 물려받되 선명함을 거의 0으로 둔다
반투명 포커스 링과 구분선에 쓴다
글자색 9번 배경 위에 얹는 색