Colour and Opacity

Colour utilities with shades

Colours come in palettes (gray, red, blue, cyan, and more) with shades from 50 (lightest) to 950 (darkest), applied with prefixes such as text-, bg-, border-, ring-, fill- and stroke-. Add opacity with a slash: bg-black/50 is 50% opacity. The v4 default palette is defined in the OKLCH colour space for more vivid, perceptually even colours. Check contrast: body text should meet WCAG contrast ratios (at least 4.5:1).

An alert using colour and opacity

Background, border and text from one palette.

<div role="alert" class="rounded-lg border border-amber-300 bg-amber-50 p-4 text-amber-900">
  <p class="font-semibold">Payment pending</p>
  <p class="text-sm text-amber-800/80">We will email you when it clears.</p>
</div>

<!-- A semi-transparent overlay -->
<div class="fixed inset-0 bg-black/50"></div>

Pair light backgrounds with dark text from the same hue

For example bg-amber-50 with text-amber-900 keeps the alert harmonious and readable.

Quick check: What does bg-black/50 produce?

• A 50% grey
• A black background 50px wide
• Black text at 50% size
• A black background at 50% opacity