Colors
Hummingbird uses semantic color tokens that adapt to light and dark mode automatically. Click any swatch to copy its CSS variable.
Semantic colors
DocsEach theme color comes in five steps and generates every color utility: bg-*, text-*, border-*, ring-* and more.
Primary
Secondary
Info
Success
Warning
Danger
Neutral & inverse
Surface, text & border
DocsNeutral tokens for backgrounds, text and borders. They flip automatically in dark mode.
Background
Text
| The quick brown fox jumps over the lazy dog | text-subtle |
| The quick brown fox jumps over the lazy dog | text-muted |
| The quick brown fox jumps over the lazy dog | text-default |
| The quick brown fox jumps over the lazy dog | text-highlight |
| The quick brown fox jumps over the lazy dog | text-emphasis |
Border
border-subtle
border-muted
border-default
border-highlight
border-emphasis
Color palette
DocsThe full palette behind every theme, available as Tailwind utilities like bg-blue-500 and as CSS variables like --color-blue-500.
50100200300400500600700800900950
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