Skip to content
don’t make it ugly
All resources

ToolTools

UI Colors

Turn one brand colour into a full Tailwind-style shade scale.

Free
Visit website (opens in a new tab)
Preview of UI Colors

What it is

UI Colors generates a 50-to-950 shade scale from a single hex colour, in the same format as Tailwind's built-in palettes, with a live preview of the scale on sample UI. Export as Tailwind config, CSS variables, SCSS or SVG.

Why it’s here

The quickest way to get from "our brand is this blue" to a palette your agent can use everywhere. Check the resulting scale for contrast; auto-generated mid steps sometimes need a nudge.

Best for

  • brand colour scales
  • Tailwind palettes
  • quick colour setup

Can my agent use this?

Agent good agent friendliness

Partly. Generate the scale, copy the export, and give it to your agent as your palette.

Good: Publicly accessible and useful to reference, but the agent will need to interpret it rather than install it.

Access methods

  • Public website
  • Copy/paste

Related resources

  • Accessible Palette
    Preview of Accessible Palette

    Accessible Palette

    Build colour scales where every step has predictable, accessible contrast.

    ToolFreegood agent friendliness
  • Radix Colors
    Preview of Radix Colors

    Radix Colors

    Colour scales designed for real UI, with light and dark modes that actually match.

    Asset libraryFreeOpen sourceexcellent agent friendliness
    Staff pick
  • tweakcn
    Preview of tweakcn

    tweakcn

    A visual theme editor that makes a shadcn/ui app stop looking like every other shadcn/ui app.

    ToolFreeOpen sourcegood agent friendliness
    Staff pickUsed by me
  • Realtime Colors
    Preview of Realtime Colors

    Realtime Colors

    Preview a palette and font pairing on a realistic page before committing.

    ToolFreelimited agent friendliness