Tailwind Color Finder

How Do You Find the Nearest Tailwind Color to a Hex Value?

Enter your color in Hex value, select Tailwind v4 or Tailwind v3, and copy a class from the ten closest results. The finder starts with v4 and Perceptual matching. For the initial input, #6366f1, the nearest v4 entry is indigo-500 at #615fff, displayed as 2.72 ΔE. Switch to v3 to find indigo-500 at the identical input hex.

Worked matches using the selected palette and matching method

Input	Palette	Method	Nearest entry	Result hex	Displayed distance
#6366f1	v3	RGB	indigo-500	#6366f1	0.0
#615fff	v4	RGB	indigo-500	#615fff	0.0
#6366f0	v3	RGB	indigo-500	#6366f1	1.0
#6366f1	v4	Perceptual	indigo-500	#615fff	2.72 ΔE

For the third row, the input is RGB (99, 102, 240) and the match is (99, 102, 241). Euclidean RGB distance is √((99 − 99)² + (102 − 102)² + (240 − 241)²) = 1. The result receives an Exact badge even though the blue channels differ. The same utility name can also use different values across versions, as the first two rows demonstrate.

Each result shows a swatch, palette name, hex value and distance. The utility buttons copy complete classes such as bg-indigo-500, text-indigo-500 and border-indigo-500. These classes refer to the matched palette entry; they do not preserve your input color automatically.

Which Colors Are Included in the Default Palette?

The default Tailwind v4 palette contains 286 entries generated from tailwindcss theme.css, with original OKLCH values and sRGB hex equivalents. Matching uses those hex equivalents. The v4 result rows also expose the OKLCH definition, so you can inspect the theme value alongside its hex representation.

The families are slate, gray, zinc, neutral, stone, mauve, olive, mist, taupe, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink and rose. The selectable Tailwind v3 palette contains 242 hex colors across 22 families. Switching versions changes the comparison data rather than converting a project's existing theme.

How Do OKLab and RGB Matching Differ?

OKLab ranks colors by distance in a perceptual color space, while RGB measures straight-line distance between red, green and blue channel values. Both sort results from lowest distance to highest. The two methods can rank the same palette differently because they measure differences in different coordinates.

Perceptual mode displays raw OKLab distance multiplied by 100, rounded to two decimal places. RGB distance displays one decimal place. The distance tiers below apply to the unformatted distance, before display rounding.

What Do the Exact, Close and ~Approx Badges Mean?

The badges group numeric distances rather than certify a visual match. Perceptual mode uses raw OKLab thresholds; multiply them by 100 to compare with the displayed ΔE scale. RGB uses channel-distance thresholds directly. These are the finder's own tier boundaries, so use them to interpret this result list rather than as a contrast or accessibility score.

Distance tiers evaluated before rounding

Badge	Raw OKLab distance	RGB distance
Exact	0 through 0.01	0 through 5
Close	Above 0.01 through 0.10	Above 5 through 30
~Approx	Above 0.10 through 0.20	Above 30 through 50
No tier badge	Above 0.20	Above 50

For example, a raw OKLab distance of 0.085 displays as 8.50 ΔE and falls in Close. Do not compare that displayed number directly with an RGB distance: the modes use different units. If changing the method changes the first result, compare the candidate swatches and their values within the palette your project actually uses.

How Do You Copy OKLCH Values or Keep Your Own Color?

Each v4 result provides copy buttons for its oklch() value and a CSS variable reference such as var(--color-indigo-500). These supplement the utility-class and hex buttons. Use the variable reference when writing CSS that should follow the selected named theme color.

To retain your input instead of choosing a palette approximation, use the v4 box labeled “Use your exact colour”. Its editable token name defaults to brand. Copy CSS produces an @theme block defining --color-brand with a rounded OKLCH conversion of your input. Add the snippet to your theme CSS, then use bg-brand, text-brand or border-brand. The conversion rounds lightness to 0.1 percentage points and chroma to three decimals; the hue conversion rounds to 0.1 degrees, although the snippet prints three decimal places. Only lowercase letters, digits and dashes are accepted in the token name. An empty name hides the snippet until you enter a name again.

When the nearest result is beyond the Close threshold, the finder suggests an arbitrary value such as bg-[#6366f1]. That suggestion uses the input hex directly. The finder compares built-in palettes; it does not import custom colors from your project's configuration.

Which Color Inputs Does the Finder Accept?

The Hex value field accepts three- or six-digit hex values with a leading #, such as #f00 or #ff0000. Short hex expands each digit into a pair for matching, so those two inputs represent the same RGB channels. The field does not parse rgb(), hsl() or oklch() strings. Use the Color Converter to obtain a hex value from another representation first.

While you edit incomplete or invalid text, the picker keeps the last valid color for matching. You can also choose a color visually from the swatch. The screen eyedropper appears only when the browser exposes the EyeDropper API. Neither choosing a color nor switching a palette requires uploading a file or importing project configuration.

How Do You Share or Revisit a Color?

Copy the address bar URL to share the input color through a hash such as #c=6366f1. The link stores the color only. Palette version, distance method and token name remain separate interface settings.

The recent-colors strip keeps up to ten colors in local browser storage and restores a color when you select its swatch. For follow-up work, open the Contrast Checker to test readability or the Color Converter to inspect other representations. Palette similarity alone does not establish text contrast.