Color Converter

Color Converter — Convert Between HEX, RGB & HSL

Web and design work constantly moves between three ways of writing the same color: HEX, RGB, and HSL. A design tool might hand you a HEX code, your CSS uses RGB, and you want HSL so you can nudge the lightness for a hover state. This color converter keeps all three formats in sync at once — change any of them, or use the color picker, and the rest update instantly alongside a live preview swatch.

HEX is the six-digit hexadecimal notation (like #4F46E5) used throughout web design and accepted everywhere in CSS. RGB describes a color as red, green, and blue channels from 0 to 255, which maps directly to how screens emit light. HSL — hue, saturation, and lightness — is the most intuitive format for humans to adjust by hand: spin the hue to change the color, drop the saturation to mute it, or raise the lightness to create a tint, all without guessing at hex digits.

Every field is editable. Type a HEX code, set individual R, G, and B values, or dial in HSL numbers, and the converter recalculates the others immediately. Each output format has its own copy button so you can drop the exact string straight into your stylesheet, design file, or code. Three- and six-digit HEX codes are both accepted, and invalid input is simply ignored so the preview never breaks.

Common uses include converting a brand HEX color into RGB for a CSS gradient, generating lighter or darker shades by adjusting HSL lightness, matching a color from a screenshot, building a consistent palette, and translating values between design software and code. Everything runs in your browser — nothing is uploaded or stored.

How to Use the Color Converter

1. Pick a color with the swatch picker, or type a value into any field.
2. Edit the HEX code, the R/G/B numbers, or the H/S/L numbers.
3. Watch all formats and the preview swatch update in sync.
4. Click "Copy" beside HEX, RGB, or HSL to copy that value.