색상 변환기
HEX, RGB, HSL 색상 코드를 실시간으로 상호 변환하고 미리보기합니다.
색상 변환기는 HEX, RGB, HSL 색상 코드를 실시간으로 상호 변환하고 미리보기를 제공하는 도구입니다. 웹 디자인, 그래픽 작업, CSS 코딩 등 색상 코드가 필요한 모든 작업에서 활용할 수 있습니다. 색상 피커로 직접 색상을 선택하거나, HEX/RGB/HSL 값을 직접 입력하면 다른 형식으로 즉시 변환됩니다. 큰 미리보기 영역에서 선택한 색상을 직관적으로 확인할 수 있습니다.
입력
workflow
사용 방법
약 10초
입력 형식 선택
HEX, RGB, HSL 중 입력할 형식을 선택합니다.
색상 값 입력
색상 코드를 입력하거나 컬러 피커를 사용합니다.
결과 확인
다른 형식의 색상 코드와 미리보기를 확인합니다.
principle
계산 원리
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°) 등의 관계를 직관적으로 파악할 수 있습니다.
faq
자주 묻는 질문
cases
실생활 예시
CSS 색상 변환
디자이너가 HEX 코드 #3B82F6을 전달했지만, CSS에서 투명도를 주려면 RGB가 필요합니다.
#3B82F6 = rgb(59, 130, 246)이므로, rgba(59, 130, 246, 0.5)로 50% 투명도를 줄 수 있습니다.
색상 톤 조절
기존 색상을 약간 밝게 만들고 싶습니다.
HSL에서 L(명도) 값만 올리면 됩니다. hsl(217, 91%, 60%) → hsl(217, 91%, 75%)로 변경하면 밝아집니다.
브랜드 컬러 팔레트 관리
회사 브랜드 색상이 #1E40AF(진한 파랑)인데, 배경용으로 밝은 버전이 필요합니다.
HSL로 변환하면 hsl(224, 70%, 40%)이고, 명도를 90%로 올리면 hsl(224, 70%, 90%) = #D4DEF7로 은은한 배경색을 만들 수 있습니다.
보색 찾기
메인 색상 #FF6B35(주황)의 보색을 찾으려 합니다.
HSL로 변환 후 H(색상) 값에 180을 더하면 보색입니다. H=17 → H=197로 변경하면 보색(청록 계열)을 얻을 수 있습니다.
glossary
용어 사전
- 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 웹 접근성 기준에서 텍스트 가독성 판단에 사용됩니다.
next tools