Pick a color below to see it in HEX, RGB, and HSL, and to generate a palette of related shades and colors.
Runs entirely in your browser — nothing you type here is sent to our server.
Digital colors are built from three channels of light — red, green, and blue — each ranging from 0 to 255. Mixing all three at full strength produces white; mixing none produces black; and every other color is some combination in between. HEX and RGB both describe a color this way, just with different notation, which is why converting between them is a purely mechanical, lossless operation.
HSL describes the same underlying color differently, in terms that map closer to how people actually talk about color: which hue it is, how vivid (saturated) it looks, and how light or dark it is. This makes it much easier to build a palette by hand — keeping hue and saturation fixed while sliding lightness up or down produces a clean set of tints and shades of the same color, which is exactly how this tool builds the shades row above.
The complementary, analogous, and triadic palettes come from basic color-wheel relationships used in traditional color theory: colors opposite each other on the wheel tend to contrast strongly, colors near each other tend to harmonize, and three colors spaced evenly around the wheel (triadic) give a balanced, vibrant combination. These relationships are a well-tested starting point for picking colors for a design, though the right choice always depends on the specific context and audience.
Written from what each site tells us about itself and how the directory works — see something off? Let us know.
They're three ways of writing the same color. HEX (like #0E7C7B) packs red, green, and blue into a six-digit code and is the format most common in CSS and design tools. RGB spells the same three channels out as separate 0–255 numbers, which is easier to read and adjust by hand. HSL describes a color by hue (its position on a color wheel, 0–360°), saturation (how vivid it is), and lightness (how close to black or white it is), which often maps more naturally to how people think about adjusting a color — “a bit lighter” or “more saturated” — than RGB does.
The tool converts your chosen color to HSL, then generates related colors by shifting the hue (for complementary and analogous colors) or the lightness (for tints and shades) while keeping the saturation constant, then converts each result back to HEX. This mirrors the color-wheel relationships taught in basic color theory.
Complementary colors sit opposite each other on the color wheel (180° apart) and create strong visual contrast when paired — useful for making an element like a button or call-to-action stand out. Analogous colors sit close together (within about 30°) and tend to look harmonious together, which is often used for backgrounds, gradients, or a cohesive palette across a design.
Yes. Every value shown — the HEX code, the rgb(…) string, and the hsl(…) string — is valid CSS color syntax on its own and can be pasted directly into a stylesheet.
Screens vary in brightness, contrast, and color calibration, so the same HEX value can render slightly differently from one display to another. The numeric values themselves stay exact and consistent — it's the physical display reproducing them that varies.
