The New CSSColors Extended
13 additional color palettes built with oklch() for perceptually uniform, vibrant colors. Each palette provides 11 shades (50-950), plus text, background, border, gradient, hover, and dark mode utility classes.
Installation
Install the addon via npm or load it from a CDN alongside the core library.
npm install @thenewcss/colors-extendedColor Palettes
Each palette defines 11 CSS custom properties on :root using the pattern --color-{palette}-{shade}. All values use the oklch() color space for perceptual uniformity.
Token Reference
| Token Pattern | Shades | Example |
|---|---|---|
--color-indigo-* | 50-950 | var(--color-indigo-500) |
--color-violet-* | 50-950 | var(--color-violet-500) |
--color-slate-* | 50-950 | var(--color-slate-500) |
--color-emerald-* | 50-950 | var(--color-emerald-500) |
--color-cyan-* | 50-950 | var(--color-cyan-500) |
--color-rose-* | 50-950 | var(--color-rose-500) |
--color-amber-* | 50-950 | var(--color-amber-500) |
--color-lime-* | 50-950 | var(--color-lime-500) |
--color-fuchsia-* | 50-950 | var(--color-fuchsia-500) |
--color-sky-* | 50-950 | var(--color-sky-500) |
--color-stone-* | 50-950 | var(--color-stone-500) |
--color-zinc-* | 50-950 | var(--color-zinc-500) |
--color-neutral-* | 50-950 | var(--color-neutral-500) |
Palette Swatches
indigo
violet
slate
emerald
cyan
rose
amber
lime
fuchsia
sky
stone
zinc
neutral
Text Color Utilities
Text utilities are available for shades 500, 600, and 700 across all 13 palettes (39 classes total). Use text-{color}-{shade} to set the text color.
Examples
Indigo 600Violet 600Emerald 600Cyan 600Rose 600Amber 600Lime 600Fuchsia 600Sky 600
<span class="text-indigo-600">Indigo text</span>
<span class="text-rose-500">Rose text</span>
<span class="text-emerald-700">Emerald text</span>Class Reference
| Class | CSS Property |
|---|---|
text-indigo-500 | color: var(--color-indigo-500) |
text-indigo-600 | color: var(--color-indigo-600) |
text-indigo-700 | color: var(--color-indigo-700) |
text-violet-500 | color: var(--color-violet-500) |
text-violet-600 | color: var(--color-violet-600) |
text-violet-700 | color: var(--color-violet-700) |
text-slate-500 | color: var(--color-slate-500) |
text-slate-600 | color: var(--color-slate-600) |
text-slate-700 | color: var(--color-slate-700) |
text-emerald-500 | color: var(--color-emerald-500) |
text-emerald-600 | color: var(--color-emerald-600) |
text-emerald-700 | color: var(--color-emerald-700) |
text-cyan-500 | color: var(--color-cyan-500) |
text-cyan-600 | color: var(--color-cyan-600) |
text-cyan-700 | color: var(--color-cyan-700) |
text-rose-500 | color: var(--color-rose-500) |
text-rose-600 | color: var(--color-rose-600) |
text-rose-700 | color: var(--color-rose-700) |
text-amber-500 | color: var(--color-amber-500) |
text-amber-600 | color: var(--color-amber-600) |
text-amber-700 | color: var(--color-amber-700) |
text-lime-500 | color: var(--color-lime-500) |
text-lime-600 | color: var(--color-lime-600) |
text-lime-700 | color: var(--color-lime-700) |
text-fuchsia-500 | color: var(--color-fuchsia-500) |
text-fuchsia-600 | color: var(--color-fuchsia-600) |
text-fuchsia-700 | color: var(--color-fuchsia-700) |
text-sky-500 | color: var(--color-sky-500) |
text-sky-600 | color: var(--color-sky-600) |
text-sky-700 | color: var(--color-sky-700) |
text-stone-500 | color: var(--color-stone-500) |
text-stone-600 | color: var(--color-stone-600) |
text-stone-700 | color: var(--color-stone-700) |
text-zinc-500 | color: var(--color-zinc-500) |
text-zinc-600 | color: var(--color-zinc-600) |
text-zinc-700 | color: var(--color-zinc-700) |
text-neutral-500 | color: var(--color-neutral-500) |
text-neutral-600 | color: var(--color-neutral-600) |
text-neutral-700 | color: var(--color-neutral-700) |
Background Color Utilities
Background utilities use bg-{color}-{shade}. Chromatic palettes include shades 50, 100, 500, 600, 700. Neutral palettes (slate, stone, zinc, neutral) include additional shades for UI surfaces: 200, 800, 900, 950.
Examples
indigo-50
indigo-500
indigo-700
rose-50
rose-500
rose-700
emerald-50
emerald-500
cyan-50
cyan-500
amber-50
amber-500
slate-100
slate-500
slate-800
slate-950
<div class="bg-indigo-500 text-white p-4 rounded-lg">
Indigo background
</div>
<div class="bg-slate-900 text-white p-4 rounded-lg">
Slate dark background
</div>Class Reference — Chromatic Palettes
Chromatic palettes provide shades 50, 100, 500, 600, and 700.
| Class | CSS Property |
|---|---|
bg-indigo-50 | background-color: var(--color-indigo-50) |
bg-indigo-100 | background-color: var(--color-indigo-100) |
bg-indigo-500 | background-color: var(--color-indigo-500) |
bg-indigo-600 | background-color: var(--color-indigo-600) |
bg-indigo-700 | background-color: var(--color-indigo-700) |
bg-violet-50 | background-color: var(--color-violet-50) |
bg-violet-100 | background-color: var(--color-violet-100) |
bg-violet-500 | background-color: var(--color-violet-500) |
bg-violet-600 | background-color: var(--color-violet-600) |
bg-violet-700 | background-color: var(--color-violet-700) |
bg-emerald-50 | background-color: var(--color-emerald-50) |
bg-emerald-100 | background-color: var(--color-emerald-100) |
bg-emerald-500 | background-color: var(--color-emerald-500) |
bg-emerald-600 | background-color: var(--color-emerald-600) |
bg-emerald-700 | background-color: var(--color-emerald-700) |
bg-cyan-50 | background-color: var(--color-cyan-50) |
bg-cyan-100 | background-color: var(--color-cyan-100) |
bg-cyan-500 | background-color: var(--color-cyan-500) |
bg-cyan-600 | background-color: var(--color-cyan-600) |
bg-cyan-700 | background-color: var(--color-cyan-700) |
bg-rose-50 | background-color: var(--color-rose-50) |
bg-rose-100 | background-color: var(--color-rose-100) |
bg-rose-500 | background-color: var(--color-rose-500) |
bg-rose-600 | background-color: var(--color-rose-600) |
bg-rose-700 | background-color: var(--color-rose-700) |
bg-amber-50 | background-color: var(--color-amber-50) |
bg-amber-100 | background-color: var(--color-amber-100) |
bg-amber-500 | background-color: var(--color-amber-500) |
bg-amber-600 | background-color: var(--color-amber-600) |
bg-amber-700 | background-color: var(--color-amber-700) |
bg-lime-50 | background-color: var(--color-lime-50) |
bg-lime-100 | background-color: var(--color-lime-100) |
bg-lime-500 | background-color: var(--color-lime-500) |
bg-lime-600 | background-color: var(--color-lime-600) |
bg-lime-700 | background-color: var(--color-lime-700) |
bg-fuchsia-50 | background-color: var(--color-fuchsia-50) |
bg-fuchsia-100 | background-color: var(--color-fuchsia-100) |
bg-fuchsia-500 | background-color: var(--color-fuchsia-500) |
bg-fuchsia-600 | background-color: var(--color-fuchsia-600) |
bg-fuchsia-700 | background-color: var(--color-fuchsia-700) |
bg-sky-50 | background-color: var(--color-sky-50) |
bg-sky-100 | background-color: var(--color-sky-100) |
bg-sky-500 | background-color: var(--color-sky-500) |
bg-sky-600 | background-color: var(--color-sky-600) |
bg-sky-700 | background-color: var(--color-sky-700) |
Class Reference — Neutral Palettes
Neutral palettes (slate, stone, zinc, neutral) include extra shades for UI surfaces and dark backgrounds.
| Class | CSS Property |
|---|---|
bg-slate-50 | background-color: var(--color-slate-50) |
bg-slate-100 | background-color: var(--color-slate-100) |
bg-slate-200 | background-color: var(--color-slate-200) |
bg-slate-500 | background-color: var(--color-slate-500) |
bg-slate-600 | background-color: var(--color-slate-600) |
bg-slate-700 | background-color: var(--color-slate-700) |
bg-slate-800 | background-color: var(--color-slate-800) |
bg-slate-900 | background-color: var(--color-slate-900) |
bg-slate-950 | background-color: var(--color-slate-950) |
bg-stone-50 | background-color: var(--color-stone-50) |
bg-stone-100 | background-color: var(--color-stone-100) |
bg-stone-200 | background-color: var(--color-stone-200) |
bg-stone-500 | background-color: var(--color-stone-500) |
bg-stone-600 | background-color: var(--color-stone-600) |
bg-stone-700 | background-color: var(--color-stone-700) |
bg-stone-800 | background-color: var(--color-stone-800) |
bg-stone-900 | background-color: var(--color-stone-900) |
bg-stone-950 | background-color: var(--color-stone-950) |
bg-zinc-50 | background-color: var(--color-zinc-50) |
bg-zinc-100 | background-color: var(--color-zinc-100) |
bg-zinc-200 | background-color: var(--color-zinc-200) |
bg-zinc-500 | background-color: var(--color-zinc-500) |
bg-zinc-600 | background-color: var(--color-zinc-600) |
bg-zinc-700 | background-color: var(--color-zinc-700) |
bg-zinc-800 | background-color: var(--color-zinc-800) |
bg-zinc-900 | background-color: var(--color-zinc-900) |
bg-zinc-950 | background-color: var(--color-zinc-950) |
bg-neutral-50 | background-color: var(--color-neutral-50) |
bg-neutral-100 | background-color: var(--color-neutral-100) |
bg-neutral-200 | background-color: var(--color-neutral-200) |
bg-neutral-500 | background-color: var(--color-neutral-500) |
bg-neutral-600 | background-color: var(--color-neutral-600) |
bg-neutral-700 | background-color: var(--color-neutral-700) |
bg-neutral-800 | background-color: var(--color-neutral-800) |
bg-neutral-900 | background-color: var(--color-neutral-900) |
bg-neutral-950 | background-color: var(--color-neutral-950) |
Border Color Utilities
Border utilities are available for shades 200, 300, and 500 across all 13 palettes. Use border-{color}-{shade} to set the border color.
Examples
border-indigo-500
border-rose-300
border-emerald-500
border-slate-200
<div class="border-2 border-indigo-500 rounded p-4">Indigo border</div>
<div class="border border-rose-300 rounded p-4">Rose border</div>Class Reference
| Class | CSS Property |
|---|---|
border-indigo-200 | border-color: var(--color-indigo-200) |
border-indigo-300 | border-color: var(--color-indigo-300) |
border-indigo-500 | border-color: var(--color-indigo-500) |
border-violet-200 | border-color: var(--color-violet-200) |
border-violet-300 | border-color: var(--color-violet-300) |
border-violet-500 | border-color: var(--color-violet-500) |
border-slate-200 | border-color: var(--color-slate-200) |
border-slate-300 | border-color: var(--color-slate-300) |
border-slate-500 | border-color: var(--color-slate-500) |
border-emerald-200 | border-color: var(--color-emerald-200) |
border-emerald-300 | border-color: var(--color-emerald-300) |
border-emerald-500 | border-color: var(--color-emerald-500) |
border-cyan-200 | border-color: var(--color-cyan-200) |
border-cyan-300 | border-color: var(--color-cyan-300) |
border-cyan-500 | border-color: var(--color-cyan-500) |
border-rose-200 | border-color: var(--color-rose-200) |
border-rose-300 | border-color: var(--color-rose-300) |
border-rose-500 | border-color: var(--color-rose-500) |
border-amber-200 | border-color: var(--color-amber-200) |
border-amber-300 | border-color: var(--color-amber-300) |
border-amber-500 | border-color: var(--color-amber-500) |
border-lime-200 | border-color: var(--color-lime-200) |
border-lime-300 | border-color: var(--color-lime-300) |
border-lime-500 | border-color: var(--color-lime-500) |
border-fuchsia-200 | border-color: var(--color-fuchsia-200) |
border-fuchsia-300 | border-color: var(--color-fuchsia-300) |
border-fuchsia-500 | border-color: var(--color-fuchsia-500) |
border-sky-200 | border-color: var(--color-sky-200) |
border-sky-300 | border-color: var(--color-sky-300) |
border-sky-500 | border-color: var(--color-sky-500) |
border-stone-200 | border-color: var(--color-stone-200) |
border-stone-300 | border-color: var(--color-stone-300) |
border-stone-500 | border-color: var(--color-stone-500) |
border-zinc-200 | border-color: var(--color-zinc-200) |
border-zinc-300 | border-color: var(--color-zinc-300) |
border-zinc-500 | border-color: var(--color-zinc-500) |
border-neutral-200 | border-color: var(--color-neutral-200) |
border-neutral-300 | border-color: var(--color-neutral-300) |
border-neutral-500 | border-color: var(--color-neutral-500) |
Gradient Utilities
Gradient stop utilities set the --gradient-from and --gradient-to custom properties at the 500 shade. Combine with the core library's bg-gradient-to-r (or other direction) class to create gradients.
Example
Indigo to Violet
Rose to Fuchsia
Emerald to Cyan
<div class="bg-gradient-to-r from-indigo-500 to-violet-500 text-white p-4 rounded-lg">
Indigo to Violet gradient
</div>Class Reference
| Class | CSS Property |
|---|---|
from-indigo-500 | --gradient-from: var(--color-indigo-500) |
to-indigo-500 | --gradient-to: var(--color-indigo-500) |
from-violet-500 | --gradient-from: var(--color-violet-500) |
to-violet-500 | --gradient-to: var(--color-violet-500) |
from-slate-500 | --gradient-from: var(--color-slate-500) |
to-slate-500 | --gradient-to: var(--color-slate-500) |
from-emerald-500 | --gradient-from: var(--color-emerald-500) |
to-emerald-500 | --gradient-to: var(--color-emerald-500) |
from-cyan-500 | --gradient-from: var(--color-cyan-500) |
to-cyan-500 | --gradient-to: var(--color-cyan-500) |
from-rose-500 | --gradient-from: var(--color-rose-500) |
to-rose-500 | --gradient-to: var(--color-rose-500) |
from-amber-500 | --gradient-from: var(--color-amber-500) |
to-amber-500 | --gradient-to: var(--color-amber-500) |
from-lime-500 | --gradient-from: var(--color-lime-500) |
to-lime-500 | --gradient-to: var(--color-lime-500) |
from-fuchsia-500 | --gradient-from: var(--color-fuchsia-500) |
to-fuchsia-500 | --gradient-to: var(--color-fuchsia-500) |
from-sky-500 | --gradient-from: var(--color-sky-500) |
to-sky-500 | --gradient-to: var(--color-sky-500) |
from-stone-500 | --gradient-from: var(--color-stone-500) |
to-stone-500 | --gradient-to: var(--color-stone-500) |
from-zinc-500 | --gradient-from: var(--color-zinc-500) |
to-zinc-500 | --gradient-to: var(--color-zinc-500) |
from-neutral-500 | --gradient-from: var(--color-neutral-500) |
to-neutral-500 | --gradient-to: var(--color-neutral-500) |
Hover Variants
Hover variants allow color changes on hover for text and background colors at shades 600 and 700. Use the escaped colon syntax: hover\:text-{color}-{shade} and hover\:bg-{color}-{shade}.
Example
<button class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-lg">
Hover me
</button>
<a class="text-rose-600 hover:text-rose-700" href="#">Link text</a>Class Reference — Hover Text
| Class | CSS Property |
|---|---|
hover\:text-indigo-600 | color: var(--color-indigo-600) on :hover |
hover\:text-indigo-700 | color: var(--color-indigo-700) on :hover |
hover\:text-violet-600 | color: var(--color-violet-600) on :hover |
hover\:text-violet-700 | color: var(--color-violet-700) on :hover |
hover\:text-slate-600 | color: var(--color-slate-600) on :hover |
hover\:text-slate-700 | color: var(--color-slate-700) on :hover |
hover\:text-emerald-600 | color: var(--color-emerald-600) on :hover |
hover\:text-emerald-700 | color: var(--color-emerald-700) on :hover |
hover\:text-cyan-600 | color: var(--color-cyan-600) on :hover |
hover\:text-cyan-700 | color: var(--color-cyan-700) on :hover |
hover\:text-rose-600 | color: var(--color-rose-600) on :hover |
hover\:text-rose-700 | color: var(--color-rose-700) on :hover |
hover\:text-amber-600 | color: var(--color-amber-600) on :hover |
hover\:text-amber-700 | color: var(--color-amber-700) on :hover |
hover\:text-lime-600 | color: var(--color-lime-600) on :hover |
hover\:text-lime-700 | color: var(--color-lime-700) on :hover |
hover\:text-fuchsia-600 | color: var(--color-fuchsia-600) on :hover |
hover\:text-fuchsia-700 | color: var(--color-fuchsia-700) on :hover |
hover\:text-sky-600 | color: var(--color-sky-600) on :hover |
hover\:text-sky-700 | color: var(--color-sky-700) on :hover |
hover\:text-stone-600 | color: var(--color-stone-600) on :hover |
hover\:text-stone-700 | color: var(--color-stone-700) on :hover |
hover\:text-zinc-600 | color: var(--color-zinc-600) on :hover |
hover\:text-zinc-700 | color: var(--color-zinc-700) on :hover |
hover\:text-neutral-600 | color: var(--color-neutral-600) on :hover |
hover\:text-neutral-700 | color: var(--color-neutral-700) on :hover |
Class Reference — Hover Background
| Class | CSS Property |
|---|---|
hover\:bg-indigo-600 | background-color: var(--color-indigo-600) on :hover |
hover\:bg-indigo-700 | background-color: var(--color-indigo-700) on :hover |
hover\:bg-violet-600 | background-color: var(--color-violet-600) on :hover |
hover\:bg-violet-700 | background-color: var(--color-violet-700) on :hover |
hover\:bg-slate-600 | background-color: var(--color-slate-600) on :hover |
hover\:bg-slate-700 | background-color: var(--color-slate-700) on :hover |
hover\:bg-emerald-600 | background-color: var(--color-emerald-600) on :hover |
hover\:bg-emerald-700 | background-color: var(--color-emerald-700) on :hover |
hover\:bg-cyan-600 | background-color: var(--color-cyan-600) on :hover |
hover\:bg-cyan-700 | background-color: var(--color-cyan-700) on :hover |
hover\:bg-rose-600 | background-color: var(--color-rose-600) on :hover |
hover\:bg-rose-700 | background-color: var(--color-rose-700) on :hover |
hover\:bg-amber-600 | background-color: var(--color-amber-600) on :hover |
hover\:bg-amber-700 | background-color: var(--color-amber-700) on :hover |
hover\:bg-lime-600 | background-color: var(--color-lime-600) on :hover |
hover\:bg-lime-700 | background-color: var(--color-lime-700) on :hover |
hover\:bg-fuchsia-600 | background-color: var(--color-fuchsia-600) on :hover |
hover\:bg-fuchsia-700 | background-color: var(--color-fuchsia-700) on :hover |
hover\:bg-sky-600 | background-color: var(--color-sky-600) on :hover |
hover\:bg-sky-700 | background-color: var(--color-sky-700) on :hover |
hover\:bg-stone-600 | background-color: var(--color-stone-600) on :hover |
hover\:bg-stone-700 | background-color: var(--color-stone-700) on :hover |
hover\:bg-zinc-600 | background-color: var(--color-zinc-600) on :hover |
hover\:bg-zinc-700 | background-color: var(--color-zinc-700) on :hover |
hover\:bg-neutral-600 | background-color: var(--color-neutral-600) on :hover |
hover\:bg-neutral-700 | background-color: var(--color-neutral-700) on :hover |
Dark Mode
The neutral palettes (slate, stone, zinc, neutral) include automatic dark mode support. Shades are inverted so that light surfaces become dark and dark surfaces become light. Dark mode activates via prefers-color-scheme: dark or the [data-theme="dark"] attribute for manual toggle.
Chromatic palettes (indigo, violet, emerald, cyan, rose, amber, lime, fuchsia, sky) do not include shade inversion in dark mode. Only the four neutral palettes remap their shades.
Shade Inversion
In dark mode, neutral palette shades are inverted. For example, bg-slate-50 (nearly white in light mode) becomes dark, while bg-slate-950 (nearly black in light mode) becomes light.
/* Dark mode shade inversion (applied automatically) */
@media (prefers-color-scheme: dark) {
:root {
--color-slate-50: /* dark value */;
--color-slate-950: /* light value */;
/* ...all shades remapped */
}
}
/* Also works with manual toggle */
[data-theme="dark"] {
--color-slate-50: /* dark value */;
/* ... */
}Dark Mode Palettes
| Palette | Dark Mode Support | Behavior |
|---|---|---|
| slate | Yes | Shade inversion (50 swaps with 950, 100 with 900, etc.) |
| stone | Yes | Shade inversion (50 swaps with 950, 100 with 900, etc.) |
| zinc | Yes | Shade inversion (50 swaps with 950, 100 with 900, etc.) |
| neutral | Yes | Shade inversion (50 swaps with 950, 100 with 900, etc.) |
| indigo | No | Colors remain unchanged in dark mode |
| violet | No | Colors remain unchanged in dark mode |
| emerald | No | Colors remain unchanged in dark mode |
| cyan | No | Colors remain unchanged in dark mode |
| rose | No | Colors remain unchanged in dark mode |
| amber | No | Colors remain unchanged in dark mode |
| lime | No | Colors remain unchanged in dark mode |
| fuchsia | No | Colors remain unchanged in dark mode |
| sky | No | Colors remain unchanged in dark mode |
Summary
| Category | Pattern | Shades | Count |
|---|---|---|---|
| Tokens | --color-{palette}-{shade} | 50-950 | 143 |
| Text | text-{color}-{shade} | 500, 600, 700 | 39 |
| Background (chromatic) | bg-{color}-{shade} | 50, 100, 500, 600, 700 | 45 |
| Background (neutral) | bg-{color}-{shade} | 50, 100, 200, 500, 600, 700, 800, 900, 950 | 36 |
| Border | border-{color}-{shade} | 200, 300, 500 | 39 |
| Gradient from | from-{color}-500 | 500 | 13 |
| Gradient to | to-{color}-500 | 500 | 13 |
| Hover text | hover\:text-{color}-{shade} | 600, 700 | 26 |
| Hover background | hover\:bg-{color}-{shade} | 600, 700 | 26 |