CSS Colors

color and background-color

The color property sets text colour; background-color sets the background.

<style>
  .a { color: tomato; }
  .b { color: #4338ca; }
  .c { color: rgb(6, 182, 212); }
  .d { color: hsl(160, 84%, 39%); }
  .box { background-color: #4338ca; color: white; padding: 14px; border-radius: 8px; }
</style>

<p class="a">Named: tomato</p>
<p class="b">HEX: #4338ca</p>
<p class="c">RGB: rgb(6,182,212)</p>
<p class="d">HSL: hsl(160,84%,39%)</p>
<div class="box">White text on a coloured background</div>

The first four lines are four different ways to write a colour — they all produce a colour the same way, just with different notation:

• tomato — a named colour. CSS has about 140 of these handy names.
• #4338ca — a HEX code. The six characters after # mix red, green and blue. This is what designers use most.
• rgb(6, 182, 212) — RGB: red, green, blue each from 0 to 255.
• hsl(160, 84%, 39%) — HSL: hue (the colour on a wheel), saturation, lightness — easy for tweaking shades.

The last rule, .box, shows both colour properties working together: background-color paints the box indigo and color: white makes the text readable on top. Always pair a dark background with light text (or vice-versa) so it stays legible.

Transparency with RGBA / HSLA

Add a fourth value from 0 (invisible) to 1 (solid) for opacity.

<style>
  .wrap { background: #4338ca; padding: 20px; }
  .glass { background: rgba(255,255,255,0.85); padding: 12px; border-radius: 8px; }
</style>
<div class="wrap"><div class="glass">Semi-transparent white box</div></div>

The inner box uses rgba(255,255,255,0.85) — white with an alpha (transparency) of 0.85. Because it is slightly see-through, the indigo of the wrapper behind it bleeds through, giving that frosted-glass look. Drop the 0.85 to 0.3 and you would see much more of the indigo underneath. 1 would be fully solid white; 0 would be invisible.