색상 변환기 - HEX·RGB·HSL 색상 코드 변환

색상 변환기란?

색상 변환기는 웹 디자인과 개발에서 필수적인 세 가지 색상 표현 방식(HEX, RGB, HSL)을 실시간으로 상호 변환해주는 도구입니다.

디자이너에게 받은 HEX 색상 코드를 CSS의 rgb() 함수에 사용해야 하거나, HSL로 색상을 직관적으로 조절하고 싶을 때 유용합니다. 하나의 값을 변경하면 나머지 두 형식이 자동으로 업데이트되며, 보색/유사색/삼각색 팔레트도 자동으로 추천합니다.

모든 계산이 브라우저에서 실시간으로 이루어지므로 빠르고 편리합니다.

색상 모델 이해하기

웹에서 주로 사용되는 세 가지 색상 모델을 알아봅니다.

HEX (16진수 색상 코드) #으로 시작하는 6자리 16진수 값입니다. 앞에서부터 2자리씩 빨강(R), 초록(G), 파랑(B)을 나타냅니다. 각 자리는 0~F(0~15)의 값을 가지며, 00이 가장 어둡고 FF가 가장 밝습니다. 웹 개발에서 가장 널리 사용되는 형식입니다. 예: #FF5733 → R:FF(255), G:57(87), B:33(51) → 주황빨간색

RGB (Red, Green, Blue) 빛의 3원색인 빨강, 초록, 파랑의 조합으로 색을 표현합니다. 각 값은 0~255 범위이며, 세 가지 색을 혼합하여 약 1,678만 가지 색상을 표현할 수 있습니다. CSS에서 rgb(255, 87, 51) 형태로 사용합니다.

HSL (Hue, Saturation, Lightness) 색상(H), 채도(S), 밝기(L)로 색을 표현합니다. 사람의 색 인지 방식에 가장 가까운 모델로, 직관적으로 색을 조절할 수 있습니다. CSS에서 hsl(14, 100%, 60%) 형태로 사용합니다.

HSL 색상 모델 상세

HSL은 색상을 가장 직관적으로 조절할 수 있는 모델입니다.

H (Hue, 색상): 0°~360° 범위의 색상환 위치

0° / 360°: 빨강
60°: 노랑
120°: 초록
180°: 시안 (하늘색)
240°: 파랑
300°: 마젠타 (자홍색)

S (Saturation, 채도): 0%~100%

0%: 무채색 (회색)
100%: 가장 선명한 색

L (Lightness, 밝기): 0%~100%

0%: 검정
50%: 순수한 색
100%: 흰색

예를 들어 파란색 계열에서 밝은 하늘색을 만들고 싶다면 H는 200° 근처, S는 80% 정도, L을 60~70%로 올리면 됩니다. RGB나 HEX보다 훨씬 직관적으로 원하는 색을 찾을 수 있습니다.

팔레트 종류 설명

색상 조합(Color Harmony)은 시각적으로 조화로운 색상들의 관계를 말합니다. 이 도구는 네 가지 팔레트를 자동으로 생성합니다.

보색 (Complementary) 색상환에서 정반대(180°)에 위치한 색입니다. 강한 대비 효과를 주어 시선을 끌고 싶을 때 사용합니다. 예: 파랑-주황, 빨강-초록. 주의할 점은 두 색을 동일한 면적으로 사용하면 시각적 피로를 줄 수 있으므로, 주색과 강조색의 비율을 7:3 정도로 사용하는 것이 좋습니다.

유사색 (Analogous) 색상환에서 인접한 세 가지 색(±30°)입니다. 자연스럽고 편안한 느낌을 줍니다. 자연풍경 사진에서 흔히 볼 수 있는 조합이며, 웹사이트의 전체적인 분위기를 통일할 때 효과적입니다.

삼각색 (Triadic) 색상환에서 120°씩 떨어진 세 가지 색입니다. 보색보다는 부드럽지만 충분한 대비감을 제공합니다. 다채로운 느낌을 주면서도 균형잡힌 디자인이 가능합니다.

명도 변화 (Lightness Scale) 같은 색상과 채도에서 밝기만 단계적으로 변화시킨 스케일입니다. UI 디자인에서 같은 색의 밝고 어두운 변형이 필요할 때 유용합니다. 예: 버튼의 기본색, 호버색, 비활성색.

웹 디자인에서의 색상 활용

●브랜드 컬러: 기업의 아이덴티티를 나타내는 주요 색상. 로고, 버튼 등에 일관되게 사용
●배경색: 보통 흰색 계열의 밝은 색 또는 어두운 색(다크모드)을 사용
●텍스트 색: 배경과 충분한 대비(WCAG 기준 4.5:1 이상)가 필요
●강조색: 버튼, 링크, 알림 등 주의를 끌어야 하는 요소에 사용
●상태 색상: 성공(초록), 경고(노랑), 오류(빨강), 정보(파랑)의 관례적 의미
●그라데이션: 두 색상 사이를 자연스럽게 연결하여 깊이감 표현
●opacity/투명도: rgba()로 배경에 반투명 효과를 줄 때 RGB 값이 필요

이럴 때 사용하세요

●Figma/Sketch에서 받은 HEX 코드를 CSS rgb()로 변환할 때
●CSS 변수에 HSL 값을 사용하여 테마 시스템을 구축할 때
●기존 색상의 밝기나 채도를 조절한 변형이 필요할 때
●보색이나 유사색을 활용한 색상 팔레트를 구성할 때
●접근성(WCAG) 기준에 맞는 색상 대비를 확인할 때
●프레젠테이션이나 보고서에 사용할 조화로운 색 조합이 필요할 때
●브랜드 가이드라인의 색상을 다양한 형식으로 변환할 때

자주 묻는 질문

Q. HEX와 RGB는 어떤 차이가 있나요?

A. 둘 다 같은 색상을 표현하며, 단지 숫자 체계가 다릅니다. HEX는 16진수(0~F)로, RGB는 10진수(0~255)로 같은 값을 표현합니다. 예를 들어 HEX #FF0000과 RGB(255, 0, 0)은 동일한 빨간색입니다. CSS에서는 두 형식 모두 사용 가능합니다.

Q. HSL은 언제 사용하면 좋나요?

A. HSL은 특히 테마 시스템 구축에 유리합니다. H(색상)만 바꾸면 전체 색조를 변경할 수 있고, L(밝기)만 조절하면 같은 색의 밝은/어두운 변형을 쉽게 만들 수 있습니다. CSS 커스텀 속성과 함께 사용하면 다크모드 전환도 간편해집니다.

Q. 색상 코드를 복사하려면?

A. 각 입력 필드 옆의 복사 아이콘을 클릭하면 해당 형식(HEX, rgb(), hsl())이 클립보드에 복사됩니다. 팔레트의 색상 칩을 클릭하면 HEX 코드가 복사됩니다.

Q. CMYK는 지원하나요?

A. 현재 이 도구는 웹/화면용 색상 모델(HEX, RGB, HSL)만 지원합니다. CMYK는 인쇄용 색상 모델로, 화면에서의 색과 인쇄물의 색이 다를 수 있어 정확한 변환을 위해서는 ICC 프로파일이 필요합니다.

Q. 웹 접근성에 적합한 색상 대비는?

A. WCAG 2.1 기준으로 일반 텍스트는 배경과 최소 4.5:1, 큰 텍스트(18px 이상 또는 14px 이상 볼드)는 최소 3:1의 대비율이 필요합니다. 이 도구의 명도 변화 팔레트를 활용하면 적절한 대비를 가진 색상 조합을 찾기 쉽습니다.

자주 사용되는 색상 코드

웹 디자인에서 자주 사용되는 색상 코드를 정리했습니다.

기본 색상

검정: #000000 / rgb(0, 0, 0)
흰색: #FFFFFF / rgb(255, 255, 255)
빨강: #FF0000 / rgb(255, 0, 0)
초록: #00FF00 / rgb(0, 255, 0)
파랑: #0000FF / rgb(0, 0, 255)

알아두면 좋은 팁

●CSS에서 HSL을 사용하면 다크모드 구현이 쉬워집니다 — L값만 조절하면 됩니다
●Tailwind CSS는 색상을 50~950 단계로 나누어 사용합니다 — 명도 변화 팔레트와 유사
●색맹 사용자를 고려하여 색상만으로 정보를 구분하지 않도록 주의하세요
●배경색과 텍스트색의 대비율은 최소 4.5:1을 유지하세요 (WCAG 기준)
●3색 이내로 주요 색상을 제한하면 통일감 있는 디자인이 됩니다
●opacity를 활용하면 같은 색으로 다양한 깊이감을 표현할 수 있습니다