HTML 색상코드표 & 컬러 피커
자주 쓰는 HTML 색상코드표에서 색을 고르거나 HEX·RGB 값을 입력하면 HEX↔RGB↔HSL 변환값과 흰색·검정 글자 대비(AA/AAA 판정)를 즉시 보여 주고, 코드를 한 번에 복사합니다.
색상코드표 · hex · rgb · hsl
색상코드 찾기 & 변환
표에서 색을 고르거나 HEX·RGB를 입력하면 변환값과 대비를 함께 확인합니다.
HTML 색상코드표 & 컬러 피커 사용 가이드
웹 디자인과 프론트엔드 작업에서는 같은 색상을 HEX, RGB, HSL처럼 여러 형식의 색상코드로 다뤄야 합니다. CSS 파일에는 HEX가 짧고 편하지만, 투명도나 동적 계산에는 RGB 계열이 편하고, 색상 밝기나 채도를 조절할 때는 HSL이 읽기 쉽습니다. HTML 색상코드표 & 컬러 피커는 자주 쓰는 색상코드표 40색에서 색을 누르거나, HEX 색상값을 입력하거나, 색상 선택기를 움직이거나, R·G·B 값을 직접 입력해 색을 만들고, 그 즉시 RGB와 HSL 값, 흰색·검정 글자 대비와 WCAG AA/AAA 판정을 함께 보여 줍니다. HEX·RGB·HSL 코드는 복사 버튼으로, CSS 한 줄은 CSS 코드 복사 버튼으로 클립보드에 담아 바로 붙여 넣을 수 있습니다.
이 페이지는 색상값을 브라우저에서만 변환합니다. 디자인 시안, CSS 변수, 피그마에서 복사한 색상, 브랜드 팔레트 후보를 넣고 즉시 비교할 수 있습니다. 대비 수치는 WCAG 대비 공식에 쓰이는 상대 휘도 계산을 바탕으로 제공하지만, 최종 접근성 판단은 글자 크기, 굵기, 주변 UI, 실제 사용 맥락을 함께 봐야 합니다. 따라서 이 도구는 빠른 사전 확인과 코드 변환에 쓰고, 공개 전에는 실제 화면에서 접근성 검토를 이어가는 것이 좋습니다.
이 도구가 필요한 경우
- 색상코드표에서 원하는 색의 HEX·RGB 코드를 바로 찾아 복사해야 할 때
- CSS에서 사용할 HEX 색상값을 RGB나 HSL 형식으로 빠르게 바꿔야 할 때
- 디자인 시안의 RGB 값을 입력해 대응하는 HEX 코드를 알아내야 할 때
- 배경색 위에 흰색·검정 글자 중 어느 쪽이 WCAG AA/AAA를 통과하는지 먼저 확인해야 할 때
변환 전 확인
- HEX는 #RGB, #RRGGBB, #RRGGBBAA(투명도 포함) 형식을 지원하며 RGB 입력은 0~255로 자동 보정됩니다.
- 대비 수치는 참고용이며 실제 접근성은 글자 크기·굵기·맥락을 함께 봐야 합니다. 표시는 소수 둘째 자리 반올림이고 AA/AAA 판정은 반올림 전 값 기준입니다. 투명한 색의 대비는 불투명 기준으로 계산합니다.
- 색상은 모니터·환경에 따라 다르게 보일 수 있으니 실제 화면에서 확인하세요.
자주 쓰는 HTML 색상코드표 20색
웹에서 가장 자주 쓰는 20가지 색의 HTML 색상코드를 HEX·RGB·HSL로 정리하고, 그 색을 배경으로 했을 때 흰 글자와 검정 글자의 대비와 WCAG 등급(AA 4.5:1, AA 큰글자 3:1, AAA 7:1)을 함께 적었습니다. 값은 이 페이지의 변환 엔진으로 계산한 것이라 도구 결과와 항상 같습니다. 위 도구의 색상코드표 40색에는 이 20색에 crimson, tomato, coral, dodgerblue, royalblue, indigo, magenta, chocolate 등 20색이 더 들어 있습니다.
| 색 | 이름 | HEX | RGB | HSL | 흰 글자 대비 | 검정 글자 대비 |
|---|---|---|---|---|---|---|
| 빨강 red | #FF0000 | rgb(255, 0, 0) | hsl(0, 100%, 50%) | 4.00:1 (AA 큰글자) | 5.25:1 (AA) | |
| 주황 orange | #FFA500 | rgb(255, 165, 0) | hsl(39, 100%, 50%) | 1.97:1 (미달) | 10.63:1 (AAA) | |
| 노랑 yellow | #FFFF00 | rgb(255, 255, 0) | hsl(60, 100%, 50%) | 1.07:1 (미달) | 19.56:1 (AAA) | |
| 초록 green | #008000 | rgb(0, 128, 0) | hsl(120, 100%, 25%) | 5.14:1 (AA) | 4.09:1 (AA 큰글자) | |
| 라임 lime | #00FF00 | rgb(0, 255, 0) | hsl(120, 100%, 50%) | 1.37:1 (미달) | 15.30:1 (AAA) | |
| 파랑 blue | #0000FF | rgb(0, 0, 255) | hsl(240, 100%, 50%) | 8.59:1 (AAA) | 2.44:1 (미달) | |
| 하늘 skyblue | #87CEEB | rgb(135, 206, 235) | hsl(197, 71%, 73%) | 1.74:1 (미달) | 12.06:1 (AAA) | |
| 남색 navy | #000080 | rgb(0, 0, 128) | hsl(240, 100%, 25%) | 16.01:1 (AAA) | 1.31:1 (미달) | |
| 보라 purple | #800080 | rgb(128, 0, 128) | hsl(300, 100%, 25%) | 9.42:1 (AAA) | 2.23:1 (미달) | |
| 분홍 pink | #FFC0CB | rgb(255, 192, 203) | hsl(350, 100%, 88%) | 1.54:1 (미달) | 13.65:1 (AAA) | |
| 핫핑크 hotpink | #FF69B4 | rgb(255, 105, 180) | hsl(330, 100%, 71%) | 2.65:1 (미달) | 7.93:1 (AAA) | |
| 갈색 brown | #A52A2A | rgb(165, 42, 42) | hsl(0, 59%, 41%) | 7.08:1 (AAA) | 2.96:1 (미달) | |
| 금색 gold | #FFD700 | rgb(255, 215, 0) | hsl(51, 100%, 50%) | 1.40:1 (미달) | 14.97:1 (AAA) | |
| 은색 silver | #C0C0C0 | rgb(192, 192, 192) | hsl(0, 0%, 75%) | 1.82:1 (미달) | 11.54:1 (AAA) | |
| 회색 gray | #808080 | rgb(128, 128, 128) | hsl(0, 0%, 50%) | 3.95:1 (AA 큰글자) | 5.32:1 (AA) | |
| 연회색 lightgray | #D3D3D3 | rgb(211, 211, 211) | hsl(0, 0%, 83%) | 1.50:1 (미달) | 14.03:1 (AAA) | |
| 검정 black | #000000 | rgb(0, 0, 0) | hsl(0, 0%, 0%) | 21.00:1 (AAA) | 1.00:1 (미달) | |
| 흰색 white | #FFFFFF | rgb(255, 255, 255) | hsl(0, 0%, 100%) | 1.00:1 (미달) | 21.00:1 (AAA) | |
| 청록 teal | #008080 | rgb(0, 128, 128) | hsl(180, 100%, 25%) | 4.77:1 (AA) | 4.40:1 (AA 큰글자) | |
| 올리브 olive | #808000 | rgb(128, 128, 0) | hsl(60, 100%, 25%) | 4.20:1 (AA 큰글자) | 5.01:1 (AA) |
색상코드 형식 한눈에 보기
#RRGGBB6자리 HEX: CSS 기본 표기.#FF0000= 빨강.#RGB3자리: 같은 숫자 반복의 축약.#F00=#FF0000.rgb(255, 0, 0): 0~255 십진수. 계산·자바스크립트에 편리.rgba(255, 0, 0, 0.5)/#FF000080: 8자리 HEX의 마지막 두 자리는 투명도(00=0%, 80=50%, FF=100%).hsl(0, 100%, 50%): 색상·채도·명도. 밝기 조절은 L만 바꾸면 됨.- CSS 색 이름(
red,dodgerblue): 147개 표준 이름. 코드가 기억나지 않을 때 색상코드표에서 이름으로 검색.
사용 방법
- 색상코드표에서 색을 누르거나, HEX를 입력하거나, 색상 선택기를 움직이거나, R·G·B 값을 직접 입력합니다.
- 큰 미리보기에서 색과 자동 대비 글자색을 확인합니다. 8자리 HEX는 체크무늬 위에 투명도가 표시됩니다.
- RGB와 HSL 변환값, 흰색·검정 대비 수치와 AA/AAA 판정을 확인합니다.
- HEX·RGB·HSL 복사 버튼으로 필요한 형식의 코드를 클립보드에 담습니다.
- CSS 코드 복사 버튼(또는 입력칸에서 Enter)으로
color: #336699;한 줄을 복사해 CSS나 디자인 도구에 붙여 넣습니다.
웹 접근성 대비 기준표
WCAG 2.x가 요구하는 최소 대비입니다. 도구의 대비 셀에 표시되는 AA ✓·AAA ✗ 같은 판정은 아래 기준을 그대로 적용한 결과입니다.
RGB 값으로 직접 색 만들기
디자인 시안이나 협업 문서에 RGB 값만 적혀 있을 때, R·G·B 입력란에 숫자를 직접 넣으면 대응하는 HEX 코드와 HSL, 대비가 즉시 계산됩니다. 0~255를 벗어난 값은 자동으로 범위 안으로 보정되고 소수는 반올림되므로 잘못 입력해도 안전합니다. 세 칸 중 하나라도 비어 있으면 0으로 간주하지 않고 입력을 요청하므로, 의도하지 않은 검정이 결과로 나오는 일이 없습니다. HEX·RGB·HSL 값은 각각 복사 버튼으로 바로 가져갈 수 있어 코드와 디자인 도구를 오갈 때 편리합니다.
HEX, RGB, HSL의 차이
HEX는 #RRGGBB로 빨강·초록·파랑을 16진수로 표현해 CSS에서 가장 널리 쓰입니다. RGB는 같은 값을 0~255 십진수로 나타내 투명도(rgba)나 계산에 편하고, HSL은 색상(Hue)·채도(Saturation)·명도(Lightness)로 표현해 색을 조금 더 밝게/어둡게 조절하기 쉽습니다. 같은 색을 세 형식으로 함께 보면 상황에 맞는 표기를 고를 수 있습니다.
대비 계산을 읽는 법
글자 대비는 배경색과 글자색의 상대 휘도 비율로, 1:1에 가까울수록 구분이 어렵고 21:1에 가까울수록 또렷합니다. 이 도구는 현재 색을 배경으로 흰색 글자와 검정 글자의 대비를 각각 계산해 더 읽기 쉬운 쪽을 미리보기 글자색으로 보여 주고, 각 대비 옆에 AA(4.5:1)·큰 글자 AA(3:1)·AAA(7:1) 통과 여부를 글자로 표기합니다. 예를 들어 파랑 #0000FF 위의 흰 글자는 8.59:1로 AAA를 통과하지만 검정 글자는 2.44:1로 미달입니다.
브랜드 팔레트에 사용할 때
브랜드 색을 정할 때는 HEX·RGB·HSL을 함께 기록해 두면 코드, 디자인 도구, 인쇄 가이드 어디서나 같은 색을 재현하기 쉽습니다. 후보 색마다 흰색·검정 대비를 확인해 두면 버튼·배지·배너처럼 글자가 올라가는 요소에서 어떤 글자색을 기본으로 쓸지 빠르게 정할 수 있습니다.
저항 컬러코드표와는 다릅니다
이 페이지의 색상코드는 웹·CSS·HTML용 HEX·RGB 값입니다. 전자부품 저항의 띠 색으로 저항값을 읽는 저항 컬러코드표는 다루지 않습니다. 저항값 계산이 필요하다면 전자공학용 계산기를 이용하세요.
출처·검토 기준
- 대비 계산: WCAG 2.x 상대 휘도·대비 비율 공식(임계값 0.03928, WCAG 2.1 권고값 0.04045와 소수 둘째 자리 결과가 같음을 140,608색 격자에서 확인).
- 색상코드표 40색: CSS Color Module의 표준 명명 색 값(red, dodgerblue 등)을 그대로 사용.
- 검토일 2026.09.07 · 골든 테스트 COLOR-001~016(HEX 3/6/8자리, RGB 경계·빈 값, HSL, 대비, AA/AAA 경계, 색상코드표 검색)으로 회귀 검증.
이 도구는 색상코드 변환과 대비 사전 확인을 돕는 유틸리티입니다. 색 영역(sRGB 외), 인쇄 CMYK 변환, 정밀 접근성 감사는 대신하지 않으므로 정확한 작업에는 전용 도구와 실제 화면 검토를 함께 사용하세요.
FAQ
색상코드는 어떻게 찾나요?
아래 색상코드표에서 원하는 색을 누르면 HEX·RGB·HSL 값이 자동으로 채워집니다. 이미 아는 값이 있으면 HEX 칸에 #FF0000처럼 입력하거나 R·G·B 칸에 0~255 숫자를 넣으세요. 색상 선택기로 직접 고를 수도 있습니다.
HEX와 RGB는 어떻게 서로 변환하나요?
HEX #RRGGBB는 빨강·초록·파랑을 16진수 두 자리씩 적은 값입니다. FF=255, 80=128, 00=0처럼 각 두 자리를 10진수로 바꾸면 RGB가 되고, 반대로 0~255를 16진수로 바꾸면 HEX가 됩니다. 이 도구는 어느 쪽을 입력해도 나머지를 즉시 계산합니다.
색상코드표의 대표 색 코드는 무엇인가요?
빨강 #FF0000, 초록 #008000, 파랑 #0000FF, 노랑 #FFFF00, 주황 #FFA500, 보라 #800080, 검정 #000000, 흰색 #FFFFFF, 회색 #808080입니다. 본문 색상코드표에 20색의 HEX·RGB·HSL과 글자 대비를 함께 정리했습니다.
HSL은 무엇이고 언제 쓰나요?
HSL은 색상(Hue 0~360°)·채도(Saturation 0~100%)·명도(Lightness 0~100%)로 색을 표현합니다. 같은 색을 조금 더 밝게·어둡게 만들거나 채도만 낮출 때 숫자 하나만 바꾸면 되어 CSS 변수와 테마 색 조정에 편리합니다.
명도 대비와 AA·AAA는 무엇을 뜻하나요?
대비는 배경색과 글자색의 상대 휘도 비율로 1:1부터 21:1까지입니다. WCAG는 본문 글자 4.5:1 이상(AA), 큰 글자 3:1 이상, 더 엄격한 AAA는 7:1 이상을 요구합니다. 이 도구는 현재 색 위의 흰색·검정 글자 대비와 통과 등급을 보여 주지만, 최종 판단은 글자 크기와 실제 화면으로 확인하세요. 표시 수치는 소수 둘째 자리까지 반올림하고 AA/AAA 판정은 반올림 전 값으로 하므로, 3.00:1이나 4.50:1로 보여도 실제 값이 기준에 아주 조금 못 미치면 미달로 표시됩니다.