Guides
Guides to website color palettes
How-tos for trying a color palette on a real web page with Recolor (recolor.page): preview, contrast, lightness, OKLCH, and turning a palette into code.
Last updated
Guides
- Guides
How to preview a color palette on a real website
Three ways to preview a color palette on a website: load the real page into Recolor, use a template previewer, or edit CSS variables in developer tools. - Guides
Test a palette on your own site before a redesign
How to test a color palette on your own website before a redesign: load it by address or as HTML, press Space through palettes, check each page, share the link. - Guides
How to recolor a website with CSS variables
Change a website's colors with CSS custom properties: define each color once, use var() everywhere, swap the values. The code, and what variables miss. - Guides
Turn a Coolors palette into CSS variables, a Tailwind v4 @theme block or SCSS
Turn a Coolors palette into CSS variables, a Tailwind v4 @theme block or SCSS: open its link in Recolor, press Export, copy. With the exact output. - Guides
Tailwind v4 @theme colors from a palette
How Tailwind v4 colors work: every --color-* variable in @theme becomes a utility color. A palette as a block, OKLCH, --color-*: initial and dark mode. - Guides
How many colors a website palette needs, and which goes where
A website palette needs a main color, one or two accents and neutrals: three to five colors you choose. The 60-30-10 split, roles, and what real sites use. - Guides
Keep text readable when you swap a palette: why a dark hero stays dark
Make a color palette accessible by keeping text and background far apart in lightness: 4.5:1 for text, 3:1 for large text. Why hue barely matters, worked out. - Guides
Black or white text on a color
Black or white text on a color: use black when the background's relative luminance is above 0.179, white below. Twelve colors computed, and the 4.5:1 rule. - Guides
What OKLCH is and why palette tools moved to it
OKLCH writes a color as lightness, chroma and hue on the Oklab space, so equal steps look equal. How it works in CSS, why it beats HSL, and its gamut limits.
Recolor for your role
- Recolor for
Recolor for web designers
Recolor lets web designers show a client their own website in new palettes, live, before a mockup: paste the address, press Space, share a link. - Recolor for
Recolor for front-end developers
Recolor is a palette tool for front-end developers: try a palette on your real page or build, then export CSS variables, a Tailwind v4 @theme block or JSON. - Recolor for
Recolor for brand designers
Test new brand colors on the live website before a rebrand: the brand color takes over everywhere the old one was, shades included, and text stays readable.