Learning CSS - Color, Opacity, and Modern Color Models
This episode explores color in CSS: HEX, RGB, RGBA, and HSL formats, the difference between opacity and the alpha channel, and modern color models like color() and oklch for a wider gamut.
#Introduction
Episode 3 introduced the color and background-color properties with HEX values. Episode 6 expands on that: you'll understand the color formats fully — HEX, RGB, RGBA, and HSL — and control transparency with opacity and the alpha channel. Modern color models like color() and oklch give more accurate control, and running npx serve . makes it easy to test all of them.
#Color Formats: HEX and RGB
#HEX
HEX notation writes a color as six hexadecimal digits, two for each red, green, and blue channel:
.primary {
background-color: #2563eb;
}
.shorthand {
border-color: #0f0;
}#2563eb means red 0x25, green 0x63, and blue 0xeb. When both digits per channel are the same, you can shorten them to three digits, like #0f0 for full green.
#RGB and RGBA
The rgb() function accepts decimal values 0-255 or percentages:
.solid {
color: rgb(37, 99, 235);
}
.soft {
background-color: rgba(37, 99, 235, 0.2);
}The fourth parameter in rgba() is the alpha — the level of transparency between 0 and 1. Alpha blends with the background color behind it, so the color looks more "glowing" or "washed out" depending on the alpha value.
#HSL: A More Intuitive Color
HSL describes a color with three dimensions: hue (the color wheel, 0-360 degrees), saturation (percentage), and lightness (percentage):
.base {
background-color: hsl(221, 83%, 53%);
}
.hover {
background-color: hsl(221, 83%, 40%);
}
.alpha-hsl {
border: 1px solid hsla(221, 83%, 53%, 0.5);
}HSL's advantage: to make a color darker or lighter, you simply lower or raise the lightness without touching the hue. This is far easier to imagine than fiddling with three RGB values.
#Opacity vs the Alpha Channel
Both opacity and alpha make elements transparent, but the effects differ:
.opacity-full {
opacity: 0.5;
}
.alpha-bg {
background-color: rgba(37, 99, 235, 0.5);
}opacity: 0.5 makes the entire element — including text and border — half transparent, and it creates a new stacking context. The alpha channel only colors the part given the value — text inside an element with rgba on its background stays fully opaque.
.kartu {
background-color: rgb(37, 99, 235);
opacity: 0.5;
}
.badge {
color: rgba(255, 255, 255, 0.8);
}Use opacity to hide or dim an entire element. Use alpha for overlays, shadows, or see-through background colors without affecting the text.
#Modern Color Models
#The Color Function and Oklch
The color() function can reference other color spaces like display-p3. The oklch color space mimics how the human eye perceives color and provides a more even lightness distribution:
.modern {
color: oklch(0.55 0.2 255);
}
.wide-gamut {
background-color: color(display-p3 1 0 0);
}In oklch, the first value is lightness (0-1), the second is chroma (intensity), and the third is hue in degrees. Modern browsers support oklch, and these values give more consistent color control when you adjust the lightness.
#Color-Mix
color-mix() blends two colors by a given percentage, useful for generating color variants automatically:
.warna-hover {
background-color: color-mix(in srgb, #2563eb 85%, black);
}
.warna-active {
background-color: color-mix(in oklch, #2563eb 70%, white);
}Instead of guessing the HEX for a hover variant, mix the base color with black or white. color-mix() also works with custom properties, so themes can produce variants consistently.
#Exercise: A Color Palette
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Palet Warna</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="swatch swatch-primary">HEX</div>
<div class="swatch swatch-rgba">RGBA</div>
<div class="swatch swatch-hsl">HSL</div>
<div class="swatch swatch-oklch">OKLCH</div>
</body>
</html>.swatch {
display: inline-block;
width: 120px;
padding: 24px;
color: white;
border-radius: 8px;
text-align: center;
}
.swatch-primary {
background-color: #2563eb;
}
.swatch-rgba {
background-color: rgba(37, 99, 235, 0.7);
}
.swatch-hsl {
background-color: hsl(221, 83%, 40%);
}
.swatch-oklch {
background-color: oklch(0.55 0.2 255);
}Open the page in the browser and notice the difference between each swatch. For quick testing, open DevTools, change the color values, and click the save button in the Colors tab.
#Common Mistakes and Solutions
#Alpha Everywhere
If text looks washed out, check whether opacity is applied on the parent element — it dims the entire subtree. Use the alpha channel on the background when only the color should be transparent.
#HSL and Extreme Lightness
A lightness value of 100 percent is always white and 0 percent is always black, regardless of hue. If a color looks "washed out", lower the lightness and raise the chroma.
#Mixing Models Carelessly
HEX, RGB, and HSL display the same results for equivalent colors. Choose one dominant style in your project, for example HSL or oklch, so things stay consistent and easy to maintain.
#Closing
Key takeaways:
- HEX is shorthand for RGB with two digits per channel;
rgba()andhsla()add alpha. - HSL expresses hue, saturation, and lightness, making color variants easier to create.
opacitydims the entire element; alpha only affects the color given the value.oklchoffers a more accurate, perceptually consistent color space.color-mix()produces color variants automatically without guessing numbers.- Always test text contrast against the background color for accessibility.
In the next episode, episode 7, we'll cover Flexbox for one-dimensional layout — arranging elements horizontally or vertically with full control over alignment, space distribution, and order. Get your practice HTML ready.