Create stunning color schemes, gradients, and check accessibility - all in one powerful tool
Generate harmonious colour palettes from any base colour — monochromatic, analogous, complementary, split-complementary, triadic and tetradic — plus tints, shades, gradients and accessible text/background pairs checked against WCAG contrast ratios.
Export palettes as CSS variables, Tailwind config, SCSS, JSON or an image, copy any HEX/RGB/HSL value with one click, and browse trending palettes for inspiration. Built for designers, front-end developers and brand teams.
A dominant colour, a supporting secondary, one accent, and neutral tints/shades — usually 3–5 colours with a clear hierarchy (the 60-30-10 rule) and enough contrast for text.
Two colours opposite each other on the colour wheel (e.g. blue and orange). It gives maximum contrast; use one as the dominant and the other as an accent.
WCAG requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (AA). The accessibility tab computes the ratio for any pair and flags failures.
Yes — the export dialog produces ready-to-paste CSS custom properties, a Tailwind colors object, SCSS variables or JSON.
They describe the same colour differently: HEX/RGB by red-green-blue mix, HSL by hue, saturation and lightness — HSL is easiest for creating tints and shades.