Skip to content
ENPT

CSS color names and the Tailwind palette

CSS defines 148 named colors (CSS Color Module Level 4), from aliceblue to yellowgreen, covering 139 distinct sRGB values. Each can be written as a keyword, a hex code or rgb(). This page lists all of them by hue, plus the 286 shades of the Tailwind CSS v4 default palette.

All CSS named colors by hue

Grouped by hue family and ordered from lightest to darkest. Each name opens the color page with every format, contrast, tints and shades, and code.

Tailwind CSS v4 default palette

The 26 hues and 11 shades of Tailwind CSS v4.3, defined in OKLCH. Swatches show the sRGB rendering; select one for its hex, OKLCH token, v3 value and contrast.

Tailwind CSS v4 default palette
Hue50100200300400500600700800900950
redred-50, #fef2f2red-100, #ffe2e2red-200, #ffc9c9red-300, #ffa2a2red-400, #ff6467red-500, #fb2c36red-600, #e7000bred-700, #c10007red-800, #9f0712red-900, #82181ared-950, #460809
orangeorange-50, #fff7edorange-100, #ffedd4orange-200, #ffd6a7orange-300, #ffb86aorange-400, #ff8904orange-500, #ff6900orange-600, #f54900orange-700, #ca3500orange-800, #9f2d00orange-900, #7e2a0corange-950, #441306
amberamber-50, #fffbebamber-100, #fef3c6amber-200, #fee685amber-300, #ffd230amber-400, #ffba00amber-500, #fd9a00amber-600, #e17100amber-700, #bb4d00amber-800, #973c00amber-900, #7b3306amber-950, #461901
yellowyellow-50, #fefce8yellow-100, #fef9c2yellow-200, #fff085yellow-300, #ffdf20yellow-400, #fcc800yellow-500, #efb100yellow-600, #d08700yellow-700, #a65f00yellow-800, #894b00yellow-900, #733e0ayellow-950, #432004
limelime-50, #f7fee7lime-100, #ecfccalime-200, #d8f999lime-300, #bbf451lime-400, #9ae600lime-500, #7ccf00lime-600, #5ea500lime-700, #497d00lime-800, #3c6300lime-900, #35530elime-950, #192e03
greengreen-50, #f0fdf4green-100, #dcfce7green-200, #b9f8cfgreen-300, #7bf1a8green-400, #05df72green-500, #00c950green-600, #00a63egreen-700, #008236green-800, #016630green-900, #0d542bgreen-950, #032e15
emeraldemerald-50, #ecfdf5emerald-100, #d0fae5emerald-200, #a4f4cfemerald-300, #5ee9b5emerald-400, #00d492emerald-500, #00bc7demerald-600, #009966emerald-700, #007a55emerald-800, #006045emerald-900, #004f3bemerald-950, #002c22
tealteal-50, #f0fdfateal-100, #cbfbf1teal-200, #96f7e4teal-300, #46ecd5teal-400, #00d5beteal-500, #00bba7teal-600, #009689teal-700, #00786fteal-800, #005f5ateal-900, #0b4f4ateal-950, #022f2e
cyancyan-50, #ecfeffcyan-100, #cefafecyan-200, #a2f4fdcyan-300, #53eafdcyan-400, #00d3f2cyan-500, #00b8dbcyan-600, #0092b8cyan-700, #007595cyan-800, #005f78cyan-900, #104e64cyan-950, #053345
skysky-50, #f0f9ffsky-100, #dff2fesky-200, #b8e6fesky-300, #74d4ffsky-400, #00bcffsky-500, #00a6f4sky-600, #0084d1sky-700, #0069a8sky-800, #00598asky-900, #024a70sky-950, #052f4a
blueblue-50, #eff6ffblue-100, #dbeafeblue-200, #bedbffblue-300, #8ec5ffblue-400, #51a2ffblue-500, #2b7fffblue-600, #155dfcblue-700, #1447e6blue-800, #193cb8blue-900, #1c398eblue-950, #162456
indigoindigo-50, #eef2ffindigo-100, #e0e7ffindigo-200, #c6d2ffindigo-300, #a3b3ffindigo-400, #7c86ffindigo-500, #615fffindigo-600, #4f39f6indigo-700, #432dd7indigo-800, #372aacindigo-900, #312c85indigo-950, #1e1a4d
violetviolet-50, #f5f3ffviolet-100, #ede9feviolet-200, #ddd6ffviolet-300, #c4b4ffviolet-400, #a684ffviolet-500, #8e51ffviolet-600, #7f22feviolet-700, #7008e7violet-800, #5d0ec0violet-900, #4d179aviolet-950, #2f0d68
purplepurple-50, #faf5ffpurple-100, #f3e8ffpurple-200, #e9d4ffpurple-300, #dab2ffpurple-400, #c27affpurple-500, #ad46ffpurple-600, #9810fapurple-700, #8200dbpurple-800, #6e11b0purple-900, #59168bpurple-950, #3c0366
fuchsiafuchsia-50, #fdf4fffuchsia-100, #fae8fffuchsia-200, #f6cffffuchsia-300, #f4a8fffuchsia-400, #ed6afffuchsia-500, #e12afbfuchsia-600, #c800defuchsia-700, #a800b7fuchsia-800, #8a0194fuchsia-900, #721378fuchsia-950, #4b004f
pinkpink-50, #fdf2f8pink-100, #fce7f3pink-200, #fccee8pink-300, #fda5d5pink-400, #fb64b6pink-500, #f6339apink-600, #e60076pink-700, #c6005cpink-800, #a3004cpink-900, #861043pink-950, #510424
roserose-50, #fff1f2rose-100, #ffe4e6rose-200, #ffccd3rose-300, #ffa1adrose-400, #ff637erose-500, #ff2056rose-600, #ec003frose-700, #c70036rose-800, #a50036rose-900, #8b0836rose-950, #4d0218
slateslate-50, #f8fafcslate-100, #f1f5f9slate-200, #e2e8f0slate-300, #cad5e2slate-400, #90a1b9slate-500, #62748eslate-600, #45556cslate-700, #314158slate-800, #1d293dslate-900, #0f172bslate-950, #020618
graygray-50, #f9fafbgray-100, #f3f4f6gray-200, #e5e7ebgray-300, #d1d5dcgray-400, #99a1afgray-500, #6a7282gray-600, #4a5565gray-700, #364153gray-800, #1e2939gray-900, #101828gray-950, #030712
zinczinc-50, #fafafazinc-100, #f4f4f5zinc-200, #e4e4e7zinc-300, #d4d4d8zinc-400, #9f9fa9zinc-500, #71717bzinc-600, #52525czinc-700, #3f3f46zinc-800, #27272azinc-900, #18181bzinc-950, #09090b
neutralneutral-50, #fafafaneutral-100, #f5f5f5neutral-200, #e5e5e5neutral-300, #d4d4d4neutral-400, #a1a1a1neutral-500, #737373neutral-600, #525252neutral-700, #404040neutral-800, #262626neutral-900, #171717neutral-950, #0a0a0a
stonestone-50, #fafaf9stone-100, #f5f5f4stone-200, #e7e5e4stone-300, #d6d3d1stone-400, #a6a09bstone-500, #79716bstone-600, #57534dstone-700, #44403bstone-800, #292524stone-900, #1c1917stone-950, #0c0a09
mauvemauve-50, #fafafamauve-100, #f3f1f3mauve-200, #e7e4e7mauve-300, #d7d0d7mauve-400, #a89ea9mauve-500, #79697bmauve-600, #594c5bmauve-700, #463947mauve-800, #2a212cmauve-900, #1d161emauve-950, #0c090c
oliveolive-50, #fbfbf9olive-100, #f4f4f0olive-200, #e8e8e3olive-300, #d8d8d0olive-400, #abab9colive-500, #7c7c67olive-600, #5b5b4bolive-700, #474739olive-800, #2b2b22olive-900, #1d1d16olive-950, #0c0c09
mistmist-50, #f9fbfbmist-100, #f1f3f3mist-200, #e3e7e8mist-300, #d0d6d8mist-400, #9ca8abmist-500, #67787cmist-600, #4b585bmist-700, #394447mist-800, #22292bmist-900, #161b1dmist-950, #090b0c
taupetaupe-50, #fbfaf9taupe-100, #f3f1f1taupe-200, #e8e4e3taupe-300, #d8d2d0taupe-400, #aba09ctaupe-500, #7c6d67taupe-600, #5b4f4btaupe-700, #473c39taupe-800, #2b2422taupe-900, #1d1816taupe-950, #0c0a09

Hex, RGB, HSL and OKLCH explained

Every format below describes the same color, coral. What changes is the color space and how closely each number tracks what the eye perceives.

Hex, RGB, HSL and OKLCH explained
FormatCoral written asNotes
Hex#ff7f50Three 8-bit sRGB channels in base 16. Compact and universal; add a fourth pair for alpha (#ff7f5080).
RGBrgb(255 127 80)The same sRGB channels in decimal, 0 to 255. Easy to read and to animate channel by channel.
HSLhsl(16 100% 66%)Hue angle, saturation and lightness, derived from sRGB. Handy for hand-tuning, but equal HSL lightness does not look equally light across hues.
HWBhwb(16 31% 0%)Hue plus how much white and black are mixed in. Intuitive for tints and shades; still sRGB-bound.
OKLCHoklch(73.5% 0.168 40.2)Perceptual lightness, chroma and hue from the OKLab model. Equal L looks equally light, and it can express Display P3 and wider colors. Tailwind v4 defines its palette this way.

Named colors are always sRGB. The Tailwind v4 palette is defined in OKLCH instead, and 95 of its 286 shades fall outside sRGB: on standard screens the browser has to bring them into sRGB. The hex on each shade page is the value produced by the CSS Color 4 gamut mapping algorithm.

Frequently asked questions

How many named colors are there in CSS?
148 keywords, which map to 139 distinct colors: aqua and cyan, fuchsia and magenta, and the seven gray/grey spelling pairs are duplicates. transparent and currentcolor also exist but are not fixed colors.
Are CSS color names case-sensitive?
No. CSS Color 4 defines the names as ASCII case-insensitive identifiers, so Coral, coral and CORAL are the same color.
Why is darkgray lighter than gray?
Because gray (#808080) came from the HTML palette while darkgray (#a9a9a9) came from the X11 list, where gray was #bebebe. The specification calls this out, together with lightpink being darker than pink.
Should I use named colors in production?
They work in every browser, but the specification itself says their use is not encouraged: the names are inconsistent and cover the color space unevenly. For a design system, prefer CSS custom properties holding hex or OKLCH values.
What is the difference between hex, RGB, HSL and OKLCH?
Hex and RGB encode the same thing (red, green and blue intensity). HSL rearranges it into hue, saturation and lightness, but HSL lightness does not match perceived lightness. OKLCH uses perceptually uniform lightness, chroma and hue and can reach colors outside sRGB, like the Tailwind v4 palette.

Last reviewed by Arielton Oberek.