Palette
A palette generator built on colour harmony, gradients and mesh gradients. Every colour in any CSS Color 4 notation, ready-made presets and a preview on a real interface – with WCAG contrast.
Palette presets
Interface preview
Click any element of the mock-up to highlight the palette colour it comes from.
- Home
- Services
- Work
- Contact
Colours that play together
The hero gets the first gradient in the palette, buttons get the most saturated colours and text gets the colour with the best contrast.
Buttons
-
Branding
Visual identity
Logo, type and palette in one system.
More -
Web
Product page
Fast, readable and accessible on every screen.
More -
App
Client dashboard
Data and actions one click away.
More
Categories are computed from the colours: dark / light – mean OKLab lightness, vibrant / muted – mean chroma (OKLCH), high contrast – WCAG contrast of the darkest and lightest colour ≥ 12:1. Loading a preset replaces the palette – Ctrl+Z brings the previous one back.
Space – new palette. Lock the colours you want to keep. The value field accepts any CSS colour (colour names and color-mix() too). The gradient icon turns a card into a gradient with a full editor – gradients are not re-rolled. Ctrl+Z / Ctrl+Y – undo and redo. The palette is saved in this browser.
About the experiment
Press Space and the palette is rolled again following the chosen scheme: triad, complementary, split-complementary, analogous, rectangle, square or shades of a single hue. Angles can be measured on the classic HSL wheel or on the perceptual OKLCH wheel, where equal steps really look equal – the colour wheel shows the palette colours and the scheme spokes, and dragging it rotates the hues of unlocked colours without changing their lightness or chroma. Lock the colours you like – they stay put and set the base hue. The palette starts with five colours, but you can add as many as you want, insert new ones between existing colours, drag them around and remove them.
Each colour has its own CSS Color Module Level 4 notation: HEX, rgb(), hsl(), hwb(), lab(), lch(), oklab(), oklch() or color() in the srgb, srgb-linear, display-p3, a98-rgb, prophoto-rgb, rec2020 and xyz spaces. Switching notation never changes the colour, and sliders let you fine-tune it in the channels of the chosen notation. The generator works in the sRGB, Display P3 or Rec. 2020 gamut and warns when a colour does not fit sRGB or the chosen notation.
Any card can become a gradient with the full set of CSS options: linear, radial or conic (repeating- too), direction or angle, shape, size and centre, interpolation space with a hue method and any number of colour stops with hard stops and transition midpoints. A mesh gradient is a set of freely placed colour spots over a base colour – drag the points with the mouse or the arrow keys right on the preview, and the result is plain CSS that works in every modern browser.
To get going, load one of more than twenty presets – solid, gradient and mixed – filtered by category: dark, light, vibrant, high contrast and muted. Categories are computed from the lightness, chroma and contrast of the colours rather than assigned by hand, and every preset meets WCAG 2.2 AAA (at least 7:1) for text, the primary button and the hero – in both the light and the dark preview. The preview shows the palette on a website mock-up – header and menu, hero, three button types in several sizes, cards and footer – in a light and a dark version, with WCAG contrast measured at the worst spot of a gradient. The experiment background switches between white and black, and the whole palette can be copied as CSS custom properties.