# Colour and Opacity — Tailwind CSS

Source: https://www.skillbyai.com/en/tailwind/c-color

> Palette, shades and transparency.

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

```html
<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.

**Quiz:** What does bg-black/50 produce?

- [ ] A 50% grey
- [ ] A black background 50px wide
- [ ] Black text at 50% size
- [x] A black background at 50% opacity

*Answer:* A black background at 50% opacity. Slash adds opacity.