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

  • Radix Colors
    Preview of Radix Colors

    Radix Colors

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

    excellent agent friendlinessAsset libraryFreeOpen sourceStaff pick
  • tweakcn
    Preview of tweakcn

    tweakcn

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

    good agent friendlinessToolFreeOpen sourceStaff pickUsed by me
  • DesignMD
    Preview of DesignMD

    DesignMD

    Point it at a URL and it extracts that site's design system as a DESIGN.md.

    excellent agent friendlinessTool
  • Iconify
    Preview of Iconify

    Iconify

    One API and one component for two hundred thousand icons from every major set.

    excellent agent friendlinessAsset libraryFreeOpen source