Tools
Palette tools
Two small tools from Recolor (recolor.page), a website color changer: one turns a Coolors link into code, the other checks which colors of a palette can carry text on which. Both run in your browser, need no account, and open the palette on a real page with one link.
Last updated
Tools
- Tools
Coolors to Tailwind converter
Convert a Coolors palette to Tailwind v4: paste its link or hex codes and copy an @theme block, CSS variables, SCSS or JSON. Your exact colors, free. - Tools
Color palette contrast matrix
Paste a palette and see the WCAG contrast ratio of every pair, and of black and white text: AA at 4.5:1, AA large at 3:1, or fail. Free, in your browser.
The guides behind them
- 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
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.