더 알아보기
어떻게 계산하나요
- 빨강 계열부터 파스텔까지 10묶음, 색 110가지를 HEX와 RGB로 보여 줘요. 누르면 바로 복사돼요.
- HEX, RGB, HSL 중 아무 칸에나 적으면 나머지가 바로 바뀌어요. #fff, rgb(1, 2, 3), tomato처럼 적어도 읽어요.
- 흰 글자, 검은 글자와의 명도 대비를 웹 접근성 기준(4.5 : 1)으로 알려 주고, 보색과 유사색도 보여 줘요.
- 사진을 고르고 누르면 그 자리 색상코드를 알려 줘요. 사진은 서버로 보내지 않아요.
기본 색 색상코드
웹에서는 HEX 코드와 CSS 색 이름 어느 쪽을 써도 같은 색이 나와요.
| 색 | HEX | RGB |
|---|---|---|
| 빨강 (red) | #FF0000 | 255, 0, 0 |
| 주황 (orange) | #FFA500 | 255, 165, 0 |
| 노랑 (yellow) | #FFFF00 | 255, 255, 0 |
| 초록 (green) | #008000 | 0, 128, 0 |
| 파랑 (blue) | #0000FF | 0, 0, 255 |
| 남색 (navy) | #000080 | 0, 0, 128 |
| 보라 (purple) | #800080 | 128, 0, 128 |
| 회색 (gray) | #808080 | 128, 128, 128 |
| 검정 (black) | #000000 | 0, 0, 0 |
| 흰색 (white) | #FFFFFF | 255, 255, 255 |
CSS의 green은 #008000이라 생각보다 어두워요. 형광에 가까운 #00FF00은 lime이에요.
HEX 색상코드는 이렇게 읽어요
HEX 코드는 # 뒤에 빨강, 초록, 파랑을 두 자리씩 16진수로 적은 거예요. 00이 가장 적고 FF(255)가 가장 많아요. 그래서 #FF0000은 빨강만 가득, #000000은 검정, #FFFFFF는 흰색이에요.
#F00처럼 세 자리로 줄여 쓰기도 해요. 글자마다 두 번 겹쳐 읽어서 #F00은 #FF0000과 같아요. RGB는 같은 세 숫자를 0~255로 적은 것이라 토마토색 #FF6347은 rgb(255, 99, 71)이에요.
HSL은 언제 쓰나요?
HSL은 색상(H, 0~360도), 채도(S, %), 밝기(L, %)로 색을 적어요. 토마토색은 hsl(9, 100%, 64%)이에요. 같은 색을 조금 밝게, 조금 연하게 바꿀 때 숫자 하나만 고치면 돼서 편해요.
밝기를 50%보다 올리면 흰색에, 내리면 검정에 가까워져요. 채도를 0%로 하면 회색이 돼요.
글자가 잘 보이는 색은 명도 대비로 골라요
명도 대비는 두 색의 밝기 차이를 1 : 1(같은 색)부터 21 : 1(흰색과 검정)까지 숫자로 나타낸 거예요. 웹 접근성 국제 기준(WCAG 2.2)은 본문 글자 4.5 : 1, 18pt 이상이나 굵은 14pt 이상 큰 글자 3 : 1을 최소로 보고, 7 : 1이면 더 높은 단계예요. 한국형 웹 콘텐츠 접근성 지침도 같은 4.5 대 1이에요.
눈으로 보면 비슷해도 숫자는 꽤 달라요. 회색 #777777 위 흰 글자는 4.47 : 1로 기준에 아주 조금 못 미치고, 빨강 #FF0000 위 흰 글자도 3.99 : 1예요. 빨강 위 검은 글자는 5.25 : 1로 더 잘 보여요.
색 이름이 우리가 아는 색과 다를 때
CSS 색 이름은 영어 이름이 그대로 굳은 거라 헷갈리는 게 있어요. darkgray(#A9A9A9)는 이름과 달리 gray(#808080)보다 밝아요. khaki(#F0E68C)는 연한 노란색이라, 우리가 흔히 말하는 국방색 카키를 원하면 olivedrab(#6B8E23)이나 darkolivegreen(#556B2F) 쪽이 가까워요.
색상표의 한국어 이름은 알아보기 쉽게 이 사이트가 붙인 이름이에요. KS 관용색이름 같은 공식 이름이 아니에요. 코드를 쓸 때는 HEX나 CSS 이름을 쓰세요.
바탕색별 흰 글자, 검은 글자 명도 대비
웹 접근성 기준은 본문 글자 4.5 : 1, 큰 글자 3 : 1 이상이에요.
| 바탕색 | 흰 글자 | 검은 글자 |
|---|---|---|
| 회색 #777777 | 4.47 : 1 큰 글자만 괜찮아요 | 4.68 : 1 잘 보여요 |
| 빨강 #FF0000 | 3.99 : 1 큰 글자만 괜찮아요 | 5.25 : 1 잘 보여요 |
| 다저 블루 #1E90FF | 3.23 : 1 큰 글자만 괜찮아요 | 6.48 : 1 잘 보여요 |
| 초록 #008000 | 5.13 : 1 잘 보여요 | 4.08 : 1 큰 글자만 괜찮아요 |
| 주황 #FFA500 | 1.97 : 1 잘 안 보여요 | 10.63 : 1 아주 잘 보여요 |
| 파랑 #0000FF | 8.59 : 1 아주 잘 보여요 | 2.44 : 1 잘 안 보여요 |
빨강, 주황처럼 밝은 원색 바탕에는 흰 글자보다 검은 글자가 더 잘 보여요.
자주 묻는 질문
색상코드는 어떻게 복사하나요?
색상표에서 색을 누르면 HEX 코드가, 아래 숫자를 누르면 RGB 코드가 바로 복사돼요. 색상코드 변환 칸에서는 HEX, RGB, HSL 옆 복사 단추를 누르면 돼요.
HEX 코드를 RGB로 바꾸려면 어떻게 하나요?
색상코드 변환 칸의 HEX에 #FF6347처럼 넣으면 RGB와 HSL이 바로 바뀌어요. 반대로 RGB 칸에 255, 99, 71처럼 넣어도 돼요. #fff처럼 세 자리나 # 없이 적어도 읽어요.
사진 속 색상코드도 알 수 있나요?
사진에서 찾기 칸에서 사진을 고르고 원하는 곳을 누르면 그 점의 색을 HEX, RGB, HSL로 알려 줘요. 사진은 서버로 보내지 않고 이 기기 안에서만 열어요.
보색은 어떻게 찾나요?
색상코드 변환 칸 아래 어울리는 색에서 보색, 유사색, 삼각 배색을 보여 줘요. 화면 색(HSL) 색상환 기준이라 미술 시간의 먼셀 색상환과는 짝이 조금 다를 수 있어요.
인쇄할 때도 같은 색이 나오나요?
아니요, 조금 달라질 수 있어요. 화면은 빛(RGB)으로, 인쇄는 잉크(CMYK)로 색을 내요. 인쇄 색은 인쇄소에 CMYK 값이나 색 견본으로 확인해 주세요.
무엇을 보고 계산했나요
- W3C CSS Color Module Level 4(2026-09-30 판), 6.1 Named Colors: 색 이름과 HEX 값. 7.1 Converting HSL Colors to sRGB: HSL과 RGB 변환식
- W3C WCAG 2.2(2024-12-12 권고), 용어 relative luminance와 contrast ratio, 성공 기준 1.4.3 최소 대비(4.5 : 1, 큰 글자 3 : 1), 1.4.6 향상된 대비(7 : 1)
- 한국형 웹 콘텐츠 접근성 지침 2.2(KS X OT0003:2022), 5.4.3 텍스트 콘텐츠의 명도 대비: 4.5 대 1 이상
2026년 10월 5일에 기준을 다시 확인했어요.
계산에 넣지 않은 것
- 인쇄용 CMYK 값과 팬톤 같은 색 견본 번호(인쇄 조건마다 달라서 숫자 하나로 바꿀 수 없어요)
- 투명도(알파). #RRGGBBAA나 rgba의 넷째 값은 빼고 색만 읽어요.
- 색각 이상 시뮬레이션