Skip to content
ENPT

Tailwind CSS colors poster

This poster prints the complete Tailwind CSS v4 default palette, 26 colors from red to taupe in 11 shades from 50 to 950, with each swatch labeled by its sRGB hex and the exact oklch() value from Tailwind's theme.css, sized for A3 or A2 paper.

Paper

Fits one page: A3, A2.

Tailwind CSS colors

Tailwind CSS v4 default palette: sRGB hex and the exact oklch() value

26 colors × 11 shadesReviewed 2026-09-27

Tailwind CSS colors
50100200300400500600700800900950
red#fef2f297.1% 0.013 17.38#ffe2e293.6% 0.032 17.717#ffc9c988.5% 0.062 18.334#ffa2a280.8% 0.114 19.571#ff646770.4% 0.191 22.216#fb2c3663.7% 0.237 25.331#e7000b57.7% 0.245 27.325#c1000750.5% 0.213 27.518#9f071244.4% 0.177 26.899#82181a39.6% 0.141 25.723#46080925.8% 0.092 26.042
orange#fff7ed98% 0.016 73.684#ffedd495.4% 0.038 75.164#ffd6a790.1% 0.076 70.697#ffb86a83.7% 0.128 66.29#ff890475% 0.183 55.934#ff690070.5% 0.213 47.604#f5490064.6% 0.222 41.116#ca350055.3% 0.195 38.402#9f2d0047% 0.157 37.304#7e2a0c40.8% 0.123 38.172#44130626.6% 0.079 36.259
amber#fffbeb98.7% 0.022 95.277#fef3c696.2% 0.059 95.617#fee68592.4% 0.12 95.746#ffd23087.9% 0.169 91.605#ffba0082.8% 0.189 84.429#fd9a0076.9% 0.188 70.08#e1710066.6% 0.179 58.318#bb4d0055.5% 0.163 48.998#973c0047.3% 0.137 46.201#7b330641.4% 0.112 45.904#46190127.9% 0.077 45.635
yellow#fefce898.7% 0.026 102.212#fef9c297.3% 0.071 103.193#fff08594.5% 0.129 101.54#ffdf2090.5% 0.182 98.111#fcc80085.2% 0.199 91.936#efb10079.5% 0.184 86.047#d0870068.1% 0.162 75.834#a65f0055.4% 0.135 66.442#894b0047.6% 0.114 61.907#733e0a42.1% 0.095 57.708#43200428.6% 0.066 53.813
lime#f7fee798.6% 0.031 120.757#ecfcca96.7% 0.067 122.328#d8f99993.8% 0.127 124.321#bbf45189.7% 0.196 126.665#9ae60084.1% 0.238 128.85#7ccf0076.8% 0.233 130.85#5ea50064.8% 0.2 131.684#497d0053.2% 0.157 131.589#3c630045.3% 0.124 130.933#35530e40.5% 0.101 131.063#192e0327.4% 0.072 132.109
green#f0fdf498.2% 0.018 155.826#dcfce796.2% 0.044 156.743#b9f8cf92.5% 0.084 155.995#7bf1a887.1% 0.15 154.449#05df7279.2% 0.209 151.711#00c95072.3% 0.219 149.579#00a63e62.7% 0.194 149.214#00823652.7% 0.154 150.069#01663044.8% 0.119 151.328#0d542b39.3% 0.095 152.535#032e1526.6% 0.065 152.934
emerald#ecfdf597.9% 0.021 166.113#d0fae595% 0.052 163.051#a4f4cf90.5% 0.093 164.15#5ee9b584.5% 0.143 164.978#00d49276.5% 0.177 163.223#00bc7d69.6% 0.17 162.48#00996659.6% 0.145 163.225#007a5550.8% 0.118 165.612#00604543.2% 0.095 166.913#004f3b37.8% 0.077 168.94#002c2226.2% 0.051 172.552
teal#f0fdfa98.4% 0.014 180.72#cbfbf195.3% 0.051 180.801#96f7e491% 0.096 180.426#46ecd585.5% 0.138 181.071#00d5be77.7% 0.152 181.912#00bba770.4% 0.14 182.503#00968960% 0.118 184.704#00786f51.1% 0.096 186.391#005f5a43.7% 0.078 188.216#0b4f4a38.6% 0.063 188.416#022f2e27.7% 0.046 192.524
cyan#ecfeff98.4% 0.019 200.873#cefafe95.6% 0.045 203.388#a2f4fd91.7% 0.08 205.041#53eafd86.5% 0.127 207.078#00d3f278.9% 0.154 211.53#00b8db71.5% 0.143 215.221#0092b860.9% 0.126 221.723#00759552% 0.105 223.128#005f7845% 0.085 224.283#104e6439.8% 0.07 227.392#05334530.2% 0.056 229.695
sky#f0f9ff97.7% 0.013 236.62#dff2fe95.1% 0.026 236.824#b8e6fe90.1% 0.058 230.902#74d4ff82.8% 0.111 230.318#00bcff74.6% 0.16 232.661#00a6f468.5% 0.169 237.323#0084d158.8% 0.158 241.966#0069a850% 0.134 242.749#00598a44.3% 0.11 240.79#024a7039.1% 0.09 240.876#052f4a29.3% 0.066 243.157
blue#eff6ff97% 0.014 254.604#dbeafe93.2% 0.032 255.585#bedbff88.2% 0.059 254.128#8ec5ff80.9% 0.105 251.813#51a2ff70.7% 0.165 254.624#2b7fff62.3% 0.214 259.815#155dfc54.6% 0.245 262.881#1447e648.8% 0.243 264.376#193cb842.4% 0.199 265.638#1c398e37.9% 0.146 265.522#16245628.2% 0.091 267.935
indigo#eef2ff96.2% 0.018 272.314#e0e7ff93% 0.034 272.788#c6d2ff87% 0.065 274.039#a3b3ff78.5% 0.115 274.713#7c86ff67.3% 0.182 276.935#615fff58.5% 0.233 277.117#4f39f651.1% 0.262 276.966#432dd745.7% 0.24 277.023#372aac39.8% 0.195 277.366#312c8535.9% 0.144 278.697#1e1a4d25.7% 0.09 281.288
violet#f5f3ff96.9% 0.016 293.756#ede9fe94.3% 0.029 294.588#ddd6ff89.4% 0.057 293.283#c4b4ff81.1% 0.111 293.571#a684ff70.2% 0.183 293.541#8e51ff60.6% 0.25 292.717#7f22fe54.1% 0.281 293.009#7008e749.1% 0.27 292.581#5d0ec043.2% 0.232 292.759#4d179a38% 0.189 293.745#2f0d6828.3% 0.141 291.089
purple#faf5ff97.7% 0.014 308.299#f3e8ff94.6% 0.033 307.174#e9d4ff90.2% 0.063 306.703#dab2ff82.7% 0.119 306.383#c27aff71.4% 0.203 305.504#ad46ff62.7% 0.265 303.9#9810fa55.8% 0.288 302.321#8200db49.6% 0.265 301.924#6e11b043.8% 0.218 303.724#59168b38.1% 0.176 304.987#3c036629.1% 0.149 302.717
fuchsia#fdf4ff97.7% 0.017 320.058#fae8ff95.2% 0.037 318.852#f6cfff90.3% 0.076 319.62#f4a8ff83.3% 0.145 321.434#ed6aff74% 0.238 322.16#e12afb66.7% 0.295 322.15#c800de59.1% 0.293 322.896#a800b751.8% 0.253 323.949#8a019445.2% 0.211 324.591#72137840.1% 0.17 325.612#4b004f29.3% 0.136 325.661
pink#fdf2f897.1% 0.014 343.198#fce7f394.8% 0.028 342.258#fccee889.9% 0.061 343.231#fda5d582.3% 0.12 346.018#fb64b671.8% 0.202 349.761#f6339a65.6% 0.241 354.308#e6007659.2% 0.249 0.584#c6005c52.5% 0.223 3.958#a3004c45.9% 0.187 3.815#86104340.8% 0.153 2.432#51042428.4% 0.109 3.907
rose#fff1f296.9% 0.015 12.422#ffe4e694.1% 0.03 12.58#ffccd389.2% 0.058 10.001#ffa1ad81% 0.117 11.638#ff637e71.2% 0.194 13.428#ff205664.5% 0.246 16.439#ec003f58.6% 0.253 17.585#c7003651.4% 0.222 16.935#a5003645.5% 0.188 13.697#8b083641% 0.159 10.272#4d021827.1% 0.105 12.094
slate#f8fafc98.4% 0.003 247.858#f1f5f996.8% 0.007 247.896#e2e8f092.9% 0.013 255.508#cad5e286.9% 0.022 252.894#90a1b970.4% 0.04 256.788#62748e55.4% 0.046 257.417#45556c44.6% 0.043 257.281#31415837.2% 0.044 257.287#1d293d27.9% 0.041 260.031#0f172b20.8% 0.042 265.755#02061812.9% 0.042 264.695
gray#f9fafb98.5% 0.002 247.839#f3f4f696.7% 0.003 264.542#e5e7eb92.8% 0.006 264.531#d1d5dc87.2% 0.01 258.338#99a1af70.7% 0.022 261.325#6a728255.1% 0.027 264.364#4a556544.6% 0.03 256.802#36415337.3% 0.034 259.733#1e293927.8% 0.033 256.848#10182821% 0.034 264.665#03071213% 0.028 261.692
zinc#fafafa98.5% 0 none#f4f4f596.7% 0.001 286.375#e4e4e792% 0.004 286.32#d4d4d887.1% 0.006 286.286#9f9fa970.5% 0.015 286.067#71717b55.2% 0.016 285.938#52525c44.2% 0.017 285.786#3f3f4637% 0.013 285.805#27272a27.4% 0.006 286.033#18181b21% 0.006 285.885#09090b14.1% 0.005 285.823
neutral#fafafa98.5% 0 none#f5f5f597% 0 none#e5e5e592.2% 0 none#d4d4d487% 0 none#a1a1a170.8% 0 none#73737355.6% 0 none#52525243.9% 0 none#40404037.1% 0 none#26262626.9% 0 none#17171720.5% 0 none#0a0a0a14.5% 0 none
stone#fafaf998.5% 0.001 106.423#f5f5f497% 0.001 106.424#e7e5e492.3% 0.003 48.717#d6d3d186.9% 0.005 56.366#a6a09b70.9% 0.01 56.259#79716b55.3% 0.013 58.071#57534d44.4% 0.011 73.639#44403b37.4% 0.01 67.558#29252426.8% 0.007 34.298#1c191721.6% 0.006 56.043#0c0a0914.7% 0.004 49.25
mauve#fafafa98.5% 0 none#f3f1f396% 0.003 325.6#e7e4e792.2% 0.005 325.62#d7d0d786.5% 0.012 325.68#a89ea971.1% 0.019 323.02#79697b54.2% 0.034 322.5#594c5b43.5% 0.029 321.78#46394736.4% 0.029 323.89#2a212c26.3% 0.024 320.12#1d161e21.2% 0.019 322.12#0c090c14.5% 0.008 326
olive#fbfbf998.8% 0.003 106.5#f4f4f096.6% 0.005 106.5#e8e8e393% 0.007 106.5#d8d8d088% 0.011 106.6#abab9c73.7% 0.021 106.9#7c7c6758% 0.031 107.3#5b5b4b46.6% 0.025 107.3#47473939.4% 0.023 107.4#2b2b2228.6% 0.016 107.4#1d1d1622.8% 0.013 107.4#0c0c0915.3% 0.006 107.1
mist#f9fbfb98.7% 0.002 197.1#f1f3f396.3% 0.002 197.1#e3e7e892.5% 0.005 214.3#d0d6d887.2% 0.007 219.6#9ca8ab72.3% 0.014 214.4#67787c56% 0.021 213.5#4b585b45% 0.017 213.2#39444737.8% 0.015 216#22292b27.5% 0.011 216.9#161b1d21.8% 0.008 223.9#090b0c14.8% 0.004 228.8
taupe#fbfaf998.6% 0.002 67.8#f3f1f196% 0.002 17.2#e8e4e392.2% 0.005 34.3#d8d2d086.8% 0.007 39.5#aba09c71.4% 0.014 41.2#7c6d6754.7% 0.021 43.1#5b4f4b43.8% 0.017 39.3#473c3936.7% 0.016 35.7#2b242226.8% 0.011 36.5#1d181621.4% 0.009 43.1#0c0a0914.7% 0.004 49.3
oklch() is the theme value. Hex is the sRGB equivalent, gamut-mapped (CSS Color 4) where needed.www.arielton.com/cheatsheets/tailwind-colors

What is on the sheet

The OKLCH line is the value Tailwind v4 actually ships, so it is what bg-sky-500 renders on a wide-gamut screen. The hex line is its closest sRGB equivalent: 95 of the 286 swatches sit outside sRGB and were gamut-mapped with the CSS Color 4 algorithm, so the hex is what a PNG, a print file or an sRGB-only design tool will use.

Rows follow Tailwind's own order, chromatic colors around the wheel first and the neutrals (slate, gray, zinc, neutral, stone, mauve, olive, mist, taupe) at the end. Each swatch on screen links to its page with RGB, HSL, contrast ratios and the old v3.4 hex for comparison.

How to print it on one page

Pick the paper above the poster and press Print / Save as PDF. The poster scales with the paper, so labels stay at least 7pt on the smallest size and grow on larger ones; site navigation, ads and buttons are hidden in print.

Turn on Background graphics (Chrome, Edge) or Print backgrounds (Firefox, Safari), or the swatches print blank. For a print shop, Download PNG renders the poster on a canvas at print resolution for the paper you picked.

Embed or link to this cheat sheet

Linking to this page from your docs, wiki or README is the best way to share it: readers always get the current version and the print button. Copy one of these:

HTML
<a href="https://www.arielton.com/cheatsheets/tailwind-colors">Tailwind CSS colors poster (printable)</a> by <a href="https://www.arielton.com/">Arielton Oberek</a>
Markdown
[Tailwind CSS colors poster (printable)](https://www.arielton.com/cheatsheets/tailwind-colors) by [Arielton Oberek](https://www.arielton.com/)

If your team wants the same treatment for an internal API, a CLI or a style guide, write to contact@arielton.com.

Frequently asked questions

Why does Tailwind v4 define colors in OKLCH?
OKLCH is perceptually uniform, so shades with the same lightness look equally light across hues, and it can describe colors beyond sRGB for wide-gamut displays. Tailwind v4 declares its whole palette with oklch() in theme.css.
Are the Tailwind v4 colors the same as v3?
No. v4 redefined the palette in OKLCH and most shades shifted slightly, often toward more saturated colors on wide-gamut screens. The page for each swatch lists its v3.4 hex next to the v4 value.
How do I use a color from the poster in my code?
As a utility, such as bg-sky-500 or text-rose-700, or in your own CSS through the theme variable, for example var(--color-sky-500). Tailwind v4 exposes every palette color as a --color-* custom property.
Which paper size should I print the Tailwind poster on?
A3 is the smallest size where every label stays at 7pt or larger; A2 gives bigger swatches and 10pt labels. Turn on background graphics in the print dialog, or the swatches print blank.

Last reviewed by Arielton Oberek.