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
Laravel 12.18.0 Update
Jun 17, 2025
Laravel 12.18.0 Update The Laravel team released version 12.18.0 with several cool updates: String encrypt() & decrypt() helpers are...
CSS Specificity: Layers vs BEM vs Utility Classes
Jun 26, 2025
CSS Specificity: Cascade Layers vs BEM vs Utility Classes This article compares three approaches to managing CSS specificity — BEM, utility‑f...
Task Reminder with Laravel & MongoDB
Jun 30, 2025
📌 Building a Task Reminder App This guide shows how to set up a Laravel app using MongoDB to implement a task reminder system with authentication,...
Laravel Queue & Job System: From Table Creation to Production Deployment
Jul 01, 2025
🚀 Laravel Queue & Job System We’re gonna walk you through Laravel queues from setup to deploying in production using Supervisor. Step 1...
Laravel 12.19: Elegant Query Builders with PHP Attributes
Jul 07, 2025
Laravel 12.19: Elegant Query Builders with PHP Attributes In Laravel 12.19, you can now use the #[UseEloquentBuilder] PHP attribute to assign a cus...
Using Web Components the Smart Way
Jul 06, 2025
Using Web Components the Smart Way A lot of developers assume Web Components are meant to replace full SPA frameworks like React or Vue. But in rea...
