Color System
A Color System defines the jobs colors perform in an interface. Which colors emphasize buttons, which colors warn about risk, and which colors only support backgrounds, borders, or secondary text all need clear roles. Good color choices make body text easier to read, primary buttons easier to find, and error messages harder to miss.
Many interface elements look similar: text, icons, buttons, cards, and forms. Color helps separate their relationships. A blue button can say “this is the primary action”; red copy can say “this is dangerous”; a pale gray background can make a content area feel less crowded.
This article is fixed to light mode. The diagrams rely on color itself to explain the concepts. If they followed a dark theme and were inverted, hue, lightness, and contrast would change, making the examples less reliable.
1. Color Basics & Perception
Hue
Hue describes the family a color belongs to. Red, yellow, green, blue, and purple are hue names. In design tools and CSS models such as HSL and HSV, hue is placed on a 0° to 360° circle, like choosing a direction on a color wheel.
█████████████████████████ │ │ │ │ │ │ │ 0 │ 120 │ 240 │ 360 Red │ Green │ Blue │ Red 60 180 300 Yellow Cyan Purple
Saturation
Saturation describes how vivid a color is. High saturation looks stronger and more attention-grabbing. Low saturation moves the color toward gray. In interfaces, primary buttons can be a little more saturated, while backgrounds and large color blocks usually need restraint so they do not feel harsh.
Chroma
Chroma also describes color vividness, but it appears more often in perceptual color models such as OKLCH. It describes how far a color sits from the gray axis. When chroma is kept stable across a color scale, the colors tend to feel more coherent as a set.
████████████████████ │ │ │ 0% 50% 100% Gray Medium Vivid
Lightness
Lightness describes how dark or bright a color is inside a color model. In HSL, 0% is close to black, 100% is close to white, and 50% is usually where the hue looks most saturated.
Luminance
Luminance is closer to the brightness people actually perceive. The same numeric value can feel brighter or darker depending on hue. This matters later when calculating contrast.
█████████████████████ │ │ │ 0% 50% 100% Dark Pure Light
Alpha
Alpha describes a color’s transparency channel. When alpha is 1, the color fully covers what is underneath. As alpha drops, the background, image, or card below begins to show through.
Opacity
Opacity describes how opaque an entire element is. 100% is fully opaque; 0% is fully transparent. It is close to alpha, but in CSS, opacity affects the whole element, including text, icons, and child elements.
Design tools often use a gray-and-white checkerboard to show transparency. Modal overlays, tooltips, disabled states, and translucent tags all rely on this kind of layering.
████████████████████████ ████████████████████████ │ │ 0% 50% 100% Transparent Semi Opaque
Warm Color
Warm Color refers to colors with warm associations. Red, orange, and yellow often feel hotter and visually closer. This is not a physical rule, but it is useful in interfaces: warnings, promotions, and high-energy entry points often use warm colors.
Cool Color
Cool Color refers to colors with calmer associations. Blue, cyan, and purple often feel cooler and quieter. Information areas, backgrounds, data panels, and interfaces that need less stimulation often use cool colors.
WARM ██████▶ ████████████████████████ hot / expansive COOL ◀██████ ████████████████████████ quiet / compressed
2. Color Representation & Color Spaces
Once colors enter screens and code, they need to be written as values. RGB and Hex are closer to controlling red, green, and blue screen channels. HSL is closer to saying “change the hue, then make it a little brighter.” OKLCH is better for perceptually steadier color adjustments.
RGB (Red, Green, Blue)
RGB uses red, green, and blue light channels to mix colors on a screen. Each channel is usually written from 0 to 255. When all three channels are 0, the result is black. When all three channels are at their maximum, the result is white.
RGBA (Red, Green, Blue, Alpha)
RGBA adds an Alpha channel to control transparency. A translucent black overlay, for example, is an RGB color with transparency added so the page beneath can still be partly seen.
Hex Code
Hex Code is one of the most common ways to write colors on the web and in design tools. It starts with #, followed by six hexadecimal digits. Each pair controls one channel: red, green, and blue.
Each channel runs from 00 to FF, corresponding to decimal 0 to 255. In #FF5733, FF is the red channel, 57 is the green channel, and 33 is the blue channel.
You may also see 8-digit Hex values such as
#FF573380. The final two digits,80, represent the Alpha channel.FFis fully opaque;00is fully transparent.
# FF 57 33 Final RGB mix │ │ │ │ HEX Red(R) Green(G) Blue(B) █████████████████ Mark 255 87 51 █████████████████ Full Mid Low Hex channel intensity (red channel): Hex: 00 11 22 33 44 55 66 77 88 99 AA BB CC DD EE FF Light:████████████████████████████████████████████████████████████████ Dec: 0 17 34 51 68 85 102 119 136 153 170 187 204 221 238 255 └ channel off full red output ┘
HSL (Hue, Saturation, Lightness)
HSL splits color into hue, saturation, and lightness. Instead of writing red, green, and blue channels directly, it is closer to ordinary color adjustment: switch to blue, make it more vivid, then make it darker.
HSLA (Hue, Saturation, Lightness, Alpha)
HSLA is HSL with an Alpha channel for transparency. It is useful when you want to keep HSL-style color adjustment while creating overlays, floating layers, and translucent states.
hsla(200, 100%, 50%, 0.8) ████████ H (hue) ██████████████████████ 200° sky blue S (saturation) ██████████████████████ 100% vivid L (lightness) ██████████████████████ 50% pure color A (alpha) ██████████████████████ 0.8 opacity
OKLCH (Oklab Lightness, Chroma, Hue)
HSL Lightness is not the same as perceived brightness. Set yellow and blue both to L = 50%, and yellow usually still looks much brighter while blue looks darker. This difference becomes a problem for accessibility contrast, color scales, and automatic dark mode.
Traditional HSL (L = 50%) █████ yellow hsl(60, 100%, 50%) █████ blue hsl(240, 100%, 50%) same numeric lightness different perceived brightness Modern OKLCH (L = 0.65) █████ even yellow oklch(0.65, 0.13, 90) █████ even blue oklch(0.65, 0.18, 250) perceived lightness is closer
OKLCH’s L is closer to perceived brightness. When hue or chroma changes, colors with similar L values usually keep a steadier light-dark relationship. It is useful for color scales, theme switching, and design systems that need controlled contrast.
oklch(0.65, 0.18, 250) ████████ L (lightness) ██████████████████ 0.65 perceived brightness C (chroma) ██████████████████ 0.18 colorfulness H (hue) ██████████████████ 250° hue angle
Color Gamut
Color gamut is the range of colors a device or color system can show. Ordinary screens, wide-gamut screens, and printers do not cover the same range.
Color Space
A color space is like an agreed-upon color map. It tells design tools, browsers, and devices how the same color value should be interpreted.
Cyan (0,255,255)
●──────────○ White
/│ /│ (255,255,255)
/ │ / │
Green ●──────────● Yellow (255,255,0)
(0,255,0) │ │ │ │
│ ●───────│──● Magenta
│ /Blue │ / (255,0,255)
│/(0,0,255)│/
Black ●──────────● Red
(0,0,0) (255,0,0)sRGB (Standard RGB)
sRGB is the most common default color space for the web and ordinary screens. Its range is not especially wide, but it has the best compatibility. If an interface mainly targets normal browsers and displays, sRGB is the safest choice.
Adobe RGB
Adobe RGB has a wider gamut than sRGB, especially around cyan-green. It is common in professional photography and print workflows, where screen previews need to line up with paper output.
Display P3
Display P3 is also a wide-gamut color space, and many modern phones and computers support it. Compared with sRGB, it can show more saturated reds, yellows, and greens. For images, illustrations, or brand visuals aimed at newer devices, P3 can look more vivid, but older-screen fallback still matters.
Rec. 2020 (BT.2020)
Rec. 2020 has a very wide gamut and mainly targets 4K/8K, HDR video, and high-end projection. Most ordinary screens still cannot display its full range. Web UI usually does not use it as an everyday target.
Human visible spectrum ████████████████████████████████ 100% Rec. 2020 (4K/8K UHD and HDR) ░░██████████████████████████░░░░ ~75.8% Display P3 / Adobe RGB ░░░░████████████████████░░░░░░░░ ~45-50% sRGB (standard web and common monitors) ░░░░░░████████████████░░░░░░░░░░ ~35%
3. Color Architecture & Palettes
Interfaces rarely rely on a single color. They usually need a set of colors working together: primary colors for main actions, semantic colors for success and error, and neutral colors for backgrounds, borders, and secondary text.
Palette
Palette is the set of colors a project is allowed to use. It prevents every page from choosing its own blue, and it gives the team a shared way to talk about exactly which blue they mean.
Color Scale
Color Scale turns one base color into a series of lighter and darker steps. Pale colors can become backgrounds, slightly deeper colors can become borders, the base color can become a button, and darker colors can become hover states or dark text. Systems such as Tailwind CSS and Material Design often name color scale steps from 50 to 900.
Global palette (Brand Palette) Primary: ██ Accent: ██ Warning: ██ Neutral: ██ │ ╰─> Blue scale from primary hue 50 ██ pale surface 100 ██ 200 ██ 300 ██ border / soft highlight Scale 400 ██ 500 ██ base color / primary button 600 ██ hover interaction 700 ██ 800 ██ 900 ██ dark text / very dark surface
Tint
Tint adds white to a color. The color becomes lighter and softer, which is useful for pale backgrounds, hint surfaces, and lightweight tags.
Shade
Shade adds black to a color. The color becomes darker and heavier, which is useful for dark text, pressed states, or dark backgrounds.
Tone
Tone adds gray to a color. The color becomes less vivid, which works well for large backgrounds, illustration palettes, or quieter interfaces.
Base Mix medium Result ████ + ████ white = ████ Tint higher lightness ████ + ████ black = ████ Shade lower lightness ████ + ████ gray = ████ Tone lower saturation
Primary Color
Primary Color is the product’s most used and most memorable color. It usually appears in primary buttons, selected items, key links, and brand areas.
Secondary Color
Secondary Color supports the primary color. It usually appears in secondary buttons, supporting entry points, and brand extensions. It should not compete with the primary color at the same hierarchy level.
Accent Color
Accent Color creates local emphasis. It is usually used in small areas, such as promotion labels, VIP badges, notification dots, or special highlights. If overused, it steals attention from the primary color.
Semantic Color
Semantic Color carries state meaning. Green often means success, red often means danger or error, and yellow often means warning. These colors work well for system feedback, but they should be paired with text or icons when possible.
Status Color
Status Color expresses the current state of something. Success, error, warning, information, and disabled states can all have status colors. It is close to Semantic Color, but it emphasizes the current state of a component or object.
Foreground Color
Foreground is the color of text, icons, and borders. It needs enough contrast against the background, or the content becomes hard to read.
Background Color
Background is the surface beneath text, icons, buttons, and cards. It affects the overall brightness of the interface and the readability of foreground content.
Neutral Color
Neutral Color includes black, white, and grays, sometimes with a slight warm or cool cast. Neutrals handle the most ordinary but most common parts of an interface: body text, secondary text, dividers, borders, disabled states, and backgrounds.
╭ Interface color roles ────────────╮ │ Title / current selected item │ Primary / brand color ├───────────────────────────────────┤ │ Body foreground text │ Foreground text │ │ Background surface │ Divider / secondary text / border │ Neutral gray / supporting UI │ Primary button Highlight tag │ Accent / highlight color ╰───────────────────────────────────╯ Semantic status colors: ✔ Success ! Warning ✖ Danger
4. Color Engineering & Tokens
Once color enters a design system, a single raw value is not enough. Teams need to know what the color is called, where it is used, and what it should become when the theme changes. Otherwise, components end up with hard-coded values like #3B82F6 everywhere, and changing a brand color or adding dark mode becomes painful.
Design Tokens
Design Tokens store design decisions as variables. Colors, spacing, type, and radius can all become tokens. Color tokens let design files and code use the same names instead of guessing each other’s color values.
CSS Custom Properties (CSS Variables)
CSS Custom Properties are variables in CSS, such as --color-primary. They can be reused and overridden by themes. Color tokens on the web often end up as these variables.
Primitive Token
Primitive token stores a specific color, such as blue-500. It is more like a material library: it describes what the color objectively is.
Semantic Token
Semantic token stores a purpose, such as text-primary, danger-bg, or button-primary-bg. Components should prefer semantic tokens, because themes can change the mapping without changing every component.
╭─Design-system variable layers─────────────╮ │ 1. Raw Value │ │ #3B82F6 │ ├─────────────────────┬─────────────────────┤ │ 2. Primitive Token │ "what it is" │ │ blue-500 │ relatively stable │ │ │ rarely business-led │ ├─────────────────────┼─────────────────────┤ │ 3. Semantic Token │ "where it is used" │ │ color-primary │ carries intent │ │ │ easy to remap │ ├─────────────────────┴─────────────────────┤ │ 4. CSS Variable (web implementation) │ │ --color-primary: var(--blue-500); │ │ --button-bg: var(--color-primary); │ ╰───────────────────────────────────────────╯
Theming
Theming lets an interface switch between different appearances. When the theme changes, the component structure stays the same; what changes is which primitive tokens the semantic tokens point to. For example, text-primary can point to dark gray in light mode and pale gray in dark mode.
Light Mode
Light Mode usually means dark text on a light surface, close to reading on paper. It works well in bright environments and is also the default appearance of most web pages.
Dark Mode
Dark Mode usually means light text on a dark surface. It lowers overall brightness, works well in low-light environments, and may save power on OLED screens.
Dark mode should not be a simple inversion of light mode. Dark backgrounds change how colors feel, so primary and accent colors often need adjusted lightness and saturation to avoid looking muddy or harsh.
5. Accessibility & Readability
Color has to be visible before it can communicate meaning. Text-background contrast, color-vision differences, and system high-contrast modes all affect whether real users can use the interface.
Relative Luminance
Relative Luminance describes how bright a color appears to human vision. Human eyes are not equally sensitive to every color: green appears brighter, red contributes less, and blue appears darker.
This sRGB formula builds that difference into the calculation:
Y=0.2126⋅R+0.7152⋅G+0.0722⋅B With the same physical channel value (255), perceived relative luminance (Y) differs: ███████████████████ 71.52% (green) █████ 21.26% (red) ██ 7.22% (blue)
Contrast Ratio
Contrast Ratio is the luminance difference between foreground and background. White text on a white background is 1:1 and is basically invisible. Black text on white can reach the maximum of 21:1.
WCAG Standard
WCAG is a common web accessibility standard. It defines explicit text contrast requirements:
- AA level (standard): normal text must be at least 4.5:1; large text (18pt and above) must be at least 3:1.
- AAA level (advanced): normal text must be at least 7:1; large text must be at least 4.5:1.
Text readability at different contrast ratios: Gray text (#D1D5DB) 1.5:1 -- ✖ hard to read (fails standard) Gray text (#767676) 4.5:1 -- ✔ meets WCAG AA minimum Dark text (#222222) 16.0:1 -- ✔ meets WCAG AAA
Color Blindness
People with color blindness or color-vision deficiency may not be able to distinguish some hues, such as red and green. Interface states should not rely on color alone. Error messages should also include text, icons, or shape differences.
Weak design (color only)
● Normal ● Error
For red-green color blindness,
these may look almost like the same yellow.
Accessible design (color + symbol / pattern)
✔ Normal ✖ Error
Even without color, the symbol makes the state clear.Forced Colors / High Contrast Mode
Windows high contrast mode and some assistive tools can override a page’s original colors and force the page to use a system-defined high-contrast theme.
In this mode, shadows, gradient backgrounds, and decorative colors may be ignored or replaced by the browser. Buttons, links, and borders depend more heavily on system colors.
Normal visual mode ╭──────────────────────────╮▐ │ Card title │▐ │ Soft supporting text │▐ │ │▐ │ OK Cancel │▐ ╰──────────────────────────╯▐ ▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀ Radius, brand color, and soft shadow remain visible ──────────────────────────────── Forced colors / high contrast mode ┌──────────────────────────┐ │ Card title │ │ Supporting text │ │ │ │ [ OK ] [ Cancel ] │ └──────────────────────────┘ Less decoration; text, borders, and control outlines matter more
6. Rendering & Visual Effects
Color eventually becomes pixels on a screen, and it can mix with other layers. Gradients, transparent overlays, and blending modes look like visual effects, but underneath they are all color calculations.
Gradient
Gradient creates a smooth transition between two or more colors. The browser or design tool calculates the intermediate colors between the start and end points, so the result appears continuous instead of stepping from block to block.
The most common types are linear gradients and radial gradients. A linear gradient changes along a direction; a radial gradient spreads outward from a center.
Blending Mode
Blending Mode decides how an upper color mixes with a lower color. Photoshop modes such as Multiply and Screen, and CSS mix-blend-mode, are all rules of this kind. Different modes use different algorithms to recalculate the colors where layers overlap.
Top layer ████ cyan ████ blue ████ red Alpha 50% Blend area ██████ ██████ ██████ Base layer ████ yellow ████ red ████ blue Alpha 100% Multiply Screen Alpha normal