Color Picker & Converter (HEX / RGB / HSL / CMYK)

Pick colors visually and convert between HEX, RGB, HSL, and CMYK. Generate color palettes and accessibility contrast ratios.

Free Always No Account Needed 100% Client-Side
HEX#22C55E
RGBrgb(34, 197, 94)
RGBArgba(34, 197, 94, 1)
HSLhsl(142, 71%, 45%)
CMYKcmyk(83%, 0%, 52%, 23%)

WCAG Contrast Checker

Sample Text

2.28:1
Fail

Tints & Shades

About this tool

Working with colors in web design and CSS requires converting between formats. Different tools and systems use different color representations.

This tool provides:

Visual Color Picker — interactive color wheel and sliders to pick any color intuitively.

Format Conversion — convert between: - HEX (#ff5733, #f53) - RGB / RGBA (rgb(255, 87, 51)) - HSL / HSLA (hsl(11, 100%, 60%)) - HSV (for design tools like Figma/Photoshop) - CMYK (for print design) - CSS color names (red, tomato, coral)

Contrast Checker — enter a foreground and background color to check the WCAG contrast ratio and accessibility rating (AA/AAA pass/fail).

Color Palette — generate tints and shades of any color for building a complete design palette.

Frequently Asked Questions

What is the difference between RGB and HSL?
RGB describes colors by red/green/blue channel intensities. HSL describes them by hue (color wheel angle), saturation (intensity), and lightness — more intuitive for design.
What is WCAG contrast ratio?
WCAG (Web Content Accessibility Guidelines) requires at least 4.5:1 contrast ratio for normal text (AA) and 7:1 for AAA. This matters for readability for visually impaired users.
What is CMYK?
CMYK (Cyan, Magenta, Yellow, Key/Black) is used in print design. It's a subtractive color model — mixing inks absorbs light rather than emitting it.
Can CSS use HSL colors directly?
Yes! CSS natively supports hsl(200, 100%, 50%) and the newer oklch() and lch() formats for more perceptually uniform colors.

Related Tools

CSS Gradient

Generate linear, radial, and conic CSS gradients with a visual editor. Copy CSS code instantly.

Box Shadow Generator

Visually generate CSS box-shadow and border-radius. Multiple shadow layers, live preview, copy CSS instantly.

CSS Minifier

Minify or beautify CSS. Remove comments, collapse whitespace, shorten values. Shows compression percentage saved.

Base Converter

Convert numbers between binary, octal, decimal, and hexadecimal instantly. Supports large numbers and bitwise info.