CSS Colors: Names, Hex, RGB, HSL, OKLCH, Transparency and Contrast

Colour is used for text (color), backgrounds (background-color), borders, shadows and more. CSS offers several ways to write the same colour.

Named colours#

CSS has nearly 150 named colours, such as red, teal, tomato, rebeccapurple and whitesmoke:

.swatch { display: inline-block; width: 90px; padding: 20px 0; text-align: center; color: white; }

<span class="swatch" style="background: tomato">tomato</span>
<span class="swatch" style="background: teal">teal</span>
<span class="swatch" style="background: rebeccapurple">rebeccapurple</span>
<span class="swatch" style="background: goldenrod">goldenrod</span>

Names are convenient for quick experiments, but real designs need exact shades.

Hex codes#

A hex code is # followed by red, green and blue values in hexadecimal (00 to ff):

color: #ff0000;   /* red: ff red, 00 green, 00 blue */
color: #2f5fe0;   /* a blue */
color: #333;      /* short form of #333333 */
color: #2f5fe080; /* 8 digits: the last two are opacity (80 ≈ 50%) */

Hex is the most common format in design tools and existing stylesheets.

rgb()#

rgb() takes red, green and blue values from 0 to 255. An optional fourth value after a slash is the alpha (opacity), from 0 (transparent) to 1 (opaque):

color: rgb(47 95 224);
background: rgb(0 0 0 / 0.5);   /* black at 50% opacity */

Older code separates values with commas and uses rgba() for transparency: rgba(0, 0, 0, 0.5). Both syntaxes work.

hsl()#

hsl() describes a colour by hue (position on the colour wheel, 0 to 360 degrees), saturation (grey to vivid) and lightness (black to white). This makes it easy to create related shades:

.s { display: inline-block; width: 70px; height: 60px; }

<span class="s" style="background: hsl(220 75% 25%)"></span>
<span class="s" style="background: hsl(220 75% 40%)"></span>
<span class="s" style="background: hsl(220 75% 55%)"></span>
<span class="s" style="background: hsl(220 75% 70%)"></span>
<span class="s" style="background: hsl(220 75% 85%)"></span>

Only the lightness changes: the same blue from dark to light.

oklch()#

oklch() is a newer format designed around how people actually perceive colour: Lightness (0 to 1 or 0% to 100%), Chroma (colourfulness) and Hue. In HSL, a yellow and a blue with the same "lightness" look very different in brightness; in OKLCH, the same L looks similarly light across hues, which makes consistent palettes easier. It is supported in current versions of all major browsers.

.s { display: inline-block; width: 90px; height: 60px; }

<span class="s" style="background: oklch(0.7 0.15 30)"></span>
<span class="s" style="background: oklch(0.7 0.15 140)"></span>
<span class="s" style="background: oklch(0.7 0.15 250)"></span>
<span class="s" style="background: oklch(0.7 0.15 320)"></span>

Transparency#

There are two ways to make things see-through:

.bg { background: url("/lesson-assets/landscape-600.svg") center / cover; padding: 12px; }
.alpha { background: rgb(255 255 255 / 0.7); padding: 8px; margin-bottom: 8px; }
.opacity { background: white; opacity: 0.7; padding: 8px; }

<div class="bg">
  <div class="alpha">Alpha background: only the background is see-through; this text is solid.</div>
  <div class="opacity">opacity: the whole box, including this text, is see-through.</div>
</div>

Use an alpha channel when only the background should be transparent; opacity affects the element and everything inside it.

currentColor and transparent#

• currentColor is the element's current color value. It is handy for borders and SVG icons that should match the text: border: 2px solid currentColor;.
• transparent is fully transparent.

Contrast and accessibility#

Text must stand out clearly from its background. The WCAG guidelines ask for a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (at least 24px, or about 18.7px if bold). Light grey text on white is the most common failure.

<p style="color: #bbb">#bbb on white: hard to read (contrast about 1.9:1)</p>
<p style="color: #595959">#595959 on white: passes (contrast about 7:1)</p>

Browser developer tools show the contrast ratio when you inspect a colour, and many free online contrast checkers exist. Also remember that some people cannot distinguish certain colours, so never rely on colour alone to convey meaning.

Practice#

button { padding: 8px 14px; border: 2px solid; border-radius: 6px; font-weight: bold; }
.success { background: hsl(140 60% 30%); border-color: hsl(140 60% 20%); color: white; }
.warning { background: hsl(42 95% 55%); border-color: hsl(42 95% 40%); color: #222; }
.danger  { background: hsl(0 70% 42%); border-color: hsl(0 70% 30%); color: white; }

<button class="success">Success</button>
<button class="warning">Warning</button>
<button class="danger">Danger</button>

Key takeaway#