Pick a color, get every format at once
Choose a color with the picker or type a hex code, and this tool instantly shows the matching HEX, RGB and HSL values, a set of shades and tints, and the text color that stays readable on top of it. Everything runs in your browser, so you can experiment freely while working on a site, a slide deck, a brand palette or a social post.
How to use the color picker
- Pick visually: use the color swatch to explore, then fine-tune with the hex box or the RGB sliders. All three formats stay in sync.
- Copy any format: each value has a copy button, so you can drop #3B82F6, rgb(59, 130, 246) or hsl(217, 91%, 60%) straight into your CSS.
- Build a palette: the shades row darkens your color toward black and the tints row lightens it toward white, giving you ready-made variants for backgrounds, borders and hover states.
- Check readability: the preview shows your color with the suggested text color on top, so you can judge contrast before shipping a button or banner.
Choosing colors that work together
- One dominant color: pick a single brand color and use its shades and tints for everything else. A page built from one hue always looks more coherent than one built from five unrelated colors.
- Contrast for text: body text needs strong contrast against its background. If your brand color is mid-tone, use a dark shade of it for text rather than the color itself.
- Restraint with brights: fully saturated colors demand attention, so reserve them for the one action you want people to take, and keep backgrounds muted.
- Test in grayscale: if your design still reads clearly with the color removed, its structure is sound. Color should reinforce hierarchy, not carry it alone.
HEX, RGB and HSL conversions, explained
Converting between formats is pure arithmetic. HEX splits into three pairs of digits, each pair being one channel in base 16: #3B82F6 means red 59, green 130 and blue 246. HSL instead measures hue as an angle around the color wheel (0 is red, 120 is green, 240 is blue), saturation as the distance from gray, and lightness as the distance from black to white. That is why HSL is the easiest format for adjustments: raise lightness for a tint, lower it for a shade, and shift hue to move around the wheel, all without touching three separate channels.