색상 변환기

HEX, RGB, HSL 값을 붙여넣으면 세 가지 형식 모두에서 즉시 변환되며, 코드에 적용하기 전에 정확한 색상을 확인할 수 있는 라이브 견본이 제공됩니다.

이 계산기가 도움이 되었나요?

색상 변환기이란?

색상 변환기는 HEX, RGB, HSL 색상 모델 간에 색상을 변환합니다. CSS, 디자인 도구, 색상 이론을 다루는 웹 개발자와 디자이너에게 필수적입니다. 실시간 미리보기 견본이 포함됩니다.

이 계산기를 사용해야 할 때

디자이너의 Figma 또는 Sketch 색상 사양을 CSS 호환 값으로 변환할 때
디자인 시스템을 구축하고 HEX, RGB, HSL 형식 전반에 걸쳐 일관된 색상 값이 필요할 때
HSL를 사용하여 색상 팔레트 또는 스키마를 만들고 일관된 채도와 명도를 유지할 때
접근성 준수(WCAG AA/AAA 표준)를 위한 색상 대비를 확인할 때
기존 코드의 레거시 색상 값을 일관성을 위해 다른 형식으로 변환할 때
서로 다른 형식에서 색상이 실제로 어떻게 보이는지 검증하여 CSS 색상 문제를 디버깅할 때

단계:

Enter a color value in HEX, RGB, or HSL format.
Select the input format using the tabs.
View converted values in all three formats.
See the live color preview swatch.

공식

HEX → RGB: split #RRGGBB into decimal values RGB → HSL: normalize RGB → find hue/saturation/lightness HSL → RGB: convert via chroma formulas HEX: #RRGGBB (0-255 each) RGB: rgb(R, G, B) (0-255) HSL: hsl(H°, S%, L%) (H: 0-360, S/L: 0-100)

사용 사례

Converting CSS color values
Creating color schemes from base colors
Matching design system colors
Understanding color relationships through HSL

주요 이점

Convert colors between 3 formats instantly
See live color preview
Copy any format with one click
Free no sign-up needed

전문가 팁

Use HSL for intuitive color adjustments
Use HEX for CSS compatibility
Use the preview to verify your color before using it
Keep a reference of common color conversions

피해야 할 일반적인 실수

Forgetting the # prefix for HEX colors
Using RGB values above 255 or below 0
Confusing HSL hue range (0-360) with RGB (0-255)

주요 용어 설명

HEX: Hexadecimal RGB representation
RGB: Red Green Blue color model
HSL: Hue Saturation Lightness model
Color space: Mathematical model for colors

예시

Input: #FF5733 (HEX) → RGB: rgb(255, 87, 51) → HSL: hsl(11, 100%, 60%). Input: hsl(200, 50%, 50%) → RGB: rgb(64, 149, 191) → HEX: #4095BF.

결과 해석 방법

변환기는 세 가지 색상 형식을 지원하고 세 가지 모두에서 동일한 값을 동시에 표시합니다. HEX(#RRGGBB)는 웹 개발에서 가장 일반적인 형식입니다. RGB(rgb(R, G, B))는 개별 색상 채널에 대한 직접적인 제어를 제공합니다. HSL(hsl(H, S%, L%))는 인간에게 가장 직관적입니다. 색상이 색상 계열을 결정하고, 채도가 강도를 제어하며, 명도가 밝기를 제어합니다. 대비 비율 표시기는 전경/배경 색상 조합이 WCAG 접근성 기준을 충족하는지 여부를 보여줍니다. AA 준수에는 일반 텍스트의 경우 최소 4.5:1, 큰 텍스트의 경우 3:1이 필요합니다. AAA 준수에는 일반 텍스트의 경우 최소 7:1, 큰 텍스트의 경우 4.5:1이 필요합니다. 미리보기 견본을 사용하여 색상을 적용하기 전에 시각적으로 확인하세요.

색상 변환기