Color Picker
Runs locallyInput stays in your browserFree, no sign-up
One color, three notations, one formula behind them. Hex is just RGB written in hexadecimal: #3B82F6 splits into red 59, green 130 and blue 246, two hex digits per channel, each channel running 0 to 255. HSL describes the same color from another angle: hue is an angle on the color wheel, and 217 degrees lands in blue; saturation of 91% means the color is vivid with little gray in it; lightness of 60% means it sits on the bright side. So #3B82F6, rgb(59, 130, 246) and hsl(217, 91%, 60%) are the same color, and editing any one input updates the other two.
Three jobs cover most uses. The first is writing web styles: take a hex value from a brand guide, paste it into CSS, and pick a hover shade from the darker ramp instead of guessing a darker blue by eye. The second is poster and slide palettes: once the main color is set, the complementary color works for accents and buttons, analogous colors build soft background layers, and triadic colors suit charts that need three equal blocks. The third is choosing text color: whether dark text on a light button or white text on a dark one reads better is a contrast question, and a ratio answers it more reliably than eyeballing it on screen.
Four edge cases catch people out. First, invalid input: #GGGGGG, a five-digit hex, or a channel above 255 is rejected with a message while the previous color stays put — the result is never wiped by a typo. Second, rounding: HSL is shown in whole degrees and whole percentages, so converting back to RGB can shift a channel by 1; that is rounding, not a bug. Third, contrast only measures luminance difference: colored text, thin fonts and small sizes read worse in practice than black or white text at the same ratio, so passing a threshold does not guarantee every reader finds it comfortable. Fourth, the scope of picking: this page uses the browser's built-in system picker, which only selects inside its own dialog — it cannot sample arbitrary pixels from a page or screen. If you need screen sampling, use a browser extension or a system picker; this page does not pretend to offer it.
Check the default color once and the whole page clicks: #3B82F6 is rgb(59, 130, 246) and hsl(217, 91%, 60%), its complement is #F6AF3C, mixing 40% toward white gives the tint #89B4FA and 40% toward black gives the shade #234E94. Black text on this blue scores about 5.71:1 — an AA pass, short of AAA — while white text scores about 3.68:1 and fails AA outright. So for a button in this blue, black text is the safer call. Change the inputs and watch those numbers move, and the conversion and harmony logic is verified.
How to use
- Pick a color: click the swatch to open the system color picker, or type a #-prefixed value in the hex box. Either way, the other formats sync immediately.
- Fine-tune: edit the red, green and blue channels to fix one channel, or change hue to switch tone, saturation to go more vivid or muted, lightness to go brighter or darker.
- Read the result: the HEX, RGB and HSL lines always show the current color. Copy HEX, Copy RGB or Copy HSL to paste into a stylesheet or design tool.
- Choose a harmony: click any swatch in the complementary, analogous, triadic, tint or shade groups and it becomes the current color, ready for further tuning.
- Check contrast: read the black-text and white-text ratios with their AA and AAA verdicts before settling a button and text pairing.
FAQ
Which format should I use in a stylesheet, HEX, RGB or HSL?
They are interchangeable, so use whichever your team finds easiest. HEX is the shortest and most common for pasting into CSS; RGB is clearer when code needs to work channel by channel; HSL is the friendliest for tuning, since changing hue alone switches tone and changing lightness alone adjusts brightness. This page keeps all three in sync, so switching notation never means recalculating.
How do I choose between complementary, analogous and triadic colors?
Use the complementary color for accents and buttons that must stand out, analogous colors for soft background layers, and triadic colors for charts or labels that need three equal blocks. Complementary pairs contrast hardest, so keep the accent to a small area — large blocks of both colors side by side quickly feel harsh.
What contrast ratio is good enough?
Under WCAG, body text passes AA at 4.5:1 and AAA at 7:1, while large text uses a 3:1 bar. This page gives a ratio and verdict for both black and white text; anything below 4.5:1 should not carry body text, and button labels deserve the same check.
Why does converting through HSL change an RGB channel by 1?
HSL is displayed in whole degrees and whole percentages, so converting back to RGB rounds to the nearest integer and a channel can shift by 1. That is rounding, not an error. For an exact reproduction, trust the HEX or RGB value; use HSL for feel-based tuning.
Can this picker sample any pixel on my screen?
No. This page only offers the browser's built-in system picker plus manual input; it never reads screen pixels and never uploads images or color data. For sampling arbitrary pixels from a page or image, use a browser extension or a system picker.