사용 방법
- 색상을 입력하거나(#0f766e, rgb(15 118 110), hsl(175 77% 26%), oklch(…)) 색상 선택기로 고르세요.
- 목록에서 필요한 형식을 복사하세요.
- 배경색을 지정하면 대비율과 WCAG AA/AAA 결과를 확인할 수 있어요.
- 명암 단계에서 색을 클릭하면 그 색을 사용해요.
옵션 설명
- HEX / RGB
- 화면 색상을 빨강, 초록, 파랑 각각 0–255로 나타내요. #rrggbbaa와 rgb(… / 50%)로 투명도를 더할 수 있어요.
- HSL / HSV
- 색상, 채도, 명도(또는 밝기)로 나타내요. 색을 손으로 조금 밝게 하거나 어둡게 할 때 편리해요.
- OKLCH
- CSS Color 4의 지각 기반 색 공간이에요. 명도를 바꿔도 색상과 체감 채도가 일정하게 유지되어 팔레트와 다크 테마를 만들 때 이상적이에요.
- CMYK
- 참고용 단순 변환이에요. 실제 인쇄 색상은 프린터의 색상 프로파일에 따라 달라지므로, 정확한 값은 인쇄소에 문의하세요.
- 대비율
- WCAG 2.2 AA 등급은 일반 텍스트에 4.5:1, 큰 텍스트(18pt 또는 굵은 14pt)에 3:1을 요구하고, AAA 등급은 각각 7:1과 4.5:1을 요구해요.
예시
#0f766e은 rgb(15 118 110), hsl(175 77% 26%), oklch(51.1% 0.086 186.4)와 같은 색이에요. 흰 배경에서의 대비율은 약 5.5:1로, 모든 글자 크기에서 WCAG AA를 통과해요.
자주 쓰는 색을 모든 형식으로
CSS 색상 이름과 그 값이에요. 여기의 CMYK는 단순한 수학적 변환이에요. 전문 인쇄에는 인쇄소의 색상 프로필에 있는 CMYK 값을 사용하세요.
| CSS 이름 | HEX | RGB | HSL | CMYK |
|---|---|---|---|---|
| red | #ff0000 | rgb(255 0 0) | hsl(0 100% 50%) | 0%, 100%, 100%, 0% |
| orange | #ffa500 | rgb(255 165 0) | hsl(39 100% 50%) | 0%, 35%, 100%, 0% |
| gold | #ffd700 | rgb(255 215 0) | hsl(51 100% 50%) | 0%, 16%, 100%, 0% |
| green | #008000 | rgb(0 128 0) | hsl(120 100% 25%) | 100%, 0%, 100%, 50% |
| teal | #008080 | rgb(0 128 128) | hsl(180 100% 25%) | 100%, 0%, 0%, 50% |
| blue | #0000ff | rgb(0 0 255) | hsl(240 100% 50%) | 100%, 100%, 0%, 0% |
| navy | #000080 | rgb(0 0 128) | hsl(240 100% 25%) | 100%, 100%, 0%, 50% |
| purple | #800080 | rgb(128 0 128) | hsl(300 100% 25%) | 0%, 100%, 0%, 50% |
| hotpink | #ff69b4 | rgb(255 105 180) | hsl(330 100% 71%) | 0%, 59%, 29%, 0% |
| brown | #a52a2a | rgb(165 42 42) | hsl(0 59% 41%) | 0%, 75%, 75%, 35% |
| gray | #808080 | rgb(128 128 128) | hsl(0 0% 50%) | 0%, 0%, 0%, 50% |
어떤 형식을 쓸까
HEX는 CSS와 디자인 도구에서 색을 가장 짧게 쓰는 방법이에요. 빨강, 초록, 파랑을 각각 16진수 두 자리로 나타내요.
RGB는 같은 정보를 10진수로 쓴 것이고, rgb(255 0 0 / 50%)처럼 투명도를 추가할 수 있어요.
HSL은 색상, 채도, 명도를 나타내서 마지막 숫자만 바꾸면 같은 색의 더 밝거나 어두운 단계를 쉽게 만들 수 있어요.
OKLCH는 비교적 새로운 CSS 형식으로, 명도가 같은 간격으로 변하면 눈에도 같은 정도의 차이로 보여요. 접근성을 고려한 색상 팔레트에 유용해요.
자주 묻는 질문
텍스트에 적당한 대비율은 얼마인가요?
본문 텍스트는 최소 4.5:1(WCAG AA)이에요. 흰 배경에 순수 검정은 21:1이고, 흔히 쓰는 #767676 회색은 흰 배경에서 4.54:1로 겨우 통과해요.
CMYK 값이 포토샵과 다른 이유는 뭔가요?
포토샵은 특정 인쇄기와 용지에 맞춘 ICC 색상 프로파일을 거쳐 변환해요. 이 도구는 단순한 수학 공식을 사용하므로 대략적인 값으로는 괜찮지만 인쇄 교정용으로는 적합하지 않아요.
HSL과 OKLCH는 어떻게 다른가요?
HSL은 RGB를 단순히 재배열한 것이라, 명도가 같은 노란색과 파란색도 밝기가 매우 다르게 보여요. OKLCH는 명도가 같으면 눈에도 똑같이 밝아 보이도록 설계되었어요.
지금 CSS에서 OKLCH를 쓸 수 있나요?
네. oklch()는 현재 모든 주요 브라우저에서 동작해요.
개인정보 보호
이 도구는 전적으로 브라우저에서 실행돼요. 파일과 텍스트는 기기에서 처리되며 서버로 업로드되지 않아요.