Did you know that CSS now supports over 150 named colors, four different color models, and even a function that lets you mix colors directly in your stylesheet? Yet most developers still reach for the same six-digit HEX codes they learned years ago. Understanding the full range of CSS color systems—from the familiar #FF5733 to the cutting-edge oklch()—unlocks more readable code, easier theming, and better accessibility. Here’s everything you need to know.
HEX Colors: The Classic Standard
HEX (hexadecimal) is the most widely used color format on the web. A HEX code like #3B82F6 encodes red, green, and blue channels as pairs of hexadecimal digits, each ranging from 00 (0) to FF (255). This gives you access to 16.7 million colors in a compact six-character string.
Shorthand notation: When each channel’s two digits are identical, you can collapse them. #AABBCC becomes #ABC. This saves a few bytes and improves readability for simple colors like #FFF (white) or #000 (black).
8-digit HEX with alpha: Modern browsers support eight-digit HEX codes where the last two digits control opacity. #3B82F680 gives you the same blue at roughly 50% transparency. The alpha channel runs from 00 (fully transparent) to FF (fully opaque). This is a clean alternative to switching to rgba() just for transparency.
HEX codes remain the default in design tools like Figma and Photoshop, making them the easiest format to copy between design and code. However, they have a significant drawback: they are not human-readable. Looking at #6D28D9, you cannot immediately tell whether it is warm or cool, bright or muted. That limitation matters when you need to make quick adjustments. You can experiment with conversions using our color converter tool.
RGB and RGBA: How Screens See Color
The rgb() function in CSS defines color by mixing red, green, and blue light at intensities from 0 to 255. It is functionally identical to HEX—rgb(59, 130, 246) is exactly #3B82F6—but some developers find the decimal values easier to reason about, especially when interpolating colors in JavaScript.
RGBA for transparency: Adding a fourth parameter controls alpha (opacity). rgba(59, 130, 246, 0.5) renders that blue at 50% opacity. In modern CSS, you can also use the slash syntax: rgb(59 130 246 / 0.5). Both forms are widely supported.
When to use RGB: RGB shines in JavaScript-driven animations and dynamic color calculations. When you need to programmatically lighten a color by increasing all three channels, or blend two colors by averaging their values, RGB’s numeric model makes the math straightforward. It is also the native model for <canvas> APIs and WebGL shaders.
Accessibility note: RGB values map directly to how monitors emit light, which makes them useful for calculating luminance and contrast ratios. The WCAG relative luminance formula uses linearized RGB values, so understanding this model helps when building accessibility tools or verifying contrast compliance manually.
HSL and HSLA: The Designer’s Favorite
HSL stands for Hue, Saturation, and Lightness. Unlike RGB and HEX, HSL describes color the way humans think about it: hsl(220, 90%, 56%) tells you the hue is in the blue range (220° on the color wheel), it is highly saturated (90%), and it is a medium lightness (56%).
This intuitive model makes adjustments trivial. Need a darker version of your brand blue? Lower the lightness value. Need a muted, desaturated version for disabled states? Reduce the saturation. Need the complementary color? Add 180 to the hue. None of these adjustments are obvious in HEX or RGB.
Building color scales with HSL: Design systems often need 9 or 10 shades of a single color (100 through 900). With HSL, you can generate an entire scale by keeping hue and saturation constant while stepping lightness from 95% down to 10%. This produces perceptually consistent scales that feel cohesive. Learn more about building palettes in our color theory guide.
HSLA for transparency: Like RGBA, HSLA adds an alpha channel: hsla(220, 90%, 56%, 0.5). The modern slash syntax also works: hsl(220 90% 56% / 0.5).
The catch: HSL is not perceptually uniform. Two colors with the same lightness value can look dramatically different in brightness to the human eye. Yellow at 50% lightness appears far brighter than blue at 50% lightness. This is the problem that newer color spaces like OKLCH aim to solve.
CSS Named Colors and the currentColor Keyword
CSS defines 148 named colors, from aliceblue to yellowgreen. Named colors improve code readability for common values—color: white is clearer than color: #FFFFFF—and they are useful for prototyping when you want to assign distinct, recognizable colors quickly.
However, named colors have limited practical use in production because they do not map to most brand palettes. The real star of CSS keywords is currentColor. This special value inherits the element’s computed color property, making it incredibly useful for SVG icons, borders, and box shadows that should automatically match the text color:
border: 2px solid currentColor; — the border always matches the text color, even when it changes on hover or in dark mode. This reduces duplication and keeps your styles DRY.
CSS Custom Properties for Theming
CSS custom properties (variables) have transformed how we handle color in modern front-end development. By defining your palette as variables on :root, you create a single source of truth that can be overridden for dark mode, high-contrast themes, or brand variations:
:root { --color-primary: hsl(220, 90%, 56%); }
.dark { --color-primary: hsl(220, 90%, 70%); }
Semantic color tokens: Rather than naming variables after the color itself (--blue-500), use semantic names like --color-primary, --color-surface, and --color-danger. Semantic tokens decouple your component styles from specific colors, making theme switching as simple as swapping a CSS class on the <html> element.
Dark mode toggle pattern: A common approach stores HSL components separately so you can adjust individual channels:
:root { --primary-h: 220; --primary-s: 90%; --primary-l: 56%; }
Then reference them as hsl(var(--primary-h), var(--primary-s), var(--primary-l)). In dark mode, you only override --primary-l to a higher value. This technique gives you full control over each dimension of the color.
Modern CSS: color-mix(), Relative Colors, and OKLCH
CSS continues to evolve rapidly, and recent additions to the color specification give developers superpowers that previously required preprocessors or JavaScript.
color-mix(): This function blends two colors in a specified color space. For example, color-mix(in srgb, #3B82F6 70%, white) produces a tinted version of the blue. You can mix in different color spaces (srgb, hsl, oklch) for different blending behaviors. It is supported in all modern browsers and eliminates the need for Sass mix() functions.
Relative colors: The relative color syntax lets you derive a new color from an existing one by modifying its channels. For instance: hsl(from var(--primary) h s calc(l + 20%)) takes your primary color and creates a lighter version by adding 20% to the lightness channel. This is enormously useful for hover states, focus rings, and surface colors.
OKLCH—the future of CSS color: OKLCH (Oklab Lightness, Chroma, Hue) is a perceptually uniform color space. Unlike HSL, where “50% lightness” can look wildly different for different hues, OKLCH ensures that equal lightness values actually look equally bright to the human eye. This makes it ideal for generating accessible, consistent color palettes. The syntax is oklch(0.65 0.2 250)—lightness (0 to 1), chroma (vividness), and hue angle.
OKLCH also gives you access to the full P3 color gamut, which is roughly 50% larger than sRGB. Wide-gamut displays (common on modern Apple devices and flagship Android phones) can show colors that were literally impossible in HEX or RGB. If you want your vibrant greens and deep purples to truly pop on capable screens, OKLCH is the way forward.
Accessibility and Contrast Considerations
Choosing the right color system is not just about aesthetics—it directly impacts whether your content is usable for everyone. The Web Content Accessibility Guidelines (WCAG) require a minimum contrast ratio of 4.5:1 for normal text (AA level) and 7:1 for enhanced accessibility (AAA level).
When building accessible color systems, keep these principles in mind:
- Never convey meaning through color alone. Always pair color indicators with icons, labels, or patterns so that colorblind users can understand the information.
- Test both light and dark themes. A color that passes contrast requirements on a white background may fail on dark gray. Check every combination.
- Use OKLCH for accessible palette generation. Because OKLCH is perceptually uniform, you can set a minimum lightness difference between text and background and be confident the result is actually readable.
- Consider color vision deficiencies. About 8% of men and 0.5% of women have some form of color blindness. Avoid red/green combinations for critical UI states. Use blue/orange as a safer alternative.
- Leverage browser dev tools. Chrome and Firefox include color vision deficiency simulators that let you preview how your palette looks to users with protanopia, deuteranopia, or tritanopia.
Optimizing your images alongside your color palette ensures a fast, visually consistent experience. Check out our image compression guide to learn how to reduce file sizes without sacrificing the colors you worked so hard to get right.
Start Exploring CSS Colors with ToolsFree.io
Ready to convert, compare, and experiment with CSS colors? Our free color converter lets you switch between HEX, RGB, and HSL instantly. Paste any color value, see it in every format, and fine-tune hue, saturation, and lightness in real time—all in your browser, no sign-up required. Whether you are building a design system, debugging a CSS variable, or just finding the right shade, it is the fastest way to get from color idea to production code.