Color Picker & Palette Generator

Every color on this page is shown three ways at once, and that is not padding — it is because each format answers a different question. HEX, the #6366F1 form, is the compact string you paste into CSS and most design tools. RGB spells out the three channels of light a screen actually emits, each from 0 to 255, which is exactly what an image editor or a canvas API wants. HSL rewrites the same color as an angle plus two percentages, and it is the one worth understanding, because it is the format you can do arithmetic on in your head.

The conversions here are exact and run as you pick. An eight-bit-per-channel display can show 256 × 256 × 256 = 16,777,216 distinct colors, and HEX and RGB are simply two ways of writing the same triple — #6366F1 is rgb(99, 102, 241) because 63, 66, and f1 in base 16 are 99, 102, and 241 in base 10. There is no rounding or loss moving between those two. HSL is where a small rounding can appear, because it is a geometric re-projection of the cube onto a cylinder, but for the purpose of reading and copying a color it lines up cleanly, and the value you copy is always valid.

The reason to reach for HSL when you are designing rather than just recording a color is that its three numbers map to the three edits you actually make. Want the same color but calmer? Drop the saturation. Want it as a hover state? Nudge the lightness a few points. Want a different color that still belongs to the same family? Rotate the hue. Trying to do any of those in raw RGB means changing all three channels by amounts you have to compute; in HSL it is one number. That single property is why every palette this tool builds is computed in HSL and only converted back to HEX at the end.

Each scheme is a rule about angles on the 360° hue wheel, applied to your base color while its saturation and lightness are held steady. Understanding the rule tells you what the palette is for, which matters more than the label. Complementary takes the single hue 180° opposite yours — maximum contrast, two colors, the pairing for an accent that must pop against a dominant color. Use it when one color leads and the other appears only in small doses; split the two evenly across a layout and they fight.

Analogous steps 30° to each side of your base, giving three neighbors that read as one mood — the scheme for gradients, calm backgrounds, and anything that should feel unified rather than punchy. Triadic places two colors 120° away, carving the wheel into thirds; it stays vivid and high-contrast but feels balanced because no color dominates the spacing. Split-complementary starts at the complement and backs off 30° on either side (150° and 210°), which keeps most of the energy of a complementary pair while removing the harsh, direct clash — often the most usable of the contrast schemes for a full interface.

Monochromatic is the odd one out: it does not rotate the hue at all. It fixes hue and saturation and walks the lightness up and down — here to roughly 30% darker and 30% lighter than your base, in five steps, clamped so the darkest stays above 5% and the lightest below 95% so you never hit pure black or pure white. That clamp is deliberate; a monochromatic ramp that bottoms out at true black loses its hue and stops looking like part of the family. The result is a ready-made set of surface, border, and text shades that cannot clash, because they are all the same color at different brightnesses.

The most common mistake with a palette generator is assuming that colors which sit nicely together on the wheel will also be readable when one is text on top of the other. They are unrelated properties. Harmony is about hue relationships; legibility is about the difference in lightness between foreground and background, measured as a contrast ratio. Two analogous colors 30° apart can be genuinely harmonious and completely illegible as text-on-background, because their lightness values are nearly identical.

This is why the tool gives you exact values rather than a pass/fail badge: the honest workflow is to take the HEX or RGB you copied here and paste it into a dedicated WCAG contrast checker. The thresholds worth memorising are 4.5:1 for normal body text, 3:1 for large text (roughly 24px, or 18.7px bold) and for interactive component boundaries. A palette can be beautiful and still fail all three; when it does, the fix is usually to push the text color's lightness far from the background's in HSL while keeping its hue, which this tool makes easy to eyeball.

It also pays to sanity-check a palette against color-vision deficiency, which affects a meaningful share of users. Schemes that lean entirely on a red-versus-green distinction — some complementary and triadic pairs — can collapse into near-identical tones for a red-green colorblind viewer. The defence is not to avoid those hues but to make sure the palette also differs in lightness, so the information survives even when the hue difference does not. Copy the values, test them, and adjust lightness before you commit.

A reliable way to use the tool: start from one color you are committed to — a brand color, a photo you are matching, or just a hue you like — and paste it into the hex field or dial it in with the picker. Switch to Monochromatic first to get your neutral ramp of surfaces and text shades, since most of any interface is that ramp. Then flip to Analogous or Split-complementary to choose a secondary and an accent, copying the HEX codes as you go. You end up with a small, deliberate set rather than a random grab-bag of colors, and every value is one click away.

Everything happens in your browser. The hex you type, the picker you drag, and the palette math all run in local JavaScript — there is no upload and no server that sees your colors, which you can confirm in the network tab. That matters less for privacy here than for speed and reliability: the readouts update instantly with no round-trip, and the tool works offline once the page has loaded. There is nothing to sign up for and no limit on how many palettes you generate.

When you have the colors settled and need to turn them into something — a shareable code snippet styled in your palette, or a graphic — the code-to-image tool and the rest of the creator tools pick up where this one leaves off. This tool's job is narrow and it does it exactly: name a color three ways, and build a mathematically correct palette around it.