---
name: UI Colors
slug: uicolors
url: "https://dontmakeitugly.com/resources/uicolors"
website: "https://uicolors.app"
type: tool
categories:
  - tools
tags:
  - colours
  - palettes
  - tailwind
  - generator
  - brand
frameworks:
  - tailwind
  - agnostic
pricing: free
openSource: false
agentFriendly: good
agentAccessMethods:
  - public_web
  - copy_paste
difficulty: beginner
dateAdded: "2026-09-02"
lastVerified: "2026-09-02"
---

# UI Colors

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

- Type: Tool
- Categories: Tools
- Pricing: Free
- Open source: no
- Works with: Tailwind CSS, Framework agnostic, CSS variables

## 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

## Links

- Website: https://uicolors.app

## Can my agent use this?

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

Agent friendliness: 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.

## Prompt to hand your agent

```text
Use UI Colors as a design and implementation reference for this project.

What it is: Turn one brand colour into a full Tailwind-style shade scale.

Website: https://uicolors.app

Use it specifically for:
- brand colour scales
- Tailwind palettes
- quick colour setup

How you can access it: Public website, Copy/paste.
Works with: Tailwind CSS, Framework agnostic.

Study the relevant design and implementation patterns, but adapt them to this project's existing architecture, visual language, accessibility requirements and conventions. Do not blindly copy the entire resource.
```

## Related

- [Radix Colors](https://dontmakeitugly.com/resources/radix-colors.md): Colour scales designed for real UI, with light and dark modes that actually match.
- [tweakcn](https://dontmakeitugly.com/resources/tweakcn.md): A visual theme editor that makes a shadcn/ui app stop looking like every other shadcn/ui app.
- [DesignMD](https://dontmakeitugly.com/resources/designmd.md): Point it at a URL and it extracts that site's design system as a DESIGN.md.
- [Iconify](https://dontmakeitugly.com/resources/iconify.md): One API and one component for two hundred thousand icons from every major set.

UI Colors is an independent resource listed by Don't Make It Ugly. We link to it; we aren't affiliated with it. Pricing and licence details are as understood at the time of listing; check the official site.