On this page

CSS Colors (HEX, RGB, HSL, OKLCH)

Badar KhalilUpdated September 29, 2026 5 min read

What Are CSS Colors?

CSS colors control the look of text, backgrounds, borders, shadows and more. In this lesson our focus keyword is CSS colors, and you will learn every major format: HEX, RGB, HSL and the modern OKLCH. We also cover trending topics that developers search for: CSS color-mix(), relative color syntax, light-dark() for dark mode, wide-gamut Display P3 colors, CSS color palette generation, and color contrast for accessibility.

1. Named Colors and Keywords

CSS has about 148 named colors such as tomato, rebeccapurple and seagreen. Special keywords include transparent (fully transparent) and currentColor, which uses the element's current text color. currentColor is very useful for icons and borders that should follow the text color.

2. HEX Colors

HEX is the most common format. It starts with # and uses hexadecimal digits (0-9, a-f).

#rrggbb: for example #2563eb (red 25, green 63, blue eb).
#rgb: shorthand when each pair repeats, so #fff equals #ffffff.
#rrggbbaa and #rgba: the last pair is alpha (opacity). #00000080 is black at about 50% opacity.

3. RGB Colors

rgb(37 99 235) defines red, green and blue channels from 0 to 255 (or percentages). Modern syntax uses spaces and a slash for alpha: rgb(37 99 235 / 50%). The old comma syntax rgba(37, 99, 235, 0.5) still works, but rgb() now accepts alpha too, so rgba() is no longer needed.

4. HSL Colors

hsl(221 83% 53%) stands for Hue, Saturation, Lightness. Hue is an angle on the color wheel (0 = red, 120 = green, 240 = blue), saturation is color intensity, and lightness runs from 0% (black) to 100% (white). HSL is human friendly: to make a hover color, just lower the lightness by 8%. It is great for building palettes with CSS variables.

5. OKLCH: The Modern Color Space

oklch(62% 0.2 260) has three parts: L lightness (0% to 100%), C chroma (color intensity, roughly 0 to 0.4) and H hue angle (0 to 360). OKLCH is perceptually uniform: two colors with the same lightness really look equally bright. In HSL, yellow at 50% lightness looks far brighter than blue at 50% lightness, which makes accessible palettes hard. OKLCH fixes this. It can also express wide-gamut colors beyond sRGB on modern screens. Tailwind CSS v4 and many design systems now use OKLCH for their palettes.

6. Format Comparison

Format	Example	Best for
HEX	`#2563eb`	Copying from design tools, short values
RGB	`rgb(37 99 235 / 50%)`	Transparency, JavaScript work
HSL	`hsl(221 83% 53%)`	Simple palettes and hover states
OKLCH	`oklch(62% 0.2 260)`	Accessible, consistent, wide-gamut palettes

7. Modern Color Functions

color-mix()

Mixes two colors in a chosen color space: color-mix(in oklch, #2563eb 70%, white) creates a lighter tint without extra variables.

Relative color syntax

Derive a new color from an existing one: oklch(from var(--brand) calc(l + 0.1) c h) makes a lighter version of --brand. You can also change alpha: rgb(from var(--brand) r g b / 40%).

light-dark()

Returns the first color in light mode and the second in dark mode: color: light-dark(#111, #eee);. It requires color-scheme: light dark on the element or on :root.

Display P3 with color()

color(display-p3 0 1 0) can show a more vivid green than any sRGB color. Always provide an sRGB fallback before it.

8. Colors and Accessibility

WCAG requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (18px bold or 24px regular).
Never use color as the only way to show meaning (for example errors). Add icons or text.
Support dark mode with prefers-color-scheme or light-dark().
Test with DevTools color picker, which shows the contrast ratio.

9. Best Practices

Store brand colors in CSS custom properties: --brand: oklch(62% 0.2 260);.
Prefer OKLCH or HSL for palettes and use HEX only when copying from tools.
Use currentColor for icons and SVG.
Use color-mix() for tints and shades rather than hand-typing many variants.
Provide fallbacks for very new features with @supports.

10. Common Mistakes

Using a comma inside the space-separated syntax, for example rgb(37, 99 235), which is invalid.
Forgetting that opacity fades the whole element, while alpha in a color fades only that color.
Using low-contrast light gray text on white.
Writing HEX with 5 or 7 digits, which is invalid.

Summary

HEX, RGB, HSL and OKLCH all describe colors, but OKLCH gives the most predictable results for modern design systems. Combine them with color-mix(), relative colors and light-dark() for flexible themes. Try the live examples below.

Try it Yourself HTML

<style>
  .sw { display: inline-block; width: 110px; height: 70px; margin: 4px; padding: 6px; color: #fff; font: 12px sans-serif; border-radius: 8px; }
</style>
<div class='sw' style='background: tomato'>named</div>
<div class='sw' style='background: #2563eb'>#2563eb</div>
<div class='sw' style='background: rgb(22 163 74)'>rgb()</div>
<div class='sw' style='background: hsl(280 70% 50%)'>hsl()</div>
<div class='sw' style='background: oklch(65% 0.2 30)'>oklch()</div>

Output

Press Run to execute.

Try it Yourself HTML

<style>
  .bg { padding: 20px; font-family: sans-serif; background: repeating-conic-gradient(#e2e8f0 0% 25%, #fff 0% 50%) 50% / 20px 20px; }
  .a { display: inline-block; width: 120px; height: 80px; margin: 6px; color: #fff; padding: 6px; }
</style>
<div class='bg'>
  <div class='a' style='background: rgb(37 99 235 / 100%)'>100%</div>
  <div class='a' style='background: rgb(37 99 235 / 60%)'>60%</div>
  <div class='a' style='background: #2563eb33'>HEX 20%</div>
  <div class='a' style='background: hsl(221 83% 53% / 0.4)'>HSL 40%</div>
</div>

Output

Press Run to execute.

Try it Yourself HTML

<style>
  :root { --h: 220; }
  body { font-family: sans-serif; }
  .row { display: flex; }
  .row div { flex: 1; height: 60px; color: #fff; font-size: 12px; padding: 4px; }
  .l1 { background: hsl(var(--h) 80% 90%); color: #000; }
  .l2 { background: hsl(var(--h) 80% 70%); color: #000; }
  .l3 { background: hsl(var(--h) 80% 50%); }
  .l4 { background: hsl(var(--h) 80% 35%); }
  .l5 { background: hsl(var(--h) 80% 20%); }
</style>
<p>Change --h above (0 to 360) to build a whole palette from one hue.</p>
<div class='row'><div class='l1'>90%</div><div class='l2'>70%</div><div class='l3'>50%</div><div class='l4'>35%</div><div class='l5'>20%</div></div>

Output

Press Run to execute.

Try it Yourself HTML

<style>
  body { font-family: sans-serif; }
  .row { display: flex; margin-bottom: 8px; }
  .row div { flex: 1; height: 50px; color: #fff; font-size: 11px; padding: 4px; }
  .hsl div:nth-child(1) { background: hsl(60 100% 50%); color: #000; }
  .hsl div:nth-child(2) { background: hsl(120 100% 50%); color: #000; }
  .hsl div:nth-child(3) { background: hsl(240 100% 50%); }
  .ok div:nth-child(1) { background: oklch(80% 0.15 100); color: #000; }
  .ok div:nth-child(2) { background: oklch(80% 0.15 150); color: #000; }
  .ok div:nth-child(3) { background: oklch(80% 0.15 260); color: #000; }
</style>
<p>HSL with equal lightness: brightness looks uneven.</p>
<div class='row hsl'><div>yellow</div><div>green</div><div>blue</div></div>
<p>OKLCH with equal lightness: brightness looks even.</p>
<div class='row ok'><div>yellow</div><div>green</div><div>blue</div></div>

Output

Press Run to execute.

Try it Yourself HTML

<style>
  :root { color-scheme: light dark; --brand: oklch(62% 0.2 260); }
  body { font-family: sans-serif; padding: 16px; background: light-dark(#ffffff, #0f172a); color: light-dark(#0f172a, #f8fafc); }
  .btn { padding: 10px 18px; border: 0; border-radius: 8px; color: #fff; background: var(--brand); margin: 6px; cursor: pointer; }
  .btn:hover { background: color-mix(in oklch, var(--brand) 80%, black); }
  .tint { background: color-mix(in oklch, var(--brand) 20%, white); color: #000; padding: 10px; border-radius: 8px; }
  .rel { background: oklch(from var(--brand) calc(l + 0.15) c h); color: #000; padding: 10px; border-radius: 8px; margin-top: 8px; }
</style>
<button class='btn'>Hover me (color-mix)</button>
<div class='tint'>color-mix tint of the brand color</div>
<div class='rel'>Relative color: lighter brand via oklch(from ...)</div>

Output

Press Run to execute.

Exercise: Write the Same Color in Four FormatsHTML

Style the four boxes so that they all show the same blue (#2563eb) but each box uses a different format: HEX, rgb(), hsl() and oklch(). Approximate values are fine for hsl and oklch: hsl(221 83% 53%) and oklch(55% 0.21 263).

Try it Yourself HTML

<style>
  .b { display: inline-block; width: 100px; height: 60px; margin: 4px; }
  /* Add a background to each class */
  .hex {}
  .rgb {}
  .hsl {}
  .okl {}
</style>
<div class='b hex'></div><div class='b rgb'></div><div class='b hsl'></div><div class='b okl'></div>

Output

Press Run to execute.

Show expected output

All four boxes look the same blue.

This is a self-check — compare your result with the expected output above.

Exercise: Build a Theme with color-mix()HTML

Define --brand as a custom property on :root. Give the .btn the brand color as background. On hover, darken it using color-mix() with black (20%). Add a .soft box whose background is a 15% mix of the brand color with white.

Try it Yourself HTML

<style>
  /* Write your CSS here */
</style>
<button class='btn'>Save</button>
<div class='soft'>Soft brand box</div>

Output

Press Run to execute.

Show expected output

Button darkens on hover and the soft box shows a pale tint of the brand color.

This is a self-check — compare your result with the expected output above.

Quiz: CSS Colors Quiz Pass 70%

Loading quiz…

Was this page helpful?