Changelog

Colors

Hummingbird provides a small set of semantic color variables, which makes it easy to apply and customize consistently across the project.

Overview

Instead of applying fixed Tailwind palette classes like:

  • text-red-500
  • bg-green-600
  • border-blue-700 etc.

It is recommended to rely on semantic color classes. Semantic colors are mapped to design tokens and automatically adapt when themes change.

For example,

  • text-primary
  • bg-subtle
  • border-subtle etc.

This approach prevents dependence on specific palette values (blue-500, green-600, etc.). Instead, components reference semantic roles (primary, secondary, warning), making the UI easier to maintain, brand, and theme.

Behind the scenes, each semantic color class points to a CSS variable. Updating or overriding that variable updates the color everywhere it’s used.

List of semantic colors

Here is the list of semantic colors that will be generated as Tailwind utilities and also available as CSS variables.

Background colors
ClassCSS variable
bg-subtle--background-color-subtle
bg-muted--background-color-muted
bg-default--background-color-default
bg-highlight--background-color-highlight
bg-emphasis--background-color-emphasis
Text colors
Subtle texttext-subtle--text-color-subtle
Muted texttext-muted--text-color-muted
Default texttext-default--text-color-default
Highlight texttext-highlight--text-color-highlight
Emphasis texttext-emphasis--text-color-emphasis
Border colors
border-subtle--border-color-subtle
border-default--border-color-default
border-emphasis--border-color-emphasis
Actions colors (generate all color-related utilities)
Color nameDescription
Active color--color-active
Hover color--color-hover
Selected color--color-selected
Disabled textDisabled text color--color-disabled-color
Disabled Background--color-disabled
Focus color--color-focus
Theme colors (generate all color-related utilities)
Light color--color-light
Dark color--color-dark
Contrast
Contrast text color--color-contrast
Primary lighter color--color-primary-lighter
Primary light color--color-primary-light
Primary color--color-primary
Primary dark color--color-primary-dark
Primary darker color--color-primary-darker
Secondary lighter color--color-secondary-lighter
Secondary light color--color-secondary-light
Secondary color--color-secondary
Secondary dark color--color-secondary-dark
Secondary darker color--color-secondary-darker
Info lighter color--color-info-lighter
Info light color--color-info-light
Info color--color-info
Info dark color--color-info-dark
Info darker color--color-info-darker
Success lighter color--color-success-lighter
Success light color--color-success-light
Success color--color-success
Success dark color--color-success-dark
Success darker color--color-success-darker
Warning lighter color--color-warning-lighter
Warning light color--color-warning-light
Warning color--color-warning
Warning dark color--color-warning-dark
Warning darker color--color-warning-darker
Danger lighter color--color-danger-lighter
Danger light color--color-danger-light
Danger color--color-danger
Danger dark color--color-danger-dark
Danger darker color--color-danger-darker

How to use

Use semantic color classes like:

  • bg-primary
  • text-muted
  • border-default

These classes use theme’s color variables, so the UI stays consistent when customizing or switching themes.

<button class="bg-primary text-contrast hover:bg-primary-dark">
  Button
</button>

<p class="text-muted">Muted paragraph text</p>

<div class="border border-default bg-default p-4">
  Card with subtle border
</div>

Customize color

Override any theme color or palette color by redefining its CSS variable inside a @theme block after importing Hummingbird

@import "tailwindcss";
@import "@hummingbirdui/hummingbird";

@theme {
  --color-blue-500: oklch(65.2% 0.19 253.205);
  --color-purple-500: oklch(62.1% 0.253 305.351);

  --background-color-subtle: oklch(98% 0.02 240);
  --color-primary: oklch(65.2% 0.19 253.205);
  --color-secondary: oklch(62.1% 0.253 305.351);
}

Color palettes

Each Hummingbird theme includes its own complete color palette, carefully designed to maintain a consistent visual tone. Use these palettes to customize existing themes or create entirely new ones with confidence.


50
100
200
300
400
500
600
700
800
900
950

blue

sky

cyan

indigo

violet

purple

fuchsia

pink

red

rose

orange

amber

yellow

lime

teal

emerald

green

olive

slate

gray

zinc

neutral

stone

mist

mauve

taupe

brown

maroon

Default color palette reference

Here's a complete list of the default colors and their values for reference:

@theme {
  --color-blue-50: oklch(96.6% 0.017 248.005);
  --color-blue-100: oklch(92.1% 0.04 248.259);
  --color-blue-200: oklch(84.6% 0.08 247.688);
  --color-blue-300: oklch(78.2% 0.116 248.462);
  --color-blue-400: oklch(71.3% 0.155 250.48);
  --color-blue-500: oklch(65.2% 0.19 253.205);
  --color-blue-600: oklch(57.2% 0.194 255.787);
  --color-blue-700: oklch(46.7% 0.154 254.944);
  --color-blue-800: oklch(34.6% 0.109 253.653);
  --color-blue-900: oklch(22.4% 0.065 250.695);
  --color-blue-950: oklch(16.7% 0.041 244.034);

  --color-sky-50: oklch(96.7% 0.023 220.721);
  --color-sky-100: oklch(92.8% 0.05 218.681);
  --color-sky-200: oklch(86.4% 0.094 220.171);
  --color-sky-300: oklch(81% 0.123 222.706);
  --color-sky-400: oklch(76.9% 0.146 227.492);
  --color-sky-500: oklch(67.6% 0.134 229.829);
  --color-sky-600: oklch(56.1% 0.11 228.989);
  --color-sky-700: oklch(46% 0.09 228.714);
  --color-sky-800: oklch(34.3% 0.066 226.856);
  --color-sky-900: oklch(22.6% 0.042 222.511);
  --color-sky-950: oklch(16.4% 0.03 219.873);

  --color-cyan-50: oklch(97.9% 0.026 199.659);
  --color-cyan-100: oklch(95.6% 0.044 203.388);
  --color-cyan-200: oklch(91.2% 0.08 205.688);
  --color-cyan-300: oklch(86.5% 0.115 207.078);
  --color-cyan-400: oklch(79.7% 0.134 211.53);
  --color-cyan-500: oklch(71.5% 0.126 215.221);
  --color-cyan-600: oklch(60.9% 0.111 221.723);
  --color-cyan-700: oklch(52% 0.094 223.128);
  --color-cyan-800: oklch(45% 0.077 224.283);
  --color-cyan-900: oklch(29.3% 0.047 222.73);
  --color-cyan-950: oklch(19.6% 0.028 220.777);

  --color-indigo-50: oklch(95.2% 0.023 277.957);
  --color-indigo-100: oklch(91.8% 0.039 272.953);
  --color-indigo-200: oklch(86.1% 0.067 273.722);
  --color-indigo-300: oklch(78.5% 0.104 274.713);
  --color-indigo-400: oklch(68% 0.158 276.935);
  --color-indigo-500: oklch(58.5% 0.204 277.117);
  --color-indigo-600: oklch(51.1% 0.23 276.966);
  --color-indigo-700: oklch(45.7% 0.215 277.023);
  --color-indigo-800: oklch(35.9% 0.135 278.697);
  --color-indigo-900: oklch(24.4% 0.085 279.9);
  --color-indigo-950: oklch(17.2% 0.048 281.899);

  --color-violet-50: oklch(94.9% 0.027 295.052);
  --color-violet-100: oklch(91.2% 0.044 294.116);
  --color-violet-200: oklch(85.9% 0.075 293.246);
  --color-violet-300: oklch(79.9% 0.109 293.317);
  --color-violet-400: oklch(70.9% 0.159 293.541);
  --color-violet-500: oklch(60.6% 0.219 292.717);
  --color-violet-600: oklch(54.1% 0.247 293.009);
  --color-violet-700: oklch(49.1% 0.241 292.581);
  --color-violet-800: oklch(38% 0.178 293.745);
  --color-violet-900: oklch(25.3% 0.108 294.873);
  --color-violet-950: oklch(17.3% 0.06 298.5);

  --color-purple-50: oklch(96.4% 0.023 310.71);
  --color-purple-100: oklch(91.6% 0.054 309.501);
  --color-purple-200: oklch(83.3% 0.109 308.786);
  --color-purple-300: oklch(76% 0.148 307.134);
  --color-purple-400: oklch(68.7% 0.205 307.061);
  --color-purple-500: oklch(62.1% 0.253 305.351);
  --color-purple-600: oklch(52.1% 0.219 304.404);
  --color-purple-700: oklch(43.1% 0.18 304.918);
  --color-purple-800: oklch(31.9% 0.123 305.503);
  --color-purple-900: oklch(21% 0.066 305.882);
  --color-purple-950: oklch(16.1% 0.041 306.806);

  --color-fuchsia-50: oklch(96% 0.033 322.762);
  --color-fuchsia-100: oklch(93.5% 0.049 318.547);
  --color-fuchsia-200: oklch(87.7% 0.094 319.339);
  --color-fuchsia-300: oklch(83.3% 0.132 321.434);
  --color-fuchsia-400: oklch(74.8% 0.207 322.16);
  --color-fuchsia-500: oklch(66.7% 0.259 322.15);
  --color-fuchsia-600: oklch(59.1% 0.257 322.896);
  --color-fuchsia-700: oklch(51.8% 0.226 323.949);
  --color-fuchsia-800: oklch(40.1% 0.16 325.612);
  --color-fuchsia-900: oklch(26.1% 0.097 325.243);
  --color-fuchsia-950: oklch(17.7% 0.059 324.505);

  --color-pink-50: oklch(95.9% 0.025 348.503);
  --color-pink-100: oklch(92.2% 0.041 342.16);
  --color-pink-200: oklch(87.3% 0.076 343.53);
  --color-pink-300: oklch(82.3% 0.11 346.018);
  --color-pink-400: oklch(72.5% 0.175 349.761);
  --color-pink-500: oklch(65.6% 0.212 354.308);
  --color-pink-600: oklch(59.2% 0.218 0.584);
  --color-pink-700: oklch(52.5% 0.199 3.958);
  --color-pink-800: oklch(40.8% 0.144 2.432);
  --color-pink-900: oklch(26.2% 0.086 0.878);
  --color-pink-950: oklch(17.9% 0.051 358.5);

  --color-red-50: oklch(96.3% 0.019 9.298);
  --color-red-100: oklch(91.5% 0.039 12.027);
  --color-red-200: oklch(83.5% 0.083 12.484);
  --color-red-300: oklch(77.1% 0.131 14.681);
  --color-red-400: oklch(70% 0.17 16.405);
  --color-red-500: oklch(64.4% 0.209 20.184);
  --color-red-600: oklch(55.8% 0.197 20.884);
  --color-red-700: oklch(45.8% 0.16 20.389);
  --color-red-800: oklch(35% 0.124 20.32);
  --color-red-900: oklch(23.4% 0.082 21.558);
  --color-red-950: oklch(17.3% 0.058 18.726);

  --color-rose-50: oklch(96.9% 0.018 351.141);
  --color-rose-100: oklch(93.2% 0.032 353.327);
  --color-rose-200: oklch(86.5% 0.06 352.738);
  --color-rose-300: oklch(78.8% 0.097 353.101);
  --color-rose-400: oklch(66.9% 0.137 357.096);
  --color-rose-500: oklch(56.4% 0.156 356.312);
  --color-rose-600: oklch(47.2% 0.131 358.677);
  --color-rose-700: oklch(41.2% 0.113 358.628);
  --color-rose-800: oklch(35.8% 0.098 358.412);
  --color-rose-900: oklch(25.3% 0.064 356.308);
  --color-rose-950: oklch(20.2% 0.047 358.924);

  --color-orange-50: oklch(97.2% 0.023 75.863);
  --color-orange-100: oklch(94.6% 0.046 76.839);
  --color-orange-200: oklch(89.7% 0.08 71.401);
  --color-orange-300: oklch(84.8% 0.117 69.151);
  --color-orange-400: oklch(77.6% 0.159 59.042);
  --color-orange-500: oklch(70.5% 0.187 47.604);
  --color-orange-600: oklch(63.2% 0.178 44.888);
  --color-orange-700: oklch(54.3% 0.16 42.266);
  --color-orange-800: oklch(40.4% 0.117 42.653);
  --color-orange-900: oklch(26.8% 0.074 44.413);
  --color-orange-950: oklch(19% 0.047 49.439);

  --color-amber-50: oklch(97.4% 0.024 79.745);
  --color-amber-100: oklch(95% 0.047 80.809);
  --color-amber-200: oklch(90.8% 0.087 80.429);
  --color-amber-300: oklch(86.4% 0.127 78.903);
  --color-amber-400: oklch(82.7% 0.154 76.061);
  --color-amber-500: oklch(79.1% 0.17 69.781);
  --color-amber-600: oklch(68.8% 0.151 68.41);
  --color-amber-700: oklch(55.2% 0.12 69.498);
  --color-amber-800: oklch(41.9% 0.09 71.232);
  --color-amber-900: oklch(26.1% 0.055 76.595);
  --color-amber-950: oklch(18.2% 0.037 82.456);

  --color-yellow-50: oklch(98.6% 0.037 102.035);
  --color-yellow-100: oklch(97% 0.074 102.739);
  --color-yellow-200: oklch(94.5% 0.124 101.54);
  --color-yellow-300: oklch(90.5% 0.166 98.111);
  --color-yellow-400: oklch(86.1% 0.173 91.936);
  --color-yellow-500: oklch(79.5% 0.162 86.047);
  --color-yellow-600: oklch(68.1% 0.142 75.834);
  --color-yellow-700: oklch(55.4% 0.121 66.442);
  --color-yellow-800: oklch(42.1% 0.09 57.708);
  --color-yellow-900: oklch(28.7% 0.058 60.576);
  --color-yellow-950: oklch(20.1% 0.037 62.099);

  --color-lime-50: oklch(98.6% 0.031 120.757);
  --color-lime-100: oklch(96.7% 0.066 122.328);
  --color-lime-200: oklch(93.7% 0.125 124.383);
  --color-lime-300: oklch(89.7% 0.179 126.665);
  --color-lime-400: oklch(84.9% 0.207 128.85);
  --color-lime-500: oklch(76.8% 0.204 130.85);
  --color-lime-600: oklch(64.8% 0.175 131.684);
  --color-lime-700: oklch(53.2% 0.141 131.589);
  --color-lime-800: oklch(40.5% 0.096 131.063);
  --color-lime-900: oklch(27.8% 0.062 129.748);
  --color-lime-950: oklch(19.5% 0.038 127.727);

  --color-teal-50: oklch(97.5% 0.022 179.213);
  --color-teal-100: oklch(94.8% 0.056 179.647);
  --color-teal-200: oklch(90.4% 0.097 180.186);
  --color-teal-300: oklch(85.5% 0.125 181.071);
  --color-teal-400: oklch(78.5% 0.133 181.912);
  --color-teal-500: oklch(70.4% 0.123 182.503);
  --color-teal-600: oklch(60% 0.104 184.704);
  --color-teal-700: oklch(51.1% 0.086 186.391);
  --color-teal-800: oklch(43.7% 0.071 188.216);
  --color-teal-900: oklch(28.1% 0.043 187.709);
  --color-teal-950: oklch(19.2% 0.027 190.861);

  --color-emerald-50: oklch(97.2% 0.035 172.186);
  --color-emerald-100: oklch(95% 0.064 171.399);
  --color-emerald-200: oklch(88.7% 0.138 167.22);
  --color-emerald-300: oklch(84% 0.162 164.117);
  --color-emerald-400: oklch(76.1% 0.159 162.091);
  --color-emerald-500: oklch(68.3% 0.154 159.852);
  --color-emerald-600: oklch(56.5% 0.127 159.799);
  --color-emerald-700: oklch(46.3% 0.104 159.959);
  --color-emerald-800: oklch(34.5% 0.077 160.027);
  --color-emerald-900: oklch(22.6% 0.05 160.876);
  --color-emerald-950: oklch(17.3% 0.039 160.279);

  --color-green-50: oklch(97.3% 0.027 157.389);
  --color-green-100: oklch(94.6% 0.052 154.677);
  --color-green-200: oklch(89.9% 0.096 153.251);
  --color-green-300: oklch(84.2% 0.136 153.299);
  --color-green-400: oklch(77.6% 0.168 152.127);
  --color-green-500: oklch(72.3% 0.192 149.579);
  --color-green-600: oklch(62.7% 0.17 149.214);
  --color-green-700: oklch(52.7% 0.137 150.069);
  --color-green-800: oklch(39.3% 0.09 152.535);
  --color-green-900: oklch(26.9% 0.057 152.586);
  --color-green-950: oklch(18.6% 0.033 154.206);

  --color-olive-50: oklch(97.6% 0.017 117.285);
  --color-olive-100: oklch(88% 0.078 118.284);
  --color-olive-200: oklch(88.4% 0.075 117.78);
  --color-olive-300: oklch(81.7% 0.113 119.679);
  --color-olive-400: oklch(74.1% 0.141 122.254);
  --color-olive-500: oklch(64.1% 0.139 124.506);
  --color-olive-600: oklch(54.5% 0.119 123.815);
  --color-olive-700: oklch(45.4% 0.098 124.004);
  --color-olive-800: oklch(34.8% 0.073 123.963);
  --color-olive-900: oklch(23.7% 0.047 123.741);
  --color-olive-950: oklch(16.8% 0.031 121.202);

  --color-slate-50: oklch(98.4% 0.003 247.858);
  --color-slate-100: oklch(95.9% 0.009 247.915);
  --color-slate-200: oklch(91.6% 0.016 257.199);
  --color-slate-300: oklch(86.9% 0.02 252.894);
  --color-slate-400: oklch(71.8% 0.034 258.372);
  --color-slate-500: oklch(57.2% 0.042 258.362);
  --color-slate-600: oklch(44.6% 0.037 257.281);
  --color-slate-700: oklch(37.2% 0.039 257.287);
  --color-slate-800: oklch(27.9% 0.037 260.031);
  --color-slate-900: oklch(20.8% 0.04 265.755);
  --color-slate-950: oklch(12.9% 0.041 264.695);

  --color-gray-50: oklch(99.1% 0.003 264.542);
  --color-gray-100: oklch(96.1% 0.009 264.522);
  --color-gray-200: oklch(91.8% 0.013 262.378);
  --color-gray-300: oklch(85.6% 0.021 264.458);
  --color-gray-400: oklch(74% 0.022 264.434);
  --color-gray-500: oklch(61.1% 0.022 260.158);
  --color-gray-600: oklch(45.5% 0.022 261.275);
  --color-gray-700: oklch(29.2% 0.012 258.372);
  --color-gray-800: oklch(24.3% 0.011 260.691);
  --color-gray-900: oklch(18.6% 0.009 264.337);
  --color-gray-950: oklch(13.4% 0.005 262.316);

  --color-zinc-50: oklch(98.5% 0 0);
  --color-zinc-100: oklch(96.1% 0.001 286.375);
  --color-zinc-200: oklch(91.1% 0.005 286.292);
  --color-zinc-300: oklch(87.1% 0.005 286.286);
  --color-zinc-400: oklch(71.2% 0.013 286.066);
  --color-zinc-500: oklch(55.2% 0.014 285.938);
  --color-zinc-600: oklch(44.2% 0.015 285.786);
  --color-zinc-700: oklch(37% 0.012 285.805);
  --color-zinc-800: oklch(27.4% 0.005 286.033);
  --color-zinc-900: oklch(21% 0.006 285.885);
  --color-zinc-950: oklch(14.1% 0.004 285.823);

  --color-neutral-50: oklch(98.5% 0 0);
  --color-neutral-100: oklch(96.1% 0 0);
  --color-neutral-200: oklch(91.6% 0 0);
  --color-neutral-300: oklch(86.1% 0 0);
  --color-neutral-400: oklch(70.9% 0 0);
  --color-neutral-500: oklch(55.6% 0 0);
  --color-neutral-600: oklch(43.9% 0 0);
  --color-neutral-700: oklch(37.1% 0 0);
  --color-neutral-800: oklch(26.9% 0 0);
  --color-neutral-900: oklch(20.5% 0 0);
  --color-neutral-950: oklch(14.5% 0 0);

  --color-stone-50: oklch(98.2% 0.003 84.559);
  --color-stone-100: oklch(96.4% 0.001 106.424);
  --color-stone-200: oklch(91.5% 0.004 39.482);
  --color-stone-300: oklch(86.9% 0.004 56.366);
  --color-stone-400: oklch(71.6% 0.009 56.259);
  --color-stone-500: oklch(55.3% 0.012 58.071);
  --color-stone-600: oklch(44.4% 0.01 73.639);
  --color-stone-700: oklch(37.4% 0.009 67.558);
  --color-stone-800: oklch(26.8% 0.006 34.297);
  --color-stone-900: oklch(21.6% 0.006 56.043);
  --color-stone-950: oklch(14.7% 0.004 49.25);

  --color-mist-50: oklch(98.4% 0.003 247.858);
  --color-mist-100: oklch(96.1% 0.007 233.641);
  --color-mist-200: oklch(93.7% 0.009 242.842);
  --color-mist-300: oklch(89.6% 0.016 248.003);
  --color-mist-400: oklch(80.9% 0.026 251.939);
  --color-mist-500: oklch(71.1% 0.036 249.693);
  --color-mist-600: oklch(61.1% 0.038 248.454);
  --color-mist-700: oklch(51% 0.032 248.456);
  --color-mist-800: oklch(38.8% 0.022 245.849);
  --color-mist-900: oklch(26.1% 0.014 248.371);
  --color-mist-950: oklch(18.5% 0.008 248.247);

  --color-mauve-50: oklch(97.3% 0.011 316.492);
  --color-mauve-100: oklch(94.8% 0.02 315.668);
  --color-mauve-200: oklch(89.6% 0.037 314.629);
  --color-mauve-300: oklch(81.4% 0.064 316.696);
  --color-mauve-400: oklch(70.9% 0.093 317.015);
  --color-mauve-500: oklch(60.6% 0.098 317.116);
  --color-mauve-600: oklch(51.5% 0.09 319.444);
  --color-mauve-700: oklch(43.1% 0.073 322.074);
  --color-mauve-800: oklch(34% 0.045 321.824);
  --color-mauve-900: oklch(23.3% 0.029 321.174);
  --color-mauve-950: oklch(16.6% 0.017 321.531);

  --color-taupe-50: oklch(96.2% 0.013 86.83);
  --color-taupe-100: oklch(91.3% 0.021 88.726);
  --color-taupe-200: oklch(84.7% 0.03 87.556);
  --color-taupe-300: oklch(78.4% 0.035 89.883);
  --color-taupe-400: oklch(71% 0.034 89.181);
  --color-taupe-500: oklch(60.6% 0.031 86.654);
  --color-taupe-600: oklch(51.9% 0.029 86.885);
  --color-taupe-700: oklch(43.3% 0.024 87.569);
  --color-taupe-800: oklch(34.2% 0.018 88.807);
  --color-taupe-900: oklch(23.2% 0.01 80.593);
  --color-taupe-950: oklch(16.5% 0.007 78.101);

  --color-brown-50: oklch(97.1% 0.018 86.146);
  --color-brown-100: oklch(92.8% 0.041 86.731);
  --color-brown-200: oklch(86.5% 0.064 84.911);
  --color-brown-300: oklch(79% 0.087 82.923);
  --color-brown-400: oklch(70.6% 0.104 80.205);
  --color-brown-500: oklch(61.3% 0.106 74.84);
  --color-brown-600: oklch(52.4% 0.092 73.324);
  --color-brown-700: oklch(44.1% 0.077 71.873);
  --color-brown-800: oklch(34.6% 0.059 72.823);
  --color-brown-900: oklch(23.4% 0.036 73.391);
  --color-brown-950: oklch(16.5% 0.023 76.496);

  --color-maroon-50: oklch(95.7% 0.02 17.5);
  --color-maroon-100: oklch(91% 0.033 17.782);
  --color-maroon-200: oklch(84.4% 0.055 18.307);
  --color-maroon-300: oklch(74.3% 0.09 19.41);
  --color-maroon-400: oklch(62.3% 0.129 21.466);
  --color-maroon-500: oklch(51.9% 0.141 23.369);
  --color-maroon-600: oklch(42.7% 0.119 23.574);
  --color-maroon-700: oklch(36.1% 0.099 23.49);
  --color-maroon-800: oklch(28.5% 0.074 22.984);
  --color-maroon-900: oklch(19.7% 0.044 21.953);
  --color-maroon-950: oklch(14.4% 0.025 20.618);
}

src/palettes/default.css

Previous

Theming
Next

Dark mode