Color Everything in CSS – Simple Guide
June 26, 2025Color Everything in CSS – Simple Guide
Today we’re diving into CSS colors: how to define them, especially with modern methods like lab() and oklch().
1. What’s a “color”?
Color isn’t a physical property. It’s a perception created by our brain when light hits our eyes.
2. Color Spaces
These are 3D mappings of color. Some examples:
sRGB: The default space on most screens.CIELAB&Oklab: Offer more perceptually uniform color transitions.color(display-p3 ...): Supports a wider variety of colors on modern displays.
3. Color Models
Like RGB or HSL—numeric representations. They need a color space to mean anything.
4. Color Gamuts
It’s the range of colors a space can represent. If a display can’t show a color, it's “out of gamut”.
5. CSS Color Functions
rgb(), hsl(), hwb(): For basic sRGB colors.lab(), lch(): For CIELAB space.oklab(), oklch(): For Oklab space.color(), color-mix(): To tap into spaces like display‑p3, rec2020, etc.
Code examples:
.box-srgb {
background: rgb(255, 100, 50);
}
.box-oklab {
background: oklab(70% 0.05 -0.10);
}
.box-display-p3 {
background: color(display-p3 1 0.2 0.3);
}TL;DR
- Color space = how colors are mapped.
- Color model = numeric representation, needs a space.
- Color gamut = available color range.
- Modern CSS lets us use all these with proper functions.
Blog
Jul 20, 2025
🔧 1. Laravel 12.0 – Starter Kits & Core Changes Version 12.0 introduced modern starter kits for React, Vue, Livewire, plus integratio...
Jun 30, 2025
What’s New in ECMAScript 2025 On June 25, 2025, Ecma International officially approved ES2025, adding several useful features: 1. 📦 Import At...
Jul 31, 2025
The useCallback hook in React is used to return a memoized version of a callback function, so it's only recreated when its dependencies change. The...
Jul 02, 2025
Bypassing $fillable Safely with forceFill() in Laravel Ever used create() in Laravel and noticed some fields like role or status didn’t save? T...
Jun 03, 2025
Laravel 12.16.0 - New Features for Developers 1. New Validation Rule: in_array_keys You can now validate that an array contains at least one of the...
Jul 01, 2025
Supercharge Your PHP Enums with archtechx/enums PHP 8.1 introduced native enums—type‑safe sets of named values like statuses or roles. The arch...