색상 변환기

사용 방법

1. HEX·RGB·HSL 중 하나의 입력창에 값을 입력합니다.
2. 다른 형식으로 자동 변환됩니다.
3. 색상 미리보기로 색상을 확인할 수 있습니다.
4. 컬러 피커를 사용하여 시각적으로 색상을 선택할 수도 있습니다.

색상 코드에 대하여

웹 개발에서는 색상 표현에 HEX·RGB·HSL이 사용됩니다. 용도에 따라 형식을 구분해야 할 때가 있습니다. 디자인 도구나 기존 코드와 다른 형식이 필요한 경우 이 도구를 사용하십시오.

색 하나를 직접 변환해 보기

#1a73e8을 예로 듭니다. 16진수 두 자리가 한 채널이어서 1a = 26, 73 = 115, e8 = 232이고, RGB는 rgb(26, 115, 232)입니다.

HSL을 구하려면 각 채널을 0~1로 바꾸고 최댓값(0.910, 파랑)과 최솟값(0.102, 빨강)을 찾습니다.

• 명도 = (최대 + 최소) / 2 = 0.506 → 51%
• 채도 = (최대 − 최소) / (2 − 최대 − 최소) = 0.817 → 82% (명도가 50%보다 클 때 쓰는 식)
• 색상: 파랑이 가장 크므로 색상 = 60 × ((R − G) / (최대 − 최소) + 4) = 214.1 → 214

도구는 hsl(214, 82%, 51%)를 보여 줍니다. 공식은 CSS Color Module Level 4와 같습니다.

제한 사항

• 투명도를 지원하지 않습니다. 8자리 16진수(#1a73e880)는 무효로 처리되고, rgba(26, 115, 232, 0.5)의 투명도는 무시됩니다.
• HSL은 정수로 반올림됩니다. hsl(214, 82%, 51%)를 입력하면 #1a73e8이 아니라 #1c74e9가 나옵니다. 반올림한 값으로는 원래 색을 정확히 가리킬 수 없기 때문입니다. HEX 값을 기준으로 삼으세요.
• 세 가지 형식만 지원합니다: HEX(3자리 또는 6자리, #abc는 #aabbcc로 확장), RGB, HSL. HSB/HSV, HWB, OKLCH는 지원하지 않습니다.