Color Converter (HEX, RGB, HSL)

What is Color Converter?

A color converter translates a single color between the formats used across web development and design: HEX (#RRGGBB) for CSS, RGB for canvas and image work, HSL for intuitive lightness/saturation tweaks, and HSV for design tools. Seeing all representations at once — plus a live swatch — makes it easy to grab the exact syntax a given context needs without mental math.

How to convert a color

1. 1Type or paste a color in any supported format (HEX, rgb(), hsl(), or a named color).
2. 2All other formats update instantly, alongside a live preview swatch.
3. 3Adjust HSL lightness/saturation to fine-tune, then read back the HEX.
4. 4Copy the CSS-ready string you need.

Use Cases

Code Examples

HEX:  #3B82F6
RGB:  rgb(59, 130, 246)
HSL:  hsl(217, 91%, 60%)
HSV:  hsv(217, 76%, 96%)

Key Concepts

HEX

A base-16 encoding of red, green, blue channels (#RRGGBB), optionally with alpha (#RRGGBBAA). The most common CSS color syntax.

HSL vs HSV

Both use Hue + Saturation, but HSL's third channel is Lightness (0=black,100=white) while HSV's is Value/brightness. HSL is native to CSS.

Alpha channel

Opacity from 0 (transparent) to 1. Represented as the last pair in 8-digit HEX or the 4th argument in rgba()/hsla().

Tips & Best Practices

• ▸HSL is the easiest format for creating tints/shades: keep hue fixed and adjust lightness.
• ▸3-digit HEX (#39F) is shorthand for 6-digit (#3399FF) — both are valid CSS.
• ▸For accessible text, check contrast ratios (WCAG AA needs 4.5:1) — a converter shows the color, not the contrast.
• ▸Named CSS colors (tomato, rebeccapurple) are convenient but limited; convert to HEX for exact control.