Color Picker & Converter — HEX, RGB, HSL & CMYK
Pick a color, then convert HEX to RGB, HSL, HSV, and CMYK instantly. Copy any format, build tints and shades, and check WCAG contrast — free and in your browser.
HEX
#2563EB
RGB
rgb(37, 99, 235)
HSL
hsl(221, 83%, 53%)
HSV
hsv(221, 84%, 92%)
CMYK
cmyk(84%, 58%, 0%, 8%)
Tints & Shades (click to select)
WCAG Contrast Checker
5.17:1
On White
4.06:1
On Black
AA needs 4.5:1 for normal text (3:1 for large/bold ≥18.66px). AAA needs 7:1 (4.5:1 for large).
About This Tool
Every color format, one place
Designers and developers constantly translate colors between formats — HEX for CSS, RGB for canvas, HSL for adjusting lightness, CMYK for print. This tool shows all of them at once and copies any value with one click.
Need the same color as a swatch in a document? Generate a QR or graphic with our HTML to Image tool, or format your stylesheet with the Code Beautifier.
5 Formats
HEX, RGB, HSL, HSV, and CMYK — all updated live as you pick.
One-Click Copy
Copy any format string ready to paste into CSS or design tools.
Tints & Shades
Instantly generate lighter and darker variations of any color.
WCAG Contrast
Check AA/AAA accessibility contrast on white and black.
Quick Start
How to Convert a Color
Pick a Color
Use the picker, RGB sliders, or paste a HEX code.
Read Values
HEX, RGB, HSL, HSV, and CMYK update instantly.
Copy Format
Click copy next to any format you need.
Check Contrast
See the WCAG ratio and AA/AAA pass badges.
Use Cases
When to Use a Color Picker
Converting and checking colors is a daily task in web design, branding, and front-end development.
Writing CSS
Grab a HEX or HSL value for a CSS color property, or tweak lightness with the HSL slider.
Matching a Brand Color
Paste a brand HEX code and read its exact RGB and CMYK equivalents for print and screen.
Accessibility Audits
Confirm text color meets WCAG AA or AAA contrast before shipping a design.
Building a Palette
Use the tints and shades row to generate a consistent set of lighter and darker variants.
Preparing for Print
Get a CMYK reference value from any on-screen RGB or HEX color.
Design Hand-off
Copy clean format strings to drop into Figma, a style guide, or a developer ticket.
Reference
Color Formats Explained
A 6-digit hexadecimal code (two digits each for red, green, blue). The most common way to write colors in CSS and HTML.
Red, Green, Blue channels from 0–255. Used in CSS, canvas, and most screen rendering. Add an alpha channel for transparency (rgba).
Hue (0–360°), Saturation, Lightness. Intuitive for adjusting a color — raise lightness for a tint, lower it for a shade. Native in CSS.
Hue, Saturation, Value (Brightness). The model used by most design and image-editing tools' color pickers.
Cyan, Magenta, Yellow, Key (black). The subtractive model used for print. A mathematical reference — proof with your print shop.
How distinct two colors are in luminance. WCAG uses it to grade text readability — AA needs 4.5:1, AAA needs 7:1 for normal text.
Conversions
Common Color Conversions
Pick any color above and every format updates at once. Here is what each common conversion looks like, using #2563EB as the example.
HEX to RGB
#2563EB → rgb(37, 99, 235)
Split the hex code into red, green, and blue pairs and convert each from base-16 to 0–255. The standard format for CSS and canvas.
RGB to HEX
rgb(37, 99, 235) → #2563EB
Convert each 0–255 channel to a two-digit hexadecimal value and join them. The compact format for HTML and stylesheets.
HEX to HSL
#2563EB → hsl(221, 83%, 53%)
Go via RGB, then express the color as hue, saturation, and lightness — ideal for tweaking brightness in CSS.
RGB to HSL
rgb(37, 99, 235) → hsl(221, 83%, 53%)
Re-map the channels to hue/saturation/lightness so you can adjust one property without touching the others.
RGB to CMYK
rgb(37, 99, 235) → cmyk(84%, 58%, 0%, 8%)
Convert the additive screen color to the subtractive cyan/magenta/yellow/key model used for print — a reference value.
HEX to HSV
#2563EB → hsv(221, 84%, 92%)
Express the color as hue, saturation, and value/brightness — the model most design tools' color pickers use.
FAQ
Frequently Asked Questions
Paste your HEX code (e.g. #2563EB) into the input box. The RGB value — rgb(37, 99, 235) — appears instantly, along with HSL, HSV, and CMYK. Click copy next to RGB to grab it.
Both start with Hue. HSL uses Saturation and Lightness (common in CSS); HSV/HSB uses Saturation and Value/Brightness (common in design tools). This tool shows both.
It's a standard mathematical conversion from RGB — a good reference, but exact print color depends on your printer's ICC profile. Always proof critical work with the print shop.
It grades text readability against a background. AA needs 4.5:1 for normal text (3:1 for large), AAA needs 7:1. The tool shows your color's ratio on white and black with pass badges.
Yes. All conversion runs in your browser with JavaScript, so once the page loads it keeps working with no connection. Nothing is uploaded to a server.
Yes. The Tints & Shades row shows lighter variations (toward white) and darker variations (toward black). Click any swatch to make it the active color.