Pick a color from the wheel or paste a value, and this tool converts it into every format you need at once: HEX, RGB, HSL, and CMYK. It also builds a shade ramp so you can pull lighter tints and darker shades of the same hue. Everything runs in your browser, so no color you test is ever uploaded.
The four color formats, and when each one wins
- HEX — Hexadecimal RGB, the default for CSS and design tools.
#7C3AEDpacks red (7C= 124), green (3A= 58), and blue (ED= 237) into six digits. Reach for it in stylesheets and Figma. - RGB — The same values in decimal,
rgb(124, 58, 237). Use it when you need an alpha channel:rgba(124, 58, 237, 0.5)gives you 50% opacity. - HSL — Hue, saturation, lightness, e.g.
hsl(263, 83%, 58%). The one format a human can actually reason about — lower the lightness to darken, lower the saturation to mute. - CMYK — Cyan, magenta, yellow, key/black for print, e.g.
cmyk(48%, 76%, 0%, 7%). Only relevant when a file is going to a physical printer.
How to read a hex code without a converter
A hex code is just three pairs of digits: red, green, blue. Each pair runs from 00 (none) to FF (255, full). A few shortcuts make them readable at a glance:
#000000is black (no light),#FFFFFFis white (all light).- Equal pairs mean a neutral gray —
#888888,#CCCCCC. - The bigger the first pair, the redder; the bigger the last, the bluer.
- Three-digit shorthand like
#F00expands to#FF0000— each digit is doubled.
Building a shade palette that looks intentional
My recommendation: never eyeball tints and shades of a brand color by hand. Lock the hue, keep saturation roughly constant, and step the lightness. A ramp from about 95% lightness down to 15% in ten-point jumps gives you the 50–900 scale that Tailwind and most design systems use. That consistency is what makes a UI feel designed rather than assembled.
Check contrast before you ship a color
A color that looks great in isolation can fail accessibility. WCAG AA needs a contrast ratio of at least 4.5:1 for normal body text against its background (3:1 for large text). Light gray text on white is the most common failure — pretty, but unreadable for a lot of people. Always verify text colors against their real background.
When RGB and CMYK disagree
Here is the gotcha that surprises people: a color that glows on screen can print dull. RGB is additive — it mixes light — so it reaches vivid neons and bright blues that subtractive CMYK ink physically cannot reproduce. If you design in HEX and later send artwork to a printer, expect saturated colors to shift toward muddier versions. Don't pick your brand color from a screen alone if it will live on packaging or business cards; check a printed proof first.
FAQ
What is a hex color code?
+
A hex code is a six-digit hexadecimal number describing a color's red, green, and blue channels, prefixed with #. In #7C3AED, 7C is red (124), 3A is green (58), and ED is blue (237). Each pair runs from 00 to FF.
What is the difference between RGB and CMYK?
+
RGB is additive light for screens; CMYK is subtractive ink for print. RGB reaches more vivid colors than CMYK can reproduce, so a bright screen color often looks duller once printed. Use RGB or HEX for the web and CMYK only when a file is going to a printer.
Why should I use HSL?
+
HSL separates hue, saturation, and lightness, so adjusting a color by hand is intuitive. Lower the lightness to darken; lower the saturation to mute. That beats juggling three RGB channels at once when you want a controlled variation.
How do I create a shade palette?
+
Keep the hue fixed and step the lightness. A scale from around 95% lightness (lightest tint) down to 15% (darkest shade) in ten-point increments produces the 50–900 ramp used by Tailwind and most design systems.
Is the Color Picker free and private?
+
Yes. It's 100% free with no signup, and it runs entirely in your browser — no color values are uploaded, logged, or shared.