What are semantic colors?
While brand colors give a product its unique identity, semantic colors communicate specific meaning and intent. They are universal visual cues that bypass language to provide instant feedback to the user.
The standard four semantic states used in almost every UI framework are:
- Success (Green) — Confirms an action was completed correctly.
- Error / Destructive (Red) — Indicates a failure, error, or irreversible destructive action.
- Warning (Yellow/Amber) — Alerts the user to potential issues or actions requiring caution.
- Info (Blue) — Highlights useful information or neutral state changes.
Why getting them right is hard
Many developers open a color picker, select the brightest red they can find for errors, and call it a day. The problem? Pure red (#FF0000) is extremely harsh on the eyes, especially in dark mode, and often fails WCAG accessibility contrast requirements.
Best Practices for Semantic Colors
1. Adjust Saturation and Lightness, Not Just Hue
In modern color spaces like OKLCH, you want to maintain a consistent perceptual lightness across your UI. For example, if your primary buttons use a lightness (L) of 60%, your semantic colors should ideally hover around the same lightness to prevent them from looking out of place.
2. The Accessibility Trap
Error red is notoriously difficult to make accessible. A red that looks "correct" often doesn't have enough contrast against a white background (failing the 4.5:1 ratio). Instead of using pure red, shift the hue slightly towards pink or orange, or use a darker shade (L ≈ 0.45 in OKLCH) for text, while using a lighter, tinted shade for backgrounds.
3. Don't Rely on Color Alone
Roughly 8% of men are color blind, most commonly red-green color blind. If the only difference between an error state and a success state is color, you are failing a significant portion of your users. Always pair semantic colors with icons or text labels. A checkmark for success and an exclamation mark for errors ensures clarity for everyone.
Implementing a Semantic System in CSS
A robust design system generates a scale for each semantic color. For an error state, you need:
:root {
/* OKLCH values for predictable contrast */
--color-error-base: oklch(0.6 0.2 25);
--color-error-bg: oklch(0.95 0.05 25); /* Light tint for alerts */
--color-error-text: oklch(0.4 0.15 25); /* Dark shade for reading */
}Tools like LiveTheme's Palette Maker automatically handle this math for you, generating accessible semantic scales perfectly matched to your brand's unique temperature and tone.