색상

어떤 도구를 써야 할지 모르겠다면

변환기는 HEX·RGB·HSL·CMYK·CSS 색이름 사이를 오갑니다 — 브랜드 가이드와 스타일시트의 표기가 다를 때 늘 하는 일입니다.

대비 검사기는 남이 읽을 것이라면 반드시 거쳐야 합니다. 글자색과 배경색의 대비를 WCAG 기준으로 알려줍니다 — 본문 4.5:1, 큰 글자 3:1. 팔레트를 정한 뒤가 아니라 정하기 전에 보는 게 낫습니다. 흰 배경의 옅은 회색이 2.8:1로 떨어지면 대개 디자인을 바꾸지 않고는 못 살립니다.

이미 가진 색 하나에서 한 벌을 만드는 것이 셋입니다. 명도 단계는 색 하나를 밝기 단계로 펼쳐 줍니다 — 디자인 토큰 파일이 대개 요구하는 모양입니다. 색 섞기는 두 색을 원하는 비율로 섞어 결과의 HEX를 줍니다. 배색은 색상환을 돌며 보색·삼각·유사·사각 배색을 뽑습니다. 브랜드 색은 정해졌고 그 옆에 놓을 색이 안 정해졌을 때 씁니다.

사진이나 스크린샷, 원본 파일이 없는 기존 브랜딩에서 배색을 빠르게 만들려면 이미지 도구의 이미지 팔레트가 사진에서 주요 색을 그 비중과 함께 뽑습니다. 무작위 팔레트는 그 반대로, 실마리가 아예 없어서 빈 화면을 마주하느니 다섯 색을 보고 반응하는 편이 나을 때 씁니다.