Color Picker & Converter
Pick colors and convert between HEX, RGB, HSL formats. Generate color palettes.
Color Picker
HEX
RGB
rgb(59, 130, 246)
HSL
hsl(217, 91%, 60%)
Pick colors and convert between HEX, RGB, HSL formats. Generate color palettes.
This picker does three jobs in one place: it lets you choose a color visually, shows the same color as HEX, RGB, and HSL at once, and derives three classic harmonies from it. It is aimed at anyone writing CSS, matching a brand value, or trying to move a shade from a design spec into code without guessing.
HEX and RGB encode the same three numbers. #3b82f6 splits into 3b red, 82 green, and f6 blue, each a hexadecimal byte from 00 to ff, which is 59, 130, and 246 in decimal. This is why rgb(59, 130, 246) and #3b82f6 are identical and why the tool can convert between them without loss.
HSL re-describes the same color in terms people can reason about. Hue is the angle on the color wheel, from red at 0 through green at 120 to blue at 240. Saturation is how far the color is from gray. Lightness runs from black at 0% through the pure hue at 50% to white at 100%. To build a hover state, keep hue and saturation and move lightness; the tool handles the arithmetic behind the scenes.
HEX is the default for fixed brand and UI colors: it is compact, universally supported, and reads the same everywhere. RGB is convenient when a value arrives from a design tool or when you need alpha, since rgba() extends it directly. HSL earns its place when colors are generated or themed rather than fixed. Because hue, saturation, and lightness are separate numbers, you can keep a brand hue constant and vary lightness for hover states, or reduce saturation for disabled controls, without recomputing anything by hand. CSS custom properties make this especially clean: store the three HSL components separately and recombine them with hsl(var(--h) var(--s) var(--l)). This picker gives you all three so you can paste whichever fits the code you are already writing.
Every harmony keeps the base color’s saturation and lightness and only rotates hue:
| Harmony | Hue changes | Swatches shown |
|---|---|---|
| Complementary | +180 | base plus 1 |
| Analogous | -30, +30 | base plus 2 |
| Triadic | +120, +240 | base plus 2 |
Complementary pairs give strong figure-ground contrast, analogous groups are safe for backgrounds and subtle accents, and triadic schemes supply three distinct but balanced colors. All of them are starting points: check the result for accessibility rather than trusting the wheel alone.
Complementary colors sit opposite on the wheel and produce the strongest contrast, which makes them good for a call to action against a neutral background but harsh across large areas of body text. Analogous colors sit within 60 degrees and feel cohesive, which suits backgrounds, illustrations, and understated state changes. Triadic colors are evenly spaced and give a balanced three-color scheme: use one as the dominant color, one as a secondary, and the third sparingly as an accent. None of these rules guarantee readability. Two colors can be harmonically perfect and still fail a contrast check, especially when their lightness values are close, so verify any text-on-background pair before shipping it.
Starting from the default blue:
rgb(59, 130, 246)hsl(217, 91%, 60%)#f6af3c, a warm amber opposite the blue#3ce0f6 and #523cf6, a cyan and an indigo on either side#f63c83 and #83f63c, a pink and a green 120 degrees apartEach of those swatches can be copied directly. Note that the complementary amber is a different lightness impression even though HSL lightness is held constant, because human eyes do not perceive every hue as equally bright.
Because HSL stores hue as a whole degree and saturation and lightness as whole percentages, round-tripping is approximate. #3b82f6 to HSL and back returns #3c83f6, off by one in two channels. That difference is imperceptible, but it matters if you are comparing color values byte-for-byte.
A second edge case is gray. When red, green, and blue are equal, the conversion cannot compute a meaningful hue and reports hsl(0, 0%, L). So #808080 becomes hsl(0, 0%, 50%), and every gray lands on hue 0 regardless of where it came from. Saturation, not hue, is what distinguishes grays.
HSL is also not perceptually uniform. Two colors with the same declared lightness can look very different in brightness: yellow at 50% lightness appears far brighter than blue at 50%. That is why holding HSL lightness constant across a harmony can shift the visual weight of the swatches, and why newer perceptual spaces such as OKLCH exist. This tool sticks to standard HSL, matching what CSS accepts directly.
The base color is rendered first in each palette, followed by the harmony colors. Complementary shows the base plus one opposite color, analogous shows the base plus two neighbors, and triadic shows the base plus two colors 120 and 240 degrees away.
Complementary adds 180 degrees, analogous uses minus 30 and plus 30 degrees, and triadic adds 120 and 240 degrees. Saturation and lightness are copied unchanged from the base color, so only the hue moves.
Yes. The input accepts three- and six-digit HEX values and expands shorthand automatically, so #f00 becomes #ff0000. Malformed input is simply ignored rather than converted.
HSL is stored with whole-number degrees and percentages, which loses a little precision. #3b82f6 becomes hsl(217, 91%, 60%), and converting that back gives #3c83f6, one step higher in red and green.
No. It works in opaque HEX, RGB, and HSL only. There is no alpha channel, so semi-transparent CSS needs rgba() or hsla() values set elsewhere.
Each of the HEX, RGB, and HSL panels has its own copy button. Palette swatches are also clickable: clicking one copies that swatch's HEX value to the clipboard and briefly changes its label to confirm.
Reviewed by the HandyTools Hub team · Last updated