Switch tool

Color Converter

HEX ↔ RGB ↔ HSL with color picker and live swatch.

HEX

RGB

rgb(255, 87, 51)

HSL

hsl(11, 100%, 60%)

HSV

hsv(11, 80%, 100%)

CMYK

cmyk(0%, 66%, 80%, 0%)

HWB

hwb(11 20% 0%)

Parse any color (incl. CSS name)

Color picker

Closest Tailwind: red-500 · ΔE≈30

Contrast (vs.)

Aa Bb 1234

Ratio

3.15 : 1

WCAG AA (normal)

FAIL

WCAG AAA (normal)

FAIL

WCAG AA (large)

PASS

Palettes

Shades

Complementary

Triad

Analogous

How to use

Purpose

Online color value converter supporting HEX (#FFAA00), RGB, RGBA (with alpha), HSL, HSV, CMYK (print), Pantone lookup. Includes visual color picker with live preview, CSS color name lookup and reverse lookup, contrast ratio calculation (WCAG AA / AAA), color recommendations (complementary, triadic, analogous). All conversion runs locally.

Steps

Input color: HEX (#FFAA00 or #FA0 short), RGB, RGBA, HSL, color name
Tool auto-detects format and outputs all formats simultaneously
Visual color picker: hue/saturation/lightness sliders update in real time
Alpha slider: 0-1 float or 00-FF hex
Color name reverse: paste RGB, see closest CSS color name
Contrast: pick two colors, see if they meet WCAG AA (4.5:1) or AAA (7:1)
Color recommendations: complementary, analogous, triadic, etc.
One-click copy: HEX, CSS variable declaration, Tailwind class

FAQ

What is the difference between 3-digit (#F00) and 6-digit (#FF0000) hex?: Functionally identical. #F00 = #FF0000 = pure red. #ABC = #AABBCC (each digit repeated). Short form can express only 4096 colors. Production code recommends 6-digit (clearer); short form is fine for quick tests.
Why use HSL over RGB?: HSL (Hue, Saturation, Lightness) matches human visual intuition. Adjust lightness without changing the color identity; adjust saturation alone; hue is a color-wheel angle (0=red, 120=green, 240=blue). RGB requires changing all three to lighten a red. CSS theme switching and palette generation prefer HSL.
What is CMYK for? Do web designers use it?: CMYK (cyan/magenta/yellow/black) is print four-color used for paper printing (magazines, posters, business cards). Screens use RGB (additive light primaries). Web/app design does not need CMYK. If sending a web design to print, use HEX→CMYK here — but actual printed color and screen color will not match exactly (different gamuts).
What contrast ratio is sufficient? WCAG AA vs AAA?: WCAG accessibility defines text-vs-background contrast. AA (minimum): normal text 4.5:1, large text (18pt+) 3:1. AAA (enhanced): normal 7:1, large 4.5:1. Dark backgrounds with white text usually 18+ (max 21:1). The tool labels output AA / AAA / FAIL.
How to use CSS variables with hex colors?: Declare: --primary: #FFAA00; Use: color: var(--primary). Transparency trick: CSS cannot do `var(--primary, 0.5)`. Use color-mix(in srgb, var(--primary) 50%, transparent) or split into R/G/B variables and recompose rgba(). The "CSS variable" copy mode outputs full declarations.

Use cases

Web dev color picking: extract from Figma/PSD, convert to CSS HEX
Theme design: generate light/dark palettes via HSL adjustments
Accessibility audit: check text/button contrast meets WCAG AA
CSS variables: convert design tokens to custom properties in bulk
Print output: web design HEX to CMYK for press

Use cases

Web color picking, theme palettes, accessibility audit, CSS variables, print conversion. Frontend, designers, UX engineers. Multi-format conversion, WCAG-labeled contrast, palette recommendations, CSS variable output are the differentiators.