Class Reference
Colors
Class Reference
Colors
Text, background and border color utilities.
How to use
Use color-* for text, bg-* for surfaces and border-* for border colors. A border color does not create a border by itself: also choose a border width and style.
Responsive behavior
Color classes do not define breakpoints. Light/dark pairing follows the active design system and theme implementation; fixed neutral colors remain fixed.
Visual reference
Live examples use the installed class styles and your current design variables. Large examples can be scrolled; responsive classes follow the browser width. Border-color samples use a 4px solid border to make the color visible; these classes set the color only.
The quick brown fox jumps over the lazy dog, showing how this text color looks in a longer sentence that stays on one line and truncates neatly when it reaches the edge of the preview container.
The quick brown fox jumps over the lazy dog, showing how this text color looks in a longer sentence that stays on one line and truncates neatly when it reaches the edge of the preview container.
The quick brown fox jumps over the lazy dog, showing how this text color looks in a longer sentence that stays on one line and truncates neatly when it reaches the edge of the preview container.
The quick brown fox jumps over the lazy dog, showing how this text color looks in a longer sentence that stays on one line and truncates neatly when it reaches the edge of the preview container.
The quick brown fox jumps over the lazy dog, showing how this text color looks in a longer sentence that stays on one line and truncates neatly when it reaches the edge of the preview container.
The quick brown fox jumps over the lazy dog, showing how this text color looks in a longer sentence that stays on one line and truncates neatly when it reaches the edge of the preview container.
The quick brown fox jumps over the lazy dog, showing how this text color looks in a longer sentence that stays on one line and truncates neatly when it reaches the edge of the preview container.
The quick brown fox jumps over the lazy dog, showing how this text color looks in a longer sentence that stays on one line and truncates neatly when it reaches the edge of the preview container.
The quick brown fox jumps over the lazy dog, showing how this text color looks in a longer sentence that stays on one line and truncates neatly when it reaches the edge of the preview container.
The quick brown fox jumps over the lazy dog, showing how this text color looks in a longer sentence that stays on one line and truncates neatly when it reaches the edge of the preview container.
The quick brown fox jumps over the lazy dog, showing how this text color looks in a longer sentence that stays on one line and truncates neatly when it reaches the edge of the preview container.
The quick brown fox jumps over the lazy dog, showing how this text color looks in a longer sentence that stays on one line and truncates neatly when it reaches the edge of the preview container.
The quick brown fox jumps over the lazy dog, showing how this text color looks in a longer sentence that stays on one line and truncates neatly when it reaches the edge of the preview container.
The quick brown fox jumps over the lazy dog, showing how this text color looks in a longer sentence that stays on one line and truncates neatly when it reaches the edge of the preview container.
The quick brown fox jumps over the lazy dog, showing how this text color looks in a longer sentence that stays on one line and truncates neatly when it reaches the edge of the preview container.
The quick brown fox jumps over the lazy dog, showing how this text color looks in a longer sentence that stays on one line and truncates neatly when it reaches the edge of the preview container.
The quick brown fox jumps over the lazy dog, showing how this text color looks in a longer sentence that stays on one line and truncates neatly when it reaches the edge of the preview container.
The quick brown fox jumps over the lazy dog, showing how this text color looks in a longer sentence that stays on one line and truncates neatly when it reaches the edge of the preview container.
The quick brown fox jumps over the lazy dog, showing how this text color looks in a longer sentence that stays on one line and truncates neatly when it reaches the edge of the preview container.
The quick brown fox jumps over the lazy dog, showing how this text color looks in a longer sentence that stays on one line and truncates neatly when it reaches the edge of the preview container.
The quick brown fox jumps over the lazy dog, showing how this text color looks in a longer sentence that stays on one line and truncates neatly when it reaches the edge of the preview container.
The quick brown fox jumps over the lazy dog, showing how this text color looks in a longer sentence that stays on one line and truncates neatly when it reaches the edge of the preview container.
The quick brown fox jumps over the lazy dog, showing how this text color looks in a longer sentence that stays on one line and truncates neatly when it reaches the edge of the preview container.
The quick brown fox jumps over the lazy dog, showing how this text color looks in a longer sentence that stays on one line and truncates neatly when it reaches the edge of the preview container.
The quick brown fox jumps over the lazy dog, showing how this text color looks in a longer sentence that stays on one line and truncates neatly when it reaches the edge of the preview container.
The quick brown fox jumps over the lazy dog, showing how this text color looks in a longer sentence that stays on one line and truncates neatly when it reaches the edge of the preview container.
The quick brown fox jumps over the lazy dog, showing how this text color looks in a longer sentence that stays on one line and truncates neatly when it reaches the edge of the preview container.
The quick brown fox jumps over the lazy dog, showing how this text color looks in a longer sentence that stays on one line and truncates neatly when it reaches the edge of the preview container.
The quick brown fox jumps over the lazy dog, showing how this text color looks in a longer sentence that stays on one line and truncates neatly when it reaches the edge of the preview container.
The quick brown fox jumps over the lazy dog, showing how this text color looks in a longer sentence that stays on one line and truncates neatly when it reaches the edge of the preview container.