색상 도구
어울리는 색과 읽히는 색
— 감이 아니라 규칙으로 고르세요
🎨 계산은 전부 브라우저 안에서 끝납니다. 회원가입도 저장도 없습니다.
팔레트
접근성
CSS
변환
색상 이름 110가지 — hex·RGB·대비
색 이름으로 hex 코드를 찾고, RGB·HSL·CMYK 값과 글자 대비, 보색과 명도 단계까지 한 화면에서 확인하세요
빨강 계열
노랑 계열
초록 계열
파랑 계열
보라 계열
갈색 계열
무채색
이럴 때 쓰세요
- 🎨 브랜드 색을 정했을 때 — 명도 단계와 어울리는 보조색을 한 번에 만듭니다
- 👁️ 글씨가 안 읽힐 때 — 대비를 재고 색상은 그대로 둔 채 밝기만 맞춥니다
- 👓 색으로 상태를 구분할 때 — 색약자에게도 구분되는지 확인하세요
- 💻 CSS를 쓸 때 — 그라디언트와 그림자 코드를 눈으로 보며 가져갑니다
자주 묻는 질문
Q. 왜 화면마다 색이 다르게 보이나요?
모니터마다 표현할 수 있는 색 범위와 보정 상태가 다르기 때문입니다. 같은 HEX 값이라도 기기에 따라 다르게 보이므로, 인쇄물이나 정확한 색이 중요한 작업은 보정된 화면에서 확인해야 합니다.
Q. 어떤 색부터 정하는 게 좋나요?
주인공 색 하나를 먼저 정하고 나머지를 규칙으로 파생시키는 편이 실패가 적습니다. 명도 단계 생성으로 그 색의 밝기 단계를 만들고, 팔레트 생성기로 보조색을 뽑으면 한 세트가 나옵니다.
Q. 접근성 기준은 꼭 지켜야 하나요?
법으로 강제되는 곳도 있고(공공기관 웹), 그렇지 않더라도 대비가 낮으면 밝은 야외에서 아무도 못 읽습니다. 본문은 4.5:1을 넘기는 것을 기본으로 삼으세요.
Q. 입력한 색이 저장되나요?
아닙니다. 모든 계산이 브라우저 안에서 끝나고 서버로 전송되는 값이 없습니다.
모든 계산은 브라우저에서만 이루어집니다 · 무료 · 회원가입 없음