---
title: "Tailwind Colors Palette Browser"
description: "Free Tailwind CSS color reference. Browse the full default v4 palette across every scale and copy any shade as a class name, HEX, or OKLCH value."
url: https://devzap.io/tools/tailwind-colors/
category: color
status: live
pricing: Free
---

# Tailwind Colors Palette Browser

> Browse the Tailwind v4 default palette. Copy as utility class, HEX, or OKLCH with one click.

Free Tailwind CSS color reference. Browse the full default v4 palette across every scale and copy any shade as a class name, HEX, or OKLCH value.

## How to use

1. **Filter by color name** — Type 'red', 'blue', or any color name in the search to focus on one scale.
2. **Choose your output format** — Toggle Class / HEX / OKLCH at the top right. Click any swatch to copy in the chosen format.
3. **Build your design system** — Pick a primary scale and a neutral scale. Use 50–200 for backgrounds, 500–700 for text and accents, 800–950 for high-contrast emphasis.

## FAQ

### Why does Tailwind v4 use OKLCH instead of HEX?

OKLCH is perceptually uniform — equal lightness values across hues actually look equally bright. v4 generates the default palette in OKLCH for that reason. HEX values are still emitted for browsers that don't support modern color spaces, but the source of truth is OKLCH.

### Are these the latest Tailwind v4 values?

Yes — values mirror the Tailwind v4 default palette as published. If the official palette updates, this tool stays in sync. For v3 projects, the HEX values match between v3 and v4 within rounding error.

### Can I use these in non-Tailwind projects?

Absolutely. Copy the HEX or OKLCH and paste into vanilla CSS, Sass, design tokens, or another framework. The palette is a great starting point for any UI.

### What's the difference between slate and gray?

Slate is a slightly cooler (blue-tinged) gray; gray is more neutral. They're both 11-step scales. Pick based on the mood: slate pairs well with vibrant accent colors, gray feels more business-neutral.

## Background

## Why a Tailwind palette browser

If you've worked with Tailwind, you know the cycle: open the docs, scroll, click your color, scroll, find the right shade, copy the HEX, close the tab, paste, realize you grabbed the wrong shade, repeat.

This is that browse-and-copy loop without the 14 tabs.

## Three formats, one click

- **Class**: `bg-red-500`. Drop into your JSX or HTML directly.
- **HEX**: `#ef4444`. For non-Tailwind projects, design tools, or graphics.
- **OKLCH**: `oklch(63.7% 0.237 25.33)`. The modern preferred format, supported in every current browser, perceptually uniform.

Toggle at the top right; one click on a swatch copies in the chosen format.

## Use cases

- **Theming**: pick a primary scale that contrasts well with your background.
- **Tooltips and badges**: 100/600 pairs make a clean tinted badge (light bg, dark text).
- **Dark mode**: 800/200 pairs invert the same idea for dark surfaces.
- **Validation**: red-600 on red-50 for errors, emerald-700 on emerald-50 for success — both pass WCAG AA out of the box.