색상 변환기

HEX, RGB, HSL 색상 코드를 실시간으로 상호 변환하고 미리보기합니다.

입력

HEX

#3B82F6

HEX #3B82F6

  • RGBrgb(59, 130, 246)
  • HSLhsl(217, 91%, 60%)

HEX #3B82F6

풀이 보기3단계
결과 공유하기

색상 변환기는 HEX, RGB, HSL 색상 코드를 실시간으로 상호 변환하고 미리보기를 제공하는 도구입니다. 웹 디자인, 그래픽 작업, CSS 코딩 등 색상 코드가 필요한 모든 작업에서 활용할 수 있습니다. 색상 피커로 직접 색상을 선택하거나, HEX/RGB/HSL 값을 직접 입력하면 다른 형식으로 즉시 변환됩니다. 큰 미리보기 영역에서 선택한 색상을 직관적으로 확인할 수 있습니다.

실생활 예시

이럴 때 이렇게 계산해요.

  • CSS 색상 변환

    사례 01

    디자이너가 HEX 코드 #3B82F6을 전달했지만, CSS에서 투명도를 주려면 RGB가 필요합니다.

    #3B82F6 = rgb(59, 130, 246)이므로, rgba(59, 130, 246, 0.5)로 50% 투명도를 줄 수 있습니다.

  • 색상 톤 조절

    사례 02

    기존 색상을 약간 밝게 만들고 싶습니다.

    HSL에서 L(명도) 값만 올리면 됩니다. hsl(217, 91%, 60%) → hsl(217, 91%, 75%)로 변경하면 밝아집니다.

  • 브랜드 컬러 팔레트 관리

    사례 03

    회사 브랜드 색상이 #1E40AF(진한 파랑)인데, 배경용으로 밝은 버전이 필요합니다.

    HSL로 변환하면 hsl(226, 71%, 40%)이고, 명도를 90%로 올리면 hsl(226, 71%, 90%) = #D3DCF8로 은은한 배경색을 만들 수 있습니다.

  • 보색 찾기

    사례 04

    메인 색상 #FF6B35(주황)의 보색을 찾으려 합니다.

    HSL로 변환 후 H(색상) 값에 180을 더하면 보색입니다. H=16 → H=196으로 변경하면 보색(청록 계열)을 얻을 수 있습니다.

같이 쓰면 좋아요. 옆으로 넘겨 보세요.

자주 묻는 질문

궁금한 거 모아 봤어요. 눌러서 펼쳐 보세요.

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

HEX는 16진수 6자리로 색상을 표현합니다(#FF0000). RGB는 빨강/초록/파랑의 강도(0-255)로 표현합니다. HSL은 색상(Hue, 0-360), 채도(Saturation, 0-100%), 명도(Lightness, 0-100%)로 표현하여 직관적인 색상 조절이 가능합니다.

웹에서 주로 어떤 색상 형식을 사용하나요?

CSS에서는 HEX(#3B82F6), RGB(rgb(59, 130, 246)), HSL(hsl(217, 91%, 60%)) 모두 사용 가능합니다. HEX가 가장 흔하지만, HSL이 색상 조절에 가장 직관적입니다.

3자리 HEX 코드도 지원하나요?

네, #F00 같은 3자리 축약형도 지원합니다. 내부적으로 #FF0000으로 확장하여 처리합니다.

CMYK 색상 모델은 지원하나요?

현재 이 도구는 화면(디스플레이)용 색상 모델인 HEX, RGB, HSL만 지원합니다. CMYK는 인쇄용 색상 모델로, RGB를 CMYK로 정확히 변환하려면 ICC 프로파일이 필요합니다. 단순 공식 변환은 가능하지만 실제 인쇄 색상과 차이가 날 수 있습니다.

HSL이 HSV(HSB)와 다른 점은?

HSL과 HSV는 모두 색상(H)은 동일하지만, S(채도)와 밝기 축이 다릅니다. HSL의 L=50%가 순색이고 L=100%는 흰색, HSV의 V=100%가 순색이고 V=0%가 검은색입니다. CSS에서는 HSL을 표준으로 사용합니다.

접근성(색각 이상)을 고려한 색상 선택은 어떻게 하나요?

색각 이상자(전체 남성의 약 8%)를 고려하여 빨강-초록 조합을 피하고, 색상 외에 명도 차이, 패턴, 텍스트 등으로 정보를 전달하세요. WCAG 기준 명도 대비 4.5:1 이상을 권장합니다.

웹 안전 색상(Web Safe Colors)이란?

1990년대 256색 모니터 시대에 모든 환경에서 동일하게 표시되는 216가지 색상을 말합니다. R, G, B 각각 00, 33, 66, 99, CC, FF의 6단계 조합입니다. 현대에는 거의 의미 없지만, #336699 같은 색상은 여전히 웹에서 인기 있습니다.

계산 원리

RGB → HEX 변환: 각 R, G, B 값(0~255)을 16진수 2자리로 변환하여 연결합니다. R=59 → 3B, G=130 → 82, B=246 → F6 → #3B82F6. 역변환은 HEX를 2자리씩 끊어 10진수로 변환합니다.

RGB → HSL 변환: R, G, B를 0~1 범위로 정규화 후, Cmax = max(R,G,B), Cmin = min(R,G,B), Δ = Cmax - Cmin으로 정의합니다. L = (Cmax + Cmin) / 2. S = Δ가 0이면 0, 아니면 Δ / (1 - |2L - 1|). H는 Cmax가 R이면 60 × ((G-B)/Δ mod 6), G이면 60 × ((B-R)/Δ + 2), B이면 60 × ((R-G)/Δ + 4)로 계산합니다.

HSL → RGB 역변환: C = (1 - |2L - 1|) × S, X = C × (1 - |H/60 mod 2 - 1|), m = L - C/2로 중간값을 구합니다. H 범위에 따라 (R1,G1,B1) = (C,X,0), (X,C,0), (0,C,X), (0,X,C), (X,0,C), (C,0,X) 중 하나를 선택하고, 최종 RGB = (R1+m, G1+m, B1+m) × 255입니다. HSL 모델은 색상환(color wheel) 위의 각도로 H를 표현하여 보색(H+180°), 유사색(H±30°) 등의 관계를 직관적으로 파악할 수 있습니다.

사용 방법

총 소요 시간: 약 10초

  1. 입력 형식 선택

    HEX, RGB, HSL 중 입력할 형식을 선택합니다.

  2. 색상 값 입력

    색상 코드를 입력하거나 컬러 피커를 사용합니다.

  3. 결과 확인

    다른 형식의 색상 코드와 미리보기를 확인합니다.

용어 사전

HEX (16진수 색상 코드)
# 기호 뒤에 6자리 16진수로 RGB 색상을 표현하는 방식입니다(예: #FF0000 = 빨강).
RGB
빨강(Red), 초록(Green), 파랑(Blue) 세 원색의 광량(0~255)으로 색상을 표현하는 가산 혼합 모델입니다.
HSL
색상(Hue, 0~360°), 채도(Saturation, 0~100%), 명도(Lightness, 0~100%)로 색상을 표현하는 모델입니다.
색상환 (Color Wheel)
색상(Hue)을 0~360°의 원형으로 배치한 것으로, 보색은 180° 반대편에 위치합니다.
CMYK
시안(Cyan), 마젠타(Magenta), 노랑(Yellow), 검정(Key)의 감산 혼합 모델로, 인쇄에 사용됩니다.
명도 대비 (Contrast Ratio)
두 색상의 밝기 차이 비율로, WCAG 웹 접근성 기준에서 텍스트 가독성 판단에 사용됩니다.