Design

Color Converter

Convert colors between HEX, RGB, and HSL. Includes a color picker, live swatch preview, white/black contrast ratio, and a quick lightness-based palette.

도구 요약

이 도구는 구조화된 입력을 받아 서버 업로드 없이 브라우저에서 결정적인 출력을 반환합니다.

도구 이름: Color Converter
입력 의도: 변환·검증·분석할 원본 콘텐츠를 제공하세요.
출력 의도: 복사, 재사용 또는 디버깅에 적합한 정규화된 출력을 받습니다.
예시 입력: #3b82f6
예시 출력: rgb(59, 130, 246) · hsl(217, 91%, 60%)

PickerHEX

#3b82f6

RGB

HEX

#3b82f6

RGB

rgb(59, 130, 246)

HSL

hsl(217, 91%, 60%)

Contrast on white: 3.68:1 · on black: 5.71:1

Palette

도구 소개

Convert colors between HEX, RGB, and HSL. Includes a color picker, live swatch preview, white/black contrast ratio, and a quick lightness-based palette.

도구 개요

HEX is compact, RGB is intuitive for mixing, and HSL is best for describing tints, shades, and hue shifts. This converter keeps all three in sync as you edit any one. The palette row shows five lightness-shifted variants of your base color, handy for picking hover, focus, or background tints. All computation is pure client-side — nothing is uploaded.

사용 사례

Use Color Converter when you need fast convert hex, rgb, and hsl color formats instantly with a visual picker, palette suggestions, and copyable outputs.
Handle design workflows directly in the browser with no install required.
Support SEO long-tail intent by covering quick checks, troubleshooting, and one-off conversions.

입력/출력 예시

입력 의도

#3b82f6

출력 의도

rgb(59, 130, 246) · hsl(217, 91%, 60%)

입력 의도

#fff

출력 의도

#ffffff · rgb(255, 255, 255) · hsl(0, 0%, 100%)

자주 묻는 질문

Why is my 3-digit HEX auto-expanded?+

3-digit HEX is shorthand for the 6-digit version (#abc → #aabbcc). The tool normalizes to 6 digits so the value matches what CSS actually parses.

What does the contrast ratio mean?+

It is the WCAG luminance contrast ratio between your color and pure white or black. 4.5:1 is the AA threshold for normal text; 7:1 is AAA.

How is the palette generated?+

It takes the base color's HSL value and shifts lightness in ±20% and ±40% steps, keeping hue and saturation constant.

Share this tool

X Facebook LinkedIn WhatsApp Reddit Telegram Email

다른 도구 보기

아래의 Design 카테고리에서 관련 유틸리티를 찾아보세요.

전체 Design 보기