Every premium and members-only resource for $9.99/month, as a no-commitment subscription. See the plans

PalateKit

Sign in
Menu

Request a resource

Describe the resource you are missing in one sentence. We will email you when it is published.

0 / 280

A page, a video or an image online.

Unlock PalateKit

Unlock everything

Plan

Paying means accepting our terms of sale.

Secure payment by Stripe. Receipts and invoices sent by email.

Welcome back

Sign in to install, download or save this resource. A free account is enough for free resources.

Accessible color palette for Tailwind v1.0.0

Use this resource to define a site's color palette from its brand color

New

  • 581 downloads
  • 153 likes
  • 121 saves

Free

Install with the CLI

In a terminal, from the folder you want:

npx --yes palatekit@latest install tailwind-color-palette-generator

With no option, the skill goes to ~/.agents/skills/; add --agent claude-code (or codex, cursor…) to target an agent.

First time: connect the CLI with

npx --yes palatekit@latest login

You give the agent your brand color. It computes an 11-shade scale, pairs every background with its text color, prepares dark mode and checks the WCAG contrast of the key pairs. You get a Tailwind v4 CSS block ready to paste, with tips for fixing weak contrast.

Mostly picked by

Updated November 2, 2026

11-shade scale from 50 to 950 with light and dark tokens

Details

Works in
Install guides
Generates with
Your agent's model
Uses
  • Tailwind CSS v4 (to use the delivered CSS as is)
Licence
MIT

Similar resources

View all

What you get

  • SKILL.md: the five-step method with formulas
  • assets/tailwind-colors.css: a complete CSS output template to adapt
  • Contrast check tables for light and dark modes

Good fit for

  • Setting up the colors of a new site from a brand color
  • Adding dark mode to an existing site
  • Checking the accessibility of an interface's colors

Not for

  • Choosing the brand color itself
  • Multi-color palettes with no dominant color
  • Projects that don't use Tailwind (the method still helps, the output format less so)

Tags

  • palette
  • colors
  • tailwind
  • accessibility
  • dark mode

About

You say

"Generate a full palette with dark mode from #0D9488 for my site."

11-shade scale from 50 to 950 with light and dark tokens

Skill published by jezweb under the MIT license.

Show more

Prerequisites

You bring
The hex code of your brand color
Dependencies
Tailwind CSS v4 (to use the delivered CSS as is)

How to use it

  1. Give your brand hex code
  2. The agent generates the scale and tokens and checks contrast
  3. Paste the CSS into your project and test both modes

Content preview

Files

  • assets/tailwind-colors.css5.2 KB
  • LICENSE1.1 KB
  • NOTICE-PALATEKIT.md0.4 KB
  • SKILL.md15.1 KB

Origin and licence

Modified by PalateKit

Author
jezweb
Source
github.com/jezweb/claude-skills/tree/1260fa7439b36b18dbf16648ccc7fb44783f6c23/plugins/design-assets/skills/color-palette
Licence
MIT

Notice

Version modifiée de « color-palette » (jezweb, MIT) : traduction française et fiche par PalateKit.

User reviews

–

No ratings yet

Loading reviews…

Delete your review?

Your rating and comment will be removed from the page.

Frequently asked questions

Do I have to use Tailwind?

The output is written for Tailwind v4, but the shade scale, tokens and contrast checks carry over to any CSS.

Is contrast guaranteed?

The skill gives the formulas and check tables; always verify final pairs with a tool such as WebAIM before shipping.