DEVELOPER WORKFLOW · 20 OCTOBER 2026

Build a Tailwind CSS v4 Color Palette from a Brand Color

Generate an OKLCH-derived 50–950 scale, preserve your exact brand color and export practical Tailwind v4 theme variables.

By Palunio · Examples checked 20 October 2026

A useful Tailwind palette needs more than eleven attractive swatches. It should preserve the exact brand value where required, provide a usable range, and make the component’s text/background decision explicit. This example starts from #1E4FCF.

Generate and inspect the scale

Open the blue example in the OKLCH scale generator. Palunio uses the input’s hue and chroma, then places eleven lightness targets from 50 through 950. The source HEX is not guaranteed to appear at step 500. That is a deliberate distinction: a scale recipe and an exact brand token are separate decisions.

Inspect the black and white contrast columns before choosing a button or text color. The numeric step does not imply a particular WCAG result. A 500 shade in one hue family can have a different ratio from a 500 shade in another.

Copy an @theme block into Tailwind v4

Use Copy Tailwind v4 to obtain --color-brand-50 through --color-brand-950. In a project already configured for Tailwind CSS v4, place the block after the Tailwind import. The --color-* namespace makes corresponding color utilities available.

@import "tailwindcss";

@theme {
  --color-brand-exact: #1E4FCF;
  --color-brand-50: #F5F9FF;
  --color-brand-100: #E6EFFF;
  --color-brand-200: #C9DBFF;
  --color-brand-300: #A2C1FF;
  --color-brand-400: #76A2FF;
  --color-brand-500: #4B80FC;
  --color-brand-600: #2E62E2;
  --color-brand-700: #1645C3;
  --color-brand-800: #04299F;
  --color-brand-900: #001372;
  --color-brand-950: #000744;
}

Download this complete CSS example. It requires a working Tailwind v4 build; it is not a standalone rendered website or a Tailwind v3 configuration file.

Use utilities for a real component

<button class="bg-brand-700 text-white
  hover:bg-brand-800 focus-visible:outline-2
  focus-visible:outline-offset-4 focus-visible:outline-brand-700">
  Save changes
</button>

For this generated blue scale, white on 700 measures 7.86:1 and white on 800 measures 11.52:1. These two text pairs pass AA. That does not establish the focus indicator’s contrast against your actual surrounding surface, so test the entire component in context.

Keep raw shades separate from semantic decisions

A numeric scale is useful for exploration. Semantic names such as action, action-hover, surface and text describe intended use. Your application can map those roles to different shades for different themes. Changing a role mapping is usually easier to review than changing dozens of unrelated component classes.

Palunio’s palette exports use primary, secondary, accent, surface and ink. Its scale export uses brand-50 through brand-950. Choose the handoff that matches your work, and avoid maintaining two competing definitions for the same token.

What this example does not decide

The example does not provide a full dark theme, error/success semantics, disabled-state rules or a component library. Validate those requirements separately. If your exact brand color fails as text, retain it for another role and use a checked text shade. See how to repair a failing brand pair.

References: Tailwind theme variables, Tailwind color utilities, and Palunio’s OKLCH scale method.