Tailwind colour to HEX
Look up any Tailwind v4 colour token and copy its value.
FreeRuns in your browserNo signupUpdated 2026-10-29
Values last checked October 2026 against tailwindcss 4.3. Hex is the sRGB equivalent of the OKLCH value Tailwind uses.
11 colours
--color-blue-50: #eff6ff; --color-blue-100: #dbeafe; --color-blue-200: #bedbff; --color-blue-300: #8ec5ff; --color-blue-400: #51a2ff; --color-blue-500: #2b7fff; --color-blue-600: #155dfc; --color-blue-700: #1447e6; --color-blue-800: #193cb8; --color-blue-900: #1c398e; --color-blue-950: #162456;
About this tool
How it works and how to read the result.
Need this done for you?
Website design & development
Company websites designed and built to win trust and enquiries.
See the serviceWhat it does
Tailwind colors, hex values and the OKLCH originals for the whole v4 default palette are in one searchable list here. Tailwind v4 defines its colours in OKLCH, which many design tools, email builders and older apps cannot read. Each token is converted to its nearest sRGB hex and RGB value, so you can paste the matching colour into Figma, a PDF or a CMS field that only accepts hex. Search by token name, class name or hex code.
How to use it
- Type a token such as
blue-500, or a class such asbg-emerald-600. The class prefix is ignored. - Or choose a family, such as slate or rose, to see all eleven steps from 50 to 950.
- Choose whether to copy HEX, RGB or OKLCH.
- Press Copy beside a swatch, or copy the whole set as CSS variables.
How to read the result
Search blue-500 and you get #2b7fff. Tailwind's own value is oklch(62.3% 0.214 259.815): 62.3% lightness, a chroma of 0.214 and a hue angle near 260 degrees. The hex is that colour converted to sRGB and rounded to whole numbers.
The hex values are not the same as Tailwind v3. The v3 blue-500 was #3b82f6; v4 moved every colour to OKLCH and made many of them more vivid. If your design file still uses v3 hex codes, the mock-ups and the built site will not quite match. Searching a v3 hex here usually finds nothing, which is a quick way to spot an outdated value.
More than a quarter of the v4 colours, mostly the vivid middle steps, sit at least slightly outside sRGB. For those, the hex is the nearest colour a standard screen can show, and a wide-gamut display shows the OKLCH version a little brighter. Use the OKLCH value in CSS and the hex only where OKLCH is not accepted.
Values were last checked against tailwindcss 4.3 in October 2026.
Convert any other colour between formats with the colour converter. For a site built on Tailwind, see website design and development.
Questions
Frequently asked.
Why does Tailwind v4 use OKLCH instead of hex?
OKLCH describes colours the way the eye sees them, so steps in a scale look evenly spaced and the same lightness value looks equally light across hues. It can also describe colours outside sRGB that many modern phone and laptop screens can show. Hex can only describe sRGB.
Can I still use hex colours in Tailwind v4?
Yes. You can define your own colours in hex inside the @theme block, or use an arbitrary value such as bg-[#2b7fff]. Tailwind does not convert them; they work exactly as written. Only the default palette ships in OKLCH, and you can override any of it.
Your next move
Like what you see? Tell us about it.
A process that takes too long, a website that undersells you, or an idea ready to take shape. Tell us where you are and we will suggest a useful next step.
India · Working with clients worldwide