CSS Colors (HEX, RGB, HSL)

CSS accepts several ways to express a color. Learn the common notations and when transparency matters.

Named colors such as teal are easy to read. HEX colors such as #2563eb represent red, green, and blue channels in hexadecimal. RGB expresses those channels with decimal numbers, while HSL describes hue, saturation and lightness.

Modern CSS accepts alpha transparency with formats such as rgb(37 99 235 / 50%) or an eight-digit HEX color. Choose a readable convention and use sufficient text/background contrast.

Properties such as <code>color</code> and <code>background-color</code> accept valid CSS colors. They control different painted parts of a box.

These two syntax choices describe the same blue.

HTML

<div class="colors"><span class="hex">HEX #2563eb</span><span class="rgb">RGB 37 99 235</span></div>

CSS

.colors span { display: inline-block; padding: 12px; margin: 4px; border-radius: 8px; color: white; }
.hex { background-color: #2563eb; }
.rgb { background-color: rgb(37 99 235); }

Rendered output

Observe: Both swatches share the same underlying blue color.

The second swatch uses a translucent background over a white surface.

HTML

<div class="colors"><span class="opaque">Opaque teal</span><span class="translucent">50% teal</span></div>

CSS

.colors span { display: inline-block; padding: 12px; margin: 4px; border-radius: 8px; color: #0f172a; }
.opaque { background: hsl(174 72% 55%); }
.translucent { background: hsl(174 72% 55% / 50%); }

Rendered output

Observe: The translucent swatch blends with the surface beneath it.

Properties such as <code>color</code> and <code>background-color</code> accept valid CSS colors. They control different painted parts of a box.

Compare the two examples: identify the selector, each changed property, and which visible part of the output proves that the CSS took effect.

• Transparency can reduce readable text contrast.
• RGB, HSL and HEX are representations of colors, not inherently different layers.

Change the RGB swatch to rgb(220 38 38), then express approximately that red with a HEX code.

Before changing the code, predict what will change. Then verify by checking the rendered result.

Use a consistent color notation and verify that important text remains readable.

Revisit the rendered examples if the rule still feels abstract. Change one declaration at a time so you can connect cause and effect.