색상 코드 변환기

HEX ↔ RGB ↔ HSL ↔ OKLCH 즉시 변환. 색상 피커, CSS 코드 복사, 보색·유사색 팔레트 자동 생성. 명도 대비 검사(WCAG)까지 한 페이지에서.

색상 선택

#000000

색상 피커로 직접 선택하거나 아래 코드를 수정하세요

코드 변환

HEX

RGB

HSL

OKLCH

RGB 슬라이더

R107

G63

B160

팔레트

보색 (Complementary)

유사색 (Analogous)

삼색 (Triadic)

밝기 변형 (Shades)

명도 대비 검사 (WCAG)

텍스트 미리보기

대비율: —

CSS 네임드 컬러

—

CSS 코드 스니펫

최근 색상

색상을 선택하면 여기에 기록됩니다

자주 묻는 질문

HEX 색상 코드란 무엇인가요?

HEX(16진수) 색상 코드는 #RRGGBB 형식으로, R(빨강), G(초록), B(파랑) 각각을 00~FF 범위의 16진수로 표현합니다. 예를 들어 #FF0000은 순수 빨강, #000000은 검정, #FFFFFF는 흰색입니다. 웹 개발에서 가장 널리 사용되는 색상 표현 방식입니다.

RGB와 HEX의 차이는 무엇인가요?

RGB와 HEX는 같은 색상을 다르게 표현하는 방법입니다. RGB는 rgb(255, 0, 0)처럼 0~255 범위의 10진수로, HEX는 #FF0000처럼 16진수로 표현합니다. RGB는 읽기 쉽고, HEX는 짧아서 CSS에서 더 자주 사용됩니다.

HSL이란 무엇인가요?

HSL은 Hue(색상 각도, 0~360°), Saturation(채도, 0~100%), Lightness(밝기, 0~100%)로 색상을 표현합니다. HEX/RGB에 비해 색상을 직관적으로 조절하기 쉬워 CSS 디자인에서 많이 활용됩니다. 예: hsl(120, 100%, 50%)은 초록색입니다.

OKLCH란 무엇인가요?

OKLCH는 CSS Color Level 4에서 도입된 새로운 색상 모델로, L(밝기), C(채도), H(색상)으로 표현합니다. 인간의 시각과 더 일치하는 균일한 색상 공간을 사용하여, 팔레트를 만들 때 일관된 밝기를 유지하기 쉽습니다. 최신 브라우저에서 지원합니다.

WCAG 명도 대비란 무엇인가요?

WCAG(Web Content Accessibility Guidelines)는 텍스트와 배경의 명도 대비 기준을 정합니다. 일반 텍스트는 대비율 4.5:1 이상(AA 기준), 큰 텍스트는 3:1 이상이어야 합니다. AAA 기준은 7:1 이상입니다. 웹 접근성을 위해 충분한 대비를 확보하는 것이 중요합니다.