Color Palette Generator

Pick a color, take it as code

Choose a color on screen and get HEX, RGB, and HSL at once. Same color, different notations for different jobs.

• HEX (#3B82F6): the most common form in CSS and design tools.
• RGB (rgb(59,130,246)): extend to rgba(...) when you need opacity.
• HSL (hsl(217,91%,60%)): adjust only lightness (L) to make lighter/darker variants of the same hue.

Building a harmonious palette

From a base color you can generate complementary, analogous, and triadic schemes. In practice, start with one main color, one or two accents, and a neutral gray.

Accessibility: check the contrast

Low contrast between text and background is hard to read. WCAG recommends at least 4.5:1 for body text. Avoid the common mistake of light gray text on a white background.

Export to code

Copy your colors straight into CSS variables or a Tailwind config.

:root { --brand: #3B82F6; --brand-dark: #1D4ED8; }

For applying custom colors in Tailwind, see the Tailwind custom color palette guide.