Loading...

CSS Color Values

Named colors get you started. Brands and designs need exact values — a specific teal, a soft overlay, a hue you can nudge. Those come from color value formats: hex, rgb() / rgba(), and hsl() / hsla().

What is a color value?

A color value is what you write after a color-taking property — for example after color: or later background-color:. Same property as before; richer ways to spell the color. Named keywords still count as values. Today we add the numeric formats you will use every week.

Formats at a glance

Pick a format for the job. You do not need every syntax on day one — learn the map, then practice the everyday three.

📊 CSS color value formats

Format Example Best for
Named teal Quick demos, teaching, rough drafts
Hex #0f766e Design tools, brand tokens, copy-paste from Figma
rgb() / rgba() rgb(15 118 110) / rgba(15, 118, 110, 0.85) Channel thinking, transparency with alpha
hsl() / hsla() hsl(174 77% 25%) Tuning hue/lightness without leaving the family

Hex colors

Hex values start with # then hex digits (0–9, a–f). Common forms: six digits #rrggbb (full) and three digits #rgb (short — each digit doubles). Case does not matter.

Hex on text and a soft note

css
CSS Code 
h1 {
color: #0f172a;
}

.note {
color: #0f766e;
}

How to read #0f766e

Pairs are red, green, blue: 0f / 76 / 6e. Design apps usually export this string — paste it into CSS as-is, keep the #.

rgb() and rgba()

rgb() mixes red, green, and blue channels from 0 to 255 (or percentages in modern syntax). Add alpha with rgba() or a fourth value so the color can be partly see-through.

RGB channels and RGBA fade

css
CSS Code 
.lead {
color: rgb(51, 65, 85);
}

.overlay-label {
color: rgba(15, 118, 110, 0.9);
}

Alpha in one sentence

Alpha is transparency of that color — 1 (or 100%) is solid; lower values let what is behind show through. It is not the same as removing the element from layout.

hsl() for hue thinking

hsl() uses hue (angle on the color wheel), saturation (%), and lightness (%). Handy when you want “same family, a bit lighter” without recalculating hex by hand.

HSL accent you can nudge

css
CSS Code 
.badge {
color: hsl(174, 77%, 28%);
border: 2px solid hsl(174, 77%, 20%);
}

Nudge habit

Keep the hue, raise lightness for quieter text, or drop it for a stronger title. Saturation controls how vivid the color feels.

Which format should you use?

  • Hex — default when copying from a design file or brand palette
  • rgb() / rgba() — when you care about channels or need alpha quickly
  • hsl() — when you are exploring or adjusting a family of related colors
  • Named — still fine for sketches and teaching demos
    All of these are valid on color today; you will reuse them on backgrounds next.

Try it yourself

  1. Page with h1, .lead, and .note.
  2. Set the heading with hex (#0f172a), the lead with rgb(51, 65, 85), and the note with #0f766e.
  3. Add a .badge using hsl(174, 77%, 28%) and a darker HSL border in the same hue.
  4. Soften a label with rgba(15, 118, 110, 0.75) — confirm it looks less solid than 1.
  5. Optional: rewrite the note hex as a short form if the pairs match (#0f7 only when digits truly double — otherwise keep six digits).

Common mistakes

  • Forgetting # before hex (0f766e alone is invalid as a color)
  • Using letters outside a–f in hex
  • RGB channels outside 0–255 (or messy unit mixes)
  • Expecting alpha to hide layout space the way display: none does
  • Treating every format as “more specific” in the cascade — format choice does not change specificity

Summary

  • Color values are formats for the same color-taking properties
  • Hex is the everyday paste-from-design format
  • rgb() / rgba() expose channels and alpha
  • hsl() helps you think in hue, saturation, and lightness
  • Named colors remain valid; pick the format that fits the job
  • Practice hex + one functional form (rgba or hsl) until both feel natural

🧠 Test Your Knowledge

Ready to Start

Test Your Knowledge

Challenge yourself with this interactive quiz and see how well you understand the topic

❓
7
Questions
🎯
70%
To Pass
♾️
∞
Time
🔄
∞
Attempts

📝 Instructions

  • Read each question carefully
  • Select the best answer for each question
  • You can retake the quiz as many times as you want
  • Your progress will be shown at the top
Topic 1 of 1
Css Tutorial