colors #
fuz_css provides color variables that adapt to the color-scheme, working naturally in both light and dark modes. Each theme can customize the 10 hues (a-j) and their intensity variants (00-100).
Hues use letters so themes can reassign colors without breaking semantics -- "a" is blue by default but could be any color. Each hue has 13 intensity variants tuned independently for visual balance across color schemes.
Hue variables #
Hue variables contain a single hue number. Each color variable combines a hue variable with saturation and lightness values for light and dark modes.
Hue variables therefore provide a single source of truth that's easy to theme, but to achieve pleasing results, setting the hue alone is not always sufficient. Custom colors generally need tuning for saturation and lightness.
Hue variables are also useful to construct custom colors not covered by the color variables.
For example, fuz_css's base stylesheet uses hue_a for the semi-transparent ::selection. (try selecting some text -- same hue!)
Hue variables are the same in both light and dark modes (non-adaptive).
- NaNprimary
- NaNsuccess
- NaNerror/danger
- NaNsecondary/accent
- NaNtertiary/highlight
- NaNquaternary/muted
- NaNquinary/decorative
- NaNsenary/caution
- NaNseptenary/info
- NaNoctonary/flourish
Color variables #
There are 13 intensity variants per hue (00, 05, 10, 20, ..., 80, 90, 95, 100), from subtle to bold. The 50 variant of each color is used as the base for things like buttons.
Unlike the shade and text scales (which are separate), color
variables can be used for both text and backgrounds via utility classes: .color_a_50 sets text color, .bg_a_50 sets background color.
Each color exists in two forms:
- Adaptive (
color_a_50) — switches between light and dark values based on color scheme. Use for most UI work. - Absolute (
color_a_50_light,color_a_50_dark) — stable values that never change. Use when you need a pinned color.
Adaptive colors #
The colors you'll use most often. They automatically adjust to maintain visual consistency across color schemes. Note that these values differ between light and dark modes! See the discussion above for why.
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
Absolute colors #
Sometimes you need a color that doesn't adapt — logos, charts, color-coded data, or elements that must match across screenshots. Every adaptive color has two absolute variants:
color_a_50_light— the value used in light modecolor_a_50_dark— the value used in dark mode
These are stable regardless of color scheme. Light and dark variants are tuned independently for visual balance -- achieving equivalent appearance across color schemes requires different saturation and lightness values.
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()
- rgb()