Color Picker & Converter
Pick colors visually and convert between HEX, RGB, HSL, HSV and CMYK.
Invalid color value. Try formats like #FF5733, rgb(255, 87, 51), or hsl(11, 100%, 60%).
Approximate, for digital use — not a substitute for printer-specific color management.
CSS
Color Variations
Generated in HSL by adjusting lightness — not a scientifically or perceptually uniform scale. Click a swatch to copy its hex value.
Color Harmony
Contrast
Against white
Against black
Text Preview
Aa — Normal text
Aa — Large text
Recent Colors
About Color Picker & Converter
A color picker lets you visually select a color and inspect its numerical values across the formats used in design and code. Every format shown here is derived from a single underlying color, so changing any one of them — a hex code, an RGB channel, the hue slider — keeps everything else in sync.
HEX and RGB describe a color as red/green/blue light. HSL and HSV/HSB describe the same color by hue, and either saturation/lightness or saturation/brightness — often more intuitive for picking a color by eye. CMYK approximates how a color would mix from print inks. Everything runs locally in your browser — no color values are ever sent anywhere.
Frequently asked questions
What color formats does this support?+
HEX (3/4/6/8-digit), RGB/RGBA, HSL/HSLA, HSV (also called HSB), CMYK, and OKLCH — all derived live from a single underlying color, so every format always agrees with the others.
Are the conversions mathematically accurate?+
Yes — every conversion (RGB↔HSL, RGB↔HSV, RGB↔CMYK, HEX↔RGB, RGB↔OKLCH) uses the standard formulas rather than approximate lookup tables, verified against known reference values and round-trip tested.
Is the CMYK value accurate for printing?+
It’s a standard digital approximation useful for design work, not a substitute for printer- and paper-specific color management — real print output depends on your specific printer, ink, and paper.
Can I paste a color value directly?+
Yes — paste a HEX code, rgb()/rgba(), or hsl()/hsla() value (legacy comma or modern space syntax) into the input field and every format updates immediately.
How is the contrast ratio calculated?+
Using the standard WCAG 2.x relative luminance and contrast ratio formulas, shown against both white and black with pass/fail levels for normal and large text — not a generic "accessible/not accessible" label, since that depends on the actual foreground/background pairing and text size.
Does this tool store or send my color choices anywhere?+
No — every calculation happens locally in your browser. Recent colors are saved only to your own browser’s local storage, never to a server.
Is this tool free?+
Yes, completely free with no sign-up.
Related tools
Developer
HTML CSS JS Playground
A modern browser-based playground for writing HTML, CSS and JavaScript with an instant live preview.
Utilities
QR Code Generator
Generate QR codes for URLs, text, contact information, Wi-Fi, email, phone numbers, SMS, WhatsApp, Viber, locations and more.
Text
Online Text Editor
A modern browser-based plain text editor for writing, editing, cleaning and exporting text.