Design Glossary

A modern color space (used in Tailwind v4) that is perceptually uniform. This means that two colors with the same 'Lightness' value will actually look equally bright to the human eye, unlike HSL which can be misleading.

Design tokens named after their function (e.g., --color-action) rather than their specific value (e.g., --color-blue-500). This allows for easy theme switching and long-term maintainability.

The Web Content Accessibility Guidelines. It defines the standard for contrast ratios (e.g., 4.5:1 for normal text) to ensure websites are usable by people with visual impairments.

The perceived brightness of a color. Our generator uses luma-aware scaling to ensure that your background shades never drown out your text content.

The purity or intensity of a color. High chroma means a color is very 'vibrant' and saturated, while low chroma leads to more muted, grayish tones.

The cumulative cost of choosing shortcuts in design (like hardcoding hex codes) instead of using a structured system of variables and tokens.

The quality of a color model where the mathematical distance between colors matches the visual difference perceived by humans.

The difference in brightness between the foreground (text) and background. A higher ratio ensures better legibility and accessibility compliance.

A new Tailwind CSS v4 feature that allows you to define your entire design system directly in CSS variables within a single block.