What color formats are supported?

You can enter a color as HEX, RGB, HSL, HSV, or a CSS color name, and the result shows it converted to HEX, RGB, HSL, and HSV. All conversions happen in real time.

Can I see a preview of the color?

Yes, a live color swatch preview updates as you enter or select colors.

Color Converter — HEX, RGB, HSL, HSV

Color Converter

Convert colors between different formats (HEX, RGB, HSL, HSV) and see a preview.

Results will show here once you enter a color.

What This Tool Does

The same color gets written differently depending on where you're working — a hex code in CSS, an rgb() triple in a design tool, an hsl() value when you're thinking in terms of hue and lightness. Enter a color in whichever format you have it in, and this tool returns that same color expressed in every other format at once, with a live swatch so you can confirm it's the shade you expected.

How to Use It

Type a color into the input field — a hex code like #FF0000, an rgb() or hsl() string, or even a plain CSS color name like "red" — and click Convert Color. The result lists the hex, RGB, HSL, and HSV equivalents together, each with its own small swatch, plus a larger preview swatch at the top labeled with exactly what you typed.

The Formula

This tool is built on tinycolor2, a real, widely used color-parsing and conversion library — it isn't hand-rolled math on this project's side. tinycolor2 first parses whatever string you enter, recognizing hex codes, rgb()/rgba(), hsl()/hsla(), hsv(), and standard CSS color names, then converts its internal representation out to each target format string. The four output formats this tool actually displays are hex, RGB, HSL, and HSV — if you're looking for a CMYK figure specifically, that conversion isn't currently part of the output here.

A Worked Example

Enter #1D4ED8 — this project's own accent blue, and the tool's default example color — and it converts to rgb(29, 78, 216), hsl(224, 76%, 48%), and hsv(224, 87%, 85%). Each of those is a genuinely equivalent description of the exact same color, just expressed on a different scale: RGB as red/green/blue channel intensities from 0–255, HSL as a hue angle plus lightness and saturation percentages, and HSV the same hue with saturation and "value" (brightness) instead of lightness.

FAQ

What color formats are supported?: You can enter a color as HEX, RGB, HSL, HSV, or a CSS color name, and the result shows it converted to HEX, RGB, HSL, and HSV. All conversions happen in real time.
Can I see a preview of the color?: Yes, a live color swatch preview updates as you enter or select colors.