HTML 컬러 코드표 & 피커

HTML 컬러 코드표 & 피커 사용 가이드

웹 디자인과 프론트엔드 작업에서는 같은 색상을 HEX, RGB, HSL처럼 여러 형식으로 다뤄야 합니다. CSS 파일에는 HEX가 짧고 편하지만, 투명도나 동적 계산에는 RGB 계열이 편하고, 색상 밝기나 채도를 조절할 때는 HSL이 읽기 쉽습니다. HTML 컬러 코드표 & 피커는 HEX 색상값을 입력하거나 색상 선택기를 움직이거나 R·G·B 값을 직접 입력해 색을 만들고, 그 즉시 RGB와 HSL 값, 흰색·검정 텍스트 대비를 함께 보여 줍니다. HEX와 RGB 코드는 복사 버튼으로 한 번에 클립보드에 담아 CSS에 바로 붙여 넣을 수 있습니다.

이 페이지는 색상값을 브라우저에서만 변환합니다. 디자인 시안, CSS 변수, 피그마에서 복사한 색상, 브랜드 팔레트 후보를 넣고 즉시 비교할 수 있습니다. 대비 수치는 WCAG 대비 공식에 쓰이는 상대 휘도 계산을 바탕으로 제공하지만, 최종 접근성 판단은 글자 크기, 굵기, 주변 UI, 실제 사용 맥락을 함께 봐야 합니다. 따라서 이 도구는 빠른 사전 확인과 코드 변환에 쓰고, 공개 전에는 실제 화면에서 접근성 검토를 이어가는 것이 좋습니다.

사용 방법

1. HEX를 입력하거나 색상 선택기를 움직이거나 R·G·B 값을 직접 입력합니다.
2. 큰 미리보기에서 색과 자동 대비 텍스트 색을 확인합니다.
3. RGB와 HSL 변환값, 흰색·검정 대비 수치를 확인합니다.
4. HEX 또는 RGB 복사 버튼으로 코드를 클립보드에 담습니다.
5. 복사한 값을 CSS나 디자인 도구에 붙여 넣습니다.

RGB 값으로 직접 색 만들기

디자인 시안이나 협업 문서에 RGB 값만 적혀 있을 때, R·G·B 입력란에 숫자를 직접 넣으면 대응하는 HEX 코드와 HSL, 대비가 즉시 계산됩니다. 0~255를 벗어난 값은 자동으로 범위 안으로 보정되므로 잘못 입력해도 안전합니다. HEX와 RGB 값은 각각 복사 버튼으로 바로 가져갈 수 있어, 코드와 디자인 도구를 오갈 때 편리합니다.

HEX, RGB, HSL의 차이

HEX는 #RRGGBB로 빨강·초록·파랑을 16진수로 표현해 CSS에서 가장 널리 쓰입니다. RGB는 같은 값을 0~255 십진수로 나타내 투명도(rgba)나 계산에 편하고, HSL은 색상(Hue)·채도(Saturation)·명도(Lightness)로 표현해 색을 조금 더 밝게/어둡게 조절하기 쉽습니다. 같은 색을 세 형식으로 함께 보면 상황에 맞는 표기를 고를 수 있습니다.

대비 계산을 읽는 법

텍스트 대비는 배경색과 글자색의 상대 휘도 비율로, 1:1에 가까울수록 구분이 어렵고 21:1에 가까울수록 또렷합니다. 이 도구는 현재 색을 배경으로 흰색 글자와 검정 글자의 대비를 각각 계산해 더 읽기 쉬운 쪽을 미리보기 글자색으로 보여 줍니다. WCAG는 본문에 4.5:1 이상을 권장하지만, 큰 글자나 굵은 글자는 기준이 다르므로 맥락과 함께 판단하세요.

브랜드 팔레트에 사용할 때

브랜드 색을 정할 때는 HEX·RGB·HSL을 함께 기록해 두면 코드, 디자인 도구, 인쇄 가이드 어디서나 같은 색을 재현하기 쉽습니다. 후보 색마다 흰색·검정 대비를 확인해 두면 버튼·배지·배너처럼 텍스트가 올라가는 요소에서 어떤 글자색을 기본으로 쓸지 빠르게 정할 수 있습니다.

이 도구는 색상 코드 변환과 대비 사전 확인을 돕는 유틸리티입니다. 색 영역(sRGB 외), 인쇄 CMYK 변환, 정밀 접근성 감사는 대신하지 않으므로 정확한 작업에는 전용 도구와 실제 화면 검토를 함께 사용하세요.