collected.tools.
AppDesign

Realtime Colors

Try colours and fonts on a real website

What it is

Realtime Colors applies a colour palette and font pairing straight to a sample website instead of showing abstract swatches. You set five roles, from text and background to accent, check contrast against AA and AAA and switch between light and dark mode. The result exports as CSS, SCSS or a Tailwind config, and there is a Figma plugin as well.

Why it made the cut
  • Live preview on a full sample page
  • Contrast checks against AA and AAA
  • Export to CSS, SCSS and Tailwind

Related entries