Convert HEX/RGB/HSL, generate shades & find complementary colors
This page converts a color between the three formats used in web and design work — HEX, RGB, and HSL — and generates a few useful variations from whatever color you start with.
Use the color picker, or type into any of the three fields.
The other two formats update automatically.
Press "Copy" next to whichever value you need.
Yes — there's no paywall, no watermark, and no sign-up required.
All three fields stay in sync — edit the HEX code, type an RGB value, type an HSL value, or drag the color picker, and the other two update immediately. Each format is useful in different contexts: HEX for CSS, RGB when you need individual channel values, HSL when you want to reason about hue and lightness directly.
Ten swatches show your color stepped from near-black to near-white at the same hue and saturation — click any swatch to load that variation into the fields above. Useful for finding a lighter or darker version of a brand color without guessing at values.
The complementary swatch is your color's hue rotated 180 degrees around the color wheel — the classic "opposite" color that pairs with it for contrast.
No — this tool only generates one complementary color, not a full palette. It doesn't offer triadic, analogous, or split-complementary scheme generation the way a dedicated palette tool would.
This page doesn't check contrast ratios. For that, use the Color Contrast Checker to see whether two colors meet WCAG accessibility requirements for text and backgrounds.
No — everything happens in your browser. Nothing is ever uploaded or sent anywhere.
Useful any time you need to move a color between a design tool and code, or explore variations on a starting point.
Convert a design tool's color value into the HEX or RGB your code needs.
Generate lighter and darker steps from a single brand color.
Translate a color between formats when a tool only accepts one.
Yes — there's no paywall, no watermark, and no sign-up required.
Yes, in any direction — edit any of the three fields, or use the color picker, and the other two update automatically.
No, it generates one complementary color (directly opposite on the color wheel) plus a 10-step shade and tint palette of your chosen color. It doesn't offer triadic, analogous, or split-complementary scheme generation.
Not on this page — that's a separate tool. Use the Color Contrast Checker to test whether two colors meet accessibility contrast requirements.
No, only HEX, RGB, and HSL are supported — there's no CMYK conversion for print work.
No. Everything happens in your browser — nothing is ever uploaded or sent anywhere.