Color formats explained
- HEX — compact 6-character hexadecimal code used in HTML and CSS. Example: #3ddc97.
- RGB — defines a color by red, green and blue channels, each from 0 to 255. Example: rgb(61, 220, 151).
- HSL — defines a color by hue (0–360°), saturation and lightness. More intuitive for design work.
Which format to use, and when
HEX is the default for CSS and design handoff — short, and every design tool supports it. RGB is useful when you need to blend colors or work with transparency via rgba(). HSL is the easiest to reason about when adjusting a color by feel — lowering the lightness value darkens a color while keeping the same hue, which is harder to do by eye in HEX or RGB.
Choosing accessible color combinations
A color that looks good on its own can still fail as text on a background — contrast, not just aesthetics, determines whether text is actually readable. Once you've picked a color here, check it against your background with a contrast checker before finalizing a palette, especially for body text or anything that needs to meet WCAG AA.
HEX and RGB aren't different colors — just different notation
A common mix-up is treating HEX and RGB as if they produce different results. They don't — #3ddc97 and rgb(61, 220, 151) are the exact same color, just written two different ways: HEX packs each channel into a two-digit hexadecimal pair, RGB writes the same three numbers out in decimal. Converting between them never changes the actual color, only how it's expressed — this tool keeps all three formats in sync for exactly that reason.
Picking a scheme, not just a single color
Adjust the hue in the HSL view and you're moving around a color wheel — two common starting points are analogous colors (neighboring hues, naturally harmonious) and complementary colors (opposite hues, high contrast). The most common beginner mistake with an analogous palette is keeping all the colors at a similar lightness, which makes them blend into one flat block instead of reading as a deliberate scheme — vary the lightness between them, not just the hue. Analogous palettes also rarely have enough contrast for body text on their own, so pair them with a near-black or near-white for anything that needs to be read, and save a single complementary accent color for the one thing that should stand out, like a button.
A simple ratio for laying out a palette
Once you've picked a scheme, the 60-30-10 rule is a reasonable default for how much of each color to actually use: roughly 60% dominant color (usually the background or largest surface), 30% a supporting secondary color, and 10% an accent reserved for the things that need attention — buttons, links, alerts. This tool is where you land on the exact values; the ratio is what decides how much of your layout each one actually covers once you use them.