Colors
You can either use colors directly, using a CSS Custom Property, or with generated CSS utility classes.
The color palettes are part of the Tailwind CSS theme, so they can be used with utility classes. Use .bg-yellow-300 for backgrounds and .text-blue-700 for text. For more information on Tailwind color utilities, refer to the documentation.
Base Colors
The base colors are used for backgrounds, borders, and other elements that require a neutral color. They are designed to be versatile and work well with various design elements.
| Name | Color | Custom Property |
|---|---|---|
base-50 | hsl(51deg 33% 92%)rgb(94.64% 93.848% 89.36%)#f1efe4 | var(--base-50) |
base-100 | hsl(51deg 21% 88%)rgb(90.52% 89.764% 85.48%)#e7e5da | var(--base-100) |
base-150 | hsl(50deg 14% 83%)rgb(85.38% 84.587% 80.62%)#dad8ce | var(--base-150) |
base-200 | hsl(55deg 10% 79%)rgb(81.1% 80.75% 76.9%)#cfcec4 | var(--base-200) |
base-300 | hsl(49deg 7% 70%)rgb(72.1% 71.33% 67.9%)#b8b6ad | var(--base-300) |
base-500 | hsl(43deg 3% 52%)rgb(53.44% 52.624% 50.56%)#888681 | var(--base-500) |
base-600 | hsl(50deg 3% 42%)rgb(43.26% 42.84% 40.74%)#6e6d68 | var(--base-600) |
base-700 | hsl(45deg 2% 33%)rgb(33.66% 33.33% 32.34%)#565552 | var(--base-700) |
base-800 | hsl(30deg 3% 24%)rgb(24.72% 24% 23.28%)#3f3d3b | var(--base-800) |
base-850 | hsl(40deg 3% 20%)rgb(20.6% 20.2% 19.4%)#353431 | var(--base-850) |
base-900 | hsl(30deg 3% 15%)rgb(15.45% 15% 14.55%)#272625 | var(--base-900) |
base-950 | hsl(30deg 4% 11%)rgb(11.44% 11% 10.56%)#1d1c1b | var(--base-950) |
base-black | hsl(0deg 3% 6%)rgb(6.18% 5.82% 5.82%)#100f0f | var(--base-black) |
base-white | hsl(48deg 100% 97%)rgb(100% 98.8% 94%)#fffcf0 | var(--base-white) |
Yellow
Yellow is the intrinsify brand color. The yellow color palette is used for illustrations and other elements that require attention.
| Name | Color | Custom Property |
|---|---|---|
yellow-50 | hsl(40, 85%, 92%)rgb(98.8% 94.267% 85.2%)#fcf0d9 | var(--yellow-50) |
yellow-100 | hsl(39, 87%, 85%)rgb(98.05% 88.915% 71.95%)#fae3b7 | var(--yellow-100) |
yellow-200 | hsl(40, 86%, 75%)rgb(96.5% 82.167% 53.5%)#f6d288 | var(--yellow-200) |
yellow-300 | hsl(39, 86%, 60%)rgb(94.4% 70.32% 25.6%)#f1b341 | var(--yellow-300) |
yellow-400 | hsl(39, 86%, 41%)rgb(76.26% 51.578% 5.74%)#c2840f | var(--yellow-400) |
yellow-500 | hsl(39, 86%, 33%)rgb(61.38% 41.514% 4.62%)#9d6a0c | var(--yellow-500) |
yellow-600 | hsl(39, 86%, 25%)rgb(46.5% 31.45% 3.5%)#775009 | var(--yellow-600) |
yellow-700 | hsl(39, 86%, 20%)rgb(37.2% 25.16% 2.8%)#5f4007 | var(--yellow-700) |
yellow-800 | hsl(39, 86%, 14%)rgb(26.04% 17.612% 1.96%)#422d05 | var(--yellow-800) |
yellow-900 | hsl(40, 85%, 10%)rgb(18.5% 12.833% 1.5%)#2f2104 | var(--yellow-900) |
yellow-950 | hsl(39, 85%, 5%)rgb(9.25% 6.275% 0.75%)#181002 | var(--yellow-950) |
Blue
The blue colors are used for primary actions, links, and other elements that require a strong visual impact or hight contrast.
| Name | Color | Custom Property |
|---|---|---|
blue-50 | hsl(193, 61%, 94%)rgb(90.34% 96.074% 97.66%)#e6f5f9 | var(--blue-50) |
blue-100 | hsl(193, 60%, 88%)rgb(80.8% 92.08% 95.2%)#ceebf3 | var(--blue-100) |
blue-200 | hsl(193, 60%, 81%)rgb(69.6% 87.46% 92.4%)#b1dfec | var(--blue-200) |
blue-300 | hsl(193, 59%, 69%)rgb(50.71% 79.364% 87.29%)#81cadf | var(--blue-300) |
blue-400 | hsl(194, 60%, 47%)rgb(18.8% 62.04% 75.2%)#309ec0 | var(--blue-400) |
blue-500 | hsl(193, 59%, 37%)rgb(15.17% 49.37% 58.83%)#277e96 | var(--blue-500) |
blue-600 | hsl(193, 60%, 28%)rgb(11.2% 37.52% 44.8%)#1d6072 | var(--blue-600) |
blue-700 | hsl(193, 59%, 22%)rgb(9.02% 29.355% 34.98%)#174b59 | var(--blue-700) |
blue-800 | hsl(194, 60%, 16%)rgb(6.4% 21.12% 25.6%)#103641 | var(--blue-800) |
blue-900 | hsl(194, 59%, 12%)rgb(4.92% 15.776% 19.08%)#0d2831 | var(--blue-900) |
blue-950 | hsl(193, 60%, 6%)rgb(2.4% 8.04% 9.6%)#061518 | var(--blue-950) |
Secondary Colors
The secondary color palette is used for UI elements that communicate state, such as errors, warnings, and success messages. The lighter color variant is used for text on a dark background, and the darker color is used for text on a light background.
| Name | Color | Custom Property |
|---|---|---|
red-400 | hsl(5deg 61% 54%)rgb(82.06% 30.617% 25.94%)#d14e42 | var(--red-400) |
red-600 | hsl(3deg 62% 42%)rgb(68.04% 18.564% 15.96%)#ae2f29 | var(--red-600) |
orange-400 | hsl(23deg 70% 51%)rgb(85.3% 42.997% 16.7%)#da6e2b | var(--orange-400) |
orange-600 | hsl(22deg 81% 41%)rgb(74.21% 32.144% 7.79%)#bd5214 | var(--orange-600) |
green-400 | hsl(72deg 46% 41%)rgb(52.316% 59.86% 22.14%)#859938 | var(--green-400) |
green-600 | hsl(73deg 84% 27%)rgb(39.852% 49.68% 4.32%)#667f0b | var(--green-600) |
purple-400 | hsl(251deg 40% 64%)rgb(54.88% 49.6% 78.4%)#8c7ec8 | var(--purple-400) |
purple-600 | hsl(259deg 42% 43%)rgb(36.378% 24.94% 61.06%)#5d409c | var(--purple-600) |
magenta-400 | hsl(329deg 54% 59%)rgb(81.14% 36.86% 59.738%)#cf5e98 | var(--magenta-400) |
magenta-600 | hsl(326deg 55% 41%)rgb(63.55% 18.45% 44.007%)#a22f70 | var(--magenta-600) |
Theme colors
The theme is generated from the colors listed above. For this purpose, the colors are assigned to semantic color variables that should be used within the design. The assigned colors of the theme variables differ from each other if a light or dark theme is used.
Theme colors are not part of the Tailwind theme to restrict usage that is not intended. Since all theme colors come from base colors, use those instead.
| Name | Color Utility Class | BG Utility Class | Custom Property |
|---|---|---|---|
theme-bg | – | .theme-bg | var(--theme-bg) |
theme-bg-alt | – | .theme-bg-alt | var(--theme-bg-alt) |
theme-text | .theme-text | – | var(--theme-text) |
theme-text-muted | .theme-text-muted | – | var(--theme-text-muted) |
theme-text-inverse | .theme-text-inverse | – | var(--theme-text-inverse) |
theme-accent | – | – | var(--theme-accent) |
theme-bg-accent | – | – | var(--theme-bg-accent) |
theme-primary | – | – | var(--theme-primary) |
theme-bg-primary | – | – | var(--theme-bg-primary) |
theme-focus | – | – | var(--theme-focus) |
theme-border | – | – | var(--theme-border) |
theme-border-hovered | – | – | var(--theme-border-hover) |
theme-border-active | – | – | var(--theme-border-active) |
theme-success | .theme-text-success | – | var(--theme-success) |
theme-warning | .theme-text-warning | – | var(--theme-warning) |
theme-error | .theme-text-error | – | var(--theme-error) |
theme-info | .theme-text-info | – | var(--theme-info) |
theme-backdrop | – | – | var(--theme-backdrop) |