Skip to content
Colors& fontsStart with a color

Shades, palettes and themes in one place.Free tools for your next project.

Colors & fonts turns a single color into a full system: shades, palettes, semantic themes and type pairings, with contrast checks along the way.

How it works

  1. 1Start from a color

    One color is enough

    Paste a hex code, open the color picker, or pull colors out of an image. The Shade Generator turns it into a full scale.

  2. 2Build the system

    Palettes and themes

    Lay out a five-role palette, lock the colors you like and shuffle the rest, or turn it into semantic tokens.

  3. 3Check contrast

    Readable by default

    Every pair gets a WCAG contrast ratio, and the Vision setting previews the palette for color blindness.

  4. 4Take it with you

    Copy, export, ship

    Export for Tailwind, CSS, SCSS, Figma, JSON, SVG, PDF, ASE, Android or iOS, or share a link.

Every generator and every library is free to use, and you don't need an account to start. Pick a color and go.

Tools

Libraries

Shades, palettes and themes, all from one color.Start with a color