Skip to main content

Ways to define colors in CSS 🎨

Colors are one of the most visible parts of a website’s design, and CSS gives you several different ways to define them. Some formats are compact, some are more human-friendly, and some are especially useful when transparency is involved.

In practice, all of these methods can describe the same visual result. The main difference is how you express the color and what kind of workflow it supports best.

Why CSS has multiple color formats

CSS has evolved over time, and so have design workflows. Early web development relied heavily on simple notations like named colors and HEX values. Later, formats like RGB, RGBA, HSL, and newer modern color functions were introduced to make colors easier to manipulate and reason about.

For example:

  • Designers often think in terms of hue, saturation, and lightness.
  • Developers may prefer numeric RGB values because they map directly to screens.
  • Systems and design tokens often use HEX because it is short and familiar.
  • Modern UI work frequently uses alpha transparency for overlays, shadows, and subtle effects.

Named colors

CSS supports a set of predefined color names such as red, blue, white, black, gray, tomato, and many more.

h1 {
  color: red;
}

body {
  background-color: white;
}

Pros

  1. Easy to read
  2. Fast to write
  3. Good for simple examples and prototypes

Cons

  1. Limited selection
  2. Not precise enough for brand systems
  3. Harder to maintain consistency in larger projects

Named colors are convenient, but they are usually not the best choice for production design systems where exact shades matter.

HEX colors

HEX is one of the most common color formats in CSS. It represents colors using hexadecimal digits, usually in the form #RRGGBB.

p {
  color: #3366cc;
}

Here:

  1. 33 represents the red component
  2. 66 represents the green component
  3. cc represents the blue component

Each component ranges from 00 to ff, which corresponds to decimal values from 0 to 255.

Short HEX

If each pair uses repeated digits, you can use the shorter 3-digit form:

color: #f0c;

This is equivalent to:

color: #ff00cc;

HEX with alpha

CSS also supports 8-digit HEX, where the last two digits define opacity:

background-color: #3366cc80;

You may also see the 4-digit shorthand version:

background-color: #f0c8;
  1. It is compact
  2. It is widely recognized
  3. It works well in design tools and documentation

That said, HEX is not always the most intuitive format if you want to tweak brightness or create variations by hand.

RGB colors

The rgb() function defines a color using red, green, and blue channels.

color: rgb(51, 102, 204);

Each value typically ranges from 0 to 255.

This is the same color as:

color: #3366cc;

RGB can also use percentages:

color: rgb(20%, 40%, 80%);

Why RGB is useful

  1. It reflects how screens display color
  2. It is explicit and readable
  3. It is easy to compare channel values directly

RGB is especially useful when colors come from JavaScript, design tools, or APIs that already provide channel-based values.

RGBA and alpha transparency

Originally, CSS used rgba() to define RGB colors with an alpha channel. Alpha controls transparency:

  • 0 means fully transparent
  • 1 means fully opaque
background-color: rgba(51, 102, 204, 0.5);

Today, modern CSS also allows alpha directly in rgb() using slash syntax:

background-color: rgb(51 102 204 / 50%);

or

background-color: rgb(51 102 204 / 0.5);

This newer style is often preferred in modern CSS because it is more consistent with other color functions.

Common uses for alpha

  1. Overlays
  2. Glassmorphism-style panels
  3. Hover effects
  4. Shadows and soft visual layering

HSL colors

The hsl() function expresses a color in terms that many people find more intuitive:

  1. Hue: the position on the color wheel, from 0 to 360
  2. Saturation: how vivid the color is
  3. Lightness: how light or dark it is
color: hsl(220 60% 50%);

This can make color adjustments feel more natural than editing RGB or HEX by hand.

For example, if you want a lighter version of a color, changing lightness is often easier than recalculating red, green, and blue values.

HSL with alpha

Like RGB, HSL can include transparency:

background-color: hsl(220 60% 50% / 0.5);

Why developers like HSL

  1. It is easier to reason about visually
  2. It helps when building color scales
  3. It is convenient for theming and state variations

If you often adjust brightness, muted states, or hover colors manually, HSL can be especially comfortable.

HWB and newer CSS color functions

Modern CSS has introduced additional color formats, including hwb(), lab(), lch(), oklab(), and oklch(). These are more advanced and are especially relevant for design systems, perceptual color consistency, and wide-gamut displays.

For example:

color: oklch(62% 0.16 260);

These newer formats are powerful, but they are still less common in everyday introductory CSS tutorials. Among them, OKLCH has gained a lot of attention because it tends to match human perception better when adjusting color.

That means if you build a series of lighter and darker shades, the results may feel more visually consistent than with older formats.

Transparent and currentColor

Two special CSS color-related keywords are also worth knowing.

transparent

This means fully transparent:

border-color: transparent;

It is often used when you want an element to keep layout or border behavior without showing visible color.

currentColor

This keyword makes a property reuse the current value of the color property:

button {
  color: #3366cc;
  border: 2px solid currentColor;
}

This is very useful for icons, borders, and SVG elements that should automatically match surrounding text color.

Which format should you use?

There is no single correct answer 🙂. A lot depends on your project and preferences.

A practical rule of thumb is:

  1. Use HEX
    1. if you want a short, familiar format for fixed colors
  2. Use RGB
    1. if you work with programmatic values or alpha-heavy UI effects
  3. Use HSL
    1. if you frequently adjust hue, saturation, or lightness manually
  4. Use OKLCH or other modern color spaces
    1. if you are building a sophisticated design system and want more perceptually uniform results
  5. Use named colors
    1. for quick demos, learning, or very simple cases

In many codebases, you will see a mix of formats rather than just one.

A quick comparison

Here is the same color written in several common ways:

color: red;
color: #ff0000;
color: #f00;
color: rgb(255, 0, 0);
color: rgb(255 0 0);
color: hsl(0 100% 50%);

And with transparency:

color: rgba(255, 0, 0, 0.5);
color: rgb(255 0 0 / 0.5);
color: #ff000080;
color: hsl(0 100% 50% / 0.5);

Final thoughts

Learning CSS color formats is not just about syntax—it is about choosing the representation that makes your work clearer and easier to maintain.

  • HEX is compact and common
  • RGB is direct and practical
  • HSL is intuitive for manual adjustments
  • Modern color spaces are powerful and increasingly important
  • Named colors are simple, but limited

If you are just starting out, begin with HEX, RGB, and HSL. Once you are comfortable with those, exploring alpha channels and newer color spaces like OKLCH is a great next step 🚀

Back to top