도구
가이드

색상 변환기

개발

HEX, RGB, HSL을 상호 변환하며 실시간 미리보기와 팔레트를 제공합니다.

100% 클라이언트 백엔드 없음
HEX
RGB
HSL
CSS 변수
#4f46e5
이 페이지에서

색상 변환기란?#

색상 변환기는 색에 대한 한 기술을 스택이 실제로 필요로 하는 다른 기술들로 번역합니다. 디자이너는 목업에서 HEX 값을 건네고, CSS는 rgb() 또는 hsl()을 쓰게 하며, 디자인 토큰 파이프라인은 CSS 변수를 원하고, 차트 라이브러리는 알파 채널이 있는 RGBA 튜플을 요구합니다. 같은 색이 계속 다른 옷을 입고, 손으로 변환하거나 계산기에서 추측하며 실제 시간을 쓰게 됩니다.

이 페이지는 네 가지 변환을 한 번에 합니다. 색을 입력하거나 고르면 즉시 HEX, RGB, HSL, 그리고 붙여넣기 바로 쓸 수 있는 CSS 변수 선언, 더해 라이브 미리보기 견본과 그 색에서 파생된 5단계 밝게/어둡게 팔레트를 얻습니다. 모든 것은 브라우저에서 로컬로 계산됩니다.

HEX, RGB, HSL이 공존하는 이유는 각각 다른 일에 좋기 때문입니다. HEX(#4f46e5)는 간결하고 CSS, Figma 내보내기, 브랜드 가이드라인을 지배합니다. RGB(rgb(79, 70, 229))는 적/녹/청 채널을 명시적으로 만들어, 이미지 코드와 canvas 픽셀 조작이 기대하는 것입니다. HSL(hsl(243, 75%, 59%)), 색상·채도·명도로 쪼개진 형태는 인간이 추론할 수 있는 것입니다. “10% 더 밝게”는 HSL에서는 숫자 하나 바꾸는 것이지만 RGB에서는 지저분한 세 숫자의 춤입니다.

사용 방법#

  1. 두 가지 방법 중 하나로 입력 색을 설정합니다.
    • 왼쪽의 색 견본 을 클릭해 네이티브 OS 색 선택기를 열어 시각적으로 고릅니다.
    • 또는 옆의 텍스트 필드 에 값을 입력합니다. HEX(#4f46e5, #abc, 또는 알파가 있는 8자리 #4f46e5ff), rgb() / rgba(), hsl() / hsla()를 모두 받습니다.
  2. 오른쪽 목록에서 결과를 읽습니다. HEX, RGB, HSL, CSS 변수. 각 필드는 읽기 전용이며, 클릭해 복사하거나 작업 중 참조용으로 씁니다.
  3. 오른쪽의 큰 미리보기 블록을 지켜봅니다. 현재 색으로 채워져 디자인과 비교해 건전성을 검사할 수 있습니다.
  4. 미리보기 아래의 5견본 팔레트 를 사용합니다. HSL 명도를 10포인트 단위로 이동해 darker, dark, base, light, lighter 변형을 만듭니다. 호버/활성 상태나 단일 브랜드 색에서 톤 스케일을 만들 때 편리합니다.
  5. 상태 줄은 변환을 확인하거나 입력이 파싱되지 않으면 잘못된 색상 메시지를 보고합니다.

주요 기능#

  • 세 가지 형식 입력, 네 가지 반환. HEX, rgb(), 또는 hsl()을 붙여넣고 한 번에 HEX, RGB, HSL, CSS 변수 선언을 돌려받습니다.
  • 알파 인식. 8자리 HEX(#rrggbbaa)와 rgba()/hsla() 입력은 알파 채널을 출력까지 운반하여 반투명 색이 올바르게 왕복합니다.
  • 톤 팔레트 생성기. 5단계 밝게/어둡게 행은 통조림 램프가 아니라 색 자체의 HSL에서 파생됩니다. 항상 같은 계열로 보입니다.
  • 복사 가능한 CSS 변수. --color-brand: #4f46e5; 줄이 :root 블록에 바로 떨어지며, 나중에 토큰 이름으로 바꾸면 됩니다.
  • 100% 클라이언트 사이드. 백엔드도, 네트워크 요청도 없습니다. 브랜드 색은 페이지를 떠나지 않습니다.

사용 예#

페이지는 인디고 #4f46e5로 로드됩니다. 그 입력에서 네 필드가 다음과 같이 채워집니다.

HEX:        #4f46e5
RGB:        rgb(79, 70, 229)
HSL:        hsl(243, 75%, 59%)
CSS var:    --color-brand: #4f46e5;

HSL 형태 hsl(243, 75%, 59%)가 문장처럼 읽히는 것에 주목하세요. 색상 243(색환에서 청보라 각도), 채도 75%(꽤 선명), 명도 59%(중간 톤, 중간 회색보다 약간 밝음). 디자이너가 “호버 상태용으로 살짝 어둡게 해 줘”라고 한다면 59를 49로 내려 hsl(243, 75%, 49%)를 얻을 수 있습니다. 그리고 실제로 팔레트 생성기가 미리보기 아래에 만드는 dark 견본이 바로 그것이며, 곁에 69%의 light와 39%, 79%의 극단이 있습니다.

이미 가진 CSS 변수에서 시작한다면 텍스트 필드에 값을 붙여넣으세요. rgba(79, 70, 229, 0.5)는 같은 인디고의 50% 불투명도로 파싱되고 HEX 출력은 #4f46e580(8자리, 알파 0x80 ≈ 0.5)이 되어 HEX를 선호하는 스타일시트에 떨어뜨릴 준비가 됩니다.

FAQ#

디자이너가 #4f46e5를 줬는데 개발자 도구는 rgb(79, 70, 229)를 보여요. 같은 색인가요?#

네, 정확히 같습니다. HEX와 RGB는 같은 sRGB 값의 두 가지 직렬화입니다. #4f46e5는 바이트 쌍 4f, 46, e5로 쪼개지며, 이는 79, 70, 229의 16진입니다. 문맥이 선호하는 쪽을 쓰세요. CSS는 둘을 동일하게 취급합니다.

언제 HEX 대신 HSL에 손을 뻗어야 하나요?#

필요할 때마다입니다. 어둡게, 밝게, 채도 낮추기, 또는 브랜드 색 하나에서 5단계 팔레트 만들기는 HSL에서 숫자 하나이고 RGB에서는 좌절스러운 세 방향 균형입니다. HEX는 저장과 복붙에 최적이고, HSL은 편집에 최적입니다.

매우 어둡거나 밝은 색에서 팔레트가 가끔 고르지 않게 보이는 이유는?#

생성기가 명도를 고정 10포인트 단위로 이동하고 0%와 100%에서 클램프하기 때문입니다. 그 한계 근처에서는 더 움직일 공간이 없어 단계가 압축됩니다. 95% 명도의 색은 순백에 닿기 전에 “밝게” 방향으로 5포인트만 남습니다. 이는 HSL 공간 자체의 속성이지 버그가 아닙니다.

이 도구는 P3 또는 광색역(wide-gamut) 색을 지원하나요?#

아닙니다. CSS HEX/RGB/HSL이 기술하는 sRGB 공간에서 동작하며, 웹 작업의 대부분을 덮습니다. Display-P3와 color() 문법은 다른 파이프라인이며 여기서 파싱되지 않습니다.