CSS Academy · Lesson

Color Values: Named, Hex, RGB, HSL

Learn every CSS color format: named colors, hex codes, rgb(), and hsl() functions.

Color Values: Named, Hex, RGB, HSL is a free CSS Academy lesson on CoddyKit — lesson 1 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the CSS Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

CSS Color Formats

CSS supports multiple color formats. Choosing the right one depends on your workflow, tooling, and whether you need transparency or dynamic manipulation.

Named Colors

CSS defines 140+ named colors like red, tomato, cornflowerblue. They are great for quick prototyping but offer limited precision.

h1 { color: tomato; }
button { background: cornflowerblue; }

Hex Colors

Hexadecimal colors use a # followed by 6 hex digits (or 3 for shorthand). Each pair of digits represents red, green, and blue (0–255).

/* Full hex */
color: #ff6347;  /* tomato */

/* Shorthand (each digit doubles) */
color: #f64;    /* same as #ff6644 */

Hex with Alpha

Add a 4th pair of hex digits (or 4th digit in shorthand) for alpha transparency:

background: #ff634780; /* tomato at 50% opacity */
background: #f648;     /* shorthand with alpha */

RGB Colors

rgb() takes three integers (0–255) for red, green, and blue channels. Very readable and easy to reason about programmatically.

color: rgb(255, 99, 71);    /* tomato */
color: rgb(0, 0, 0);        /* black */
color: rgb(255, 255, 255);  /* white */

RGBA Colors

Add a fourth parameter (0–1) to rgb() for alpha transparency. This is equivalent to the newer rgb() with a slash syntax.

color: rgba(255, 99, 71, 0.5);    /* 50% transparent */
color: rgb(255 99 71 / 0.5);      /* modern syntax */

HSL Colors

hsl() defines color by hue (0–360°), saturation (0–100%), and lightness (0–100%). Much more intuitive for creating color palettes and variants.

color: hsl(9, 100%, 64%);      /* tomato */
color: hsl(210, 70%, 50%);     /* steel blue */

HSLA Colors

Like rgba(), hsla() adds an alpha channel. Modern CSS allows using a slash separator instead:

color: hsla(9, 100%, 64%, 0.5);
color: hsl(9 100% 64% / 0.5);  /* modern */

Creating Color Variants with HSL

HSL shines for generating tints and shades. Keep hue and saturation constant, change lightness:

.btn-light { background: hsl(210, 70%, 80%); }
.btn       { background: hsl(210, 70%, 50%); }
.btn-dark  { background: hsl(210, 70%, 30%); }

currentColor Keyword

currentColor is a dynamic value that equals the element's current color property. Use it to make borders, shadows, or SVG fills inherit text color automatically.

a {
  color: tomato;
  border-bottom: 2px solid currentColor;
}

transparent Keyword

The transparent keyword equals rgba(0,0,0,0) — fully transparent. Useful for hover effects where you transition from transparent to a color.

button {
  background: transparent;
  border: 2px solid royalblue;
}

Quick Check

Which color format makes it easiest to create lighter and darker shades of the same hue?

Recap

CSS offers named, hex, RGB, and HSL color formats. HSL is ideal for programmatic color manipulation. All formats accept an alpha channel for transparency. currentColor and transparent are handy special keywords.

Frequently asked questions

Is the “Color Values: Named, Hex, RGB, HSL” lesson free?

Yes — the full text of “Color Values: Named, Hex, RGB, HSL” is free to read here on the web, and the CSS Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the CSS Academy course, upgrade to CoddyKit PRO.

What will I learn in “Color Values: Named, Hex, RGB, HSL”?

Learn every CSS color format: named colors, hex codes, rgb(), and hsl() functions. You practise CSS Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start CSS Academy?

No prior experience is required. CSS Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 1 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Color Values: Named, Hex, RGB, HSL” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this CSS Academy lesson?

Yes. Every CSS Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to CSS Academy