What color formats does this converter support?

The converter supports HEX (#rrggbb), RGB (red, green, blue 0-255), HSL (hue 0-360, saturation %, lightness %), and HSB/HSV (hue, saturation, brightness). All formats can be converted to any other format instantly.

What is the difference between HSL and HSB/HSV?

Both use hue and saturation, but the third value differs. HSL uses Lightness (50% = pure color, 100% = white). HSB/HSV uses Brightness/Value (100% = pure color, 0% = black). HSL is used in CSS; HSB is used in design tools like Photoshop and Figma.

Why does my HEX color look different in different apps?

Color appearance varies by display calibration, color profile (sRGB vs P3), and rendering engine. The same HEX value can look slightly different on different monitors. For consistent results, use a calibrated display and work in the sRGB color space.

What does the alpha channel do?

Alpha controls transparency. An alpha of 1 (or 255 in 0-255 scale) is fully opaque. An alpha of 0 is fully transparent. In CSS, use rgba() or hsla() to include transparency. HEX supports alpha with an 8-digit format (#rrggbbaa).

How do I find the HEX code for a color on my screen?

Use the Image Color Picker tool on this site to pick a color from any image. For colors anywhere on your screen, use your operating system's built-in color picker or a browser extension like ColorZilla.

Color Converter - HEX, RGB, HSL, CMYK

Convert colors between HEX, RGB, HSL, CMYK formats and check WCAG contrast ratios.

Color Converter — HEX, RGB, HSL, CMYK

Every design tool, browser, and print system speaks a different color dialect. Figma gives you HSL. Your CSS needs HEX. Your printer wants CMYK. This converter translates instantly between all of them — no formulas, no guesswork.

Color format comparison — when to use each

Format	Example	Range	Best for
HEX	`#f97316`	#000000 – #ffffff	CSS, HTML, design tokens, most common on the web
RGB	`rgb(249, 115, 22)`	0–255 per channel	CSS, canvas/WebGL, image processing, JavaScript manipulation
HSL	`hsl(24, 95%, 53%)`	H: 0–360, S/L: 0–100%	CSS theming, generating tints/shades programmatically, dark mode
HSB / HSV	`hsb(24, 91%, 98%)`	H: 0–360, S/B: 0–100%	Photoshop, Figma, Sketch color pickers — this is what design tools show
CMYK	`cmyk(0, 54, 91, 2)`	0–100% per channel	Print design, InDesign, physical materials — not used in CSS

HSL vs HSB — the one that always confuses people

Both use Hue (0–360°) and Saturation, but the third value means completely different things. In HSL, Lightness of 50% is the pure colour, 0% is black, 100% is white. In HSB (also called HSV), Brightness of 100% is the pure colour, 0% is black — and there's no direct "white" slider. CSS uses HSL. Photoshop and Figma use HSB. Converting between them requires a formula, not just renaming the value.

Why the same HEX looks different on different screens

Colour appearance varies by display calibration, colour profile (sRGB vs Display P3), and rendering engine. A wide-gamut P3 display can show colours that sRGB can't represent — so the same HEX value looks more vivid on a MacBook Pro than on a standard monitor. For consistent web work, design in sRGB. The color-gamut CSS media query lets you serve P3 colours to wide-gamut displays while providing sRGB fallbacks.

WCAG contrast and accessibility

The contrast ratio between text and background determines whether your design meets WCAG accessibility standards. WCAG 2.1 requires:

4.5:1 — normal text (Level AA, the legal minimum in most jurisdictions)
3:1 — large text (18pt+ or 14pt+ bold) at Level AA
7:1 — normal text at Level AAA (enhanced accessibility)

White text on the orange #f97316 fails AA (contrast ~2.9:1). Black text on the same orange passes AA (contrast ~3.1:1 for large text). Use the contrast checker tab to test your specific colour combinations before shipping.

All processing runs in your browser

No colour data is sent to any server. Everything stays on your device.

Frequently Asked Questions

HEX (#rrggbb), RGB (0–255 per channel), HSL (hue 0–360, saturation %, lightness %), HSB/HSV (hue, saturation, brightness), and CMYK (0–100% per channel). All formats convert to any other instantly.

Both use hue and saturation, but the third value differs. HSL Lightness: 50% = pure colour, 100% = white. HSB Brightness: 100% = pure colour, 0% = black. HSL is used in CSS; HSB is used in Photoshop and Figma.

Colour appearance varies by display calibration and colour profile (sRGB vs P3). The same HEX value looks more vivid on a wide-gamut display. For consistent results, work in the sRGB colour space.

Alpha controls transparency. 1 (or 255) is fully opaque; 0 is fully transparent. In CSS use rgba() or hsla(). HEX supports alpha with an 8-digit format: #rrggbbaa.

Use the Image Color Picker tool on this site to pick a colour from any image. For colours anywhere on your screen, use your OS colour picker or a browser extension like ColorZilla.

🎨 Color Converter & Contrast Checker