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
Color Everything in CSS – Simple Guide
Jun 26, 2025
Color Everything in CSS – Simple Guide Today we’re diving into CSS colors: how to define them, especially with modern methods like lab(...
Supercharge Your PHP Enums with archtechx/enums
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...
Mastering Laravel 12 Conditional Validation
Jul 07, 2025
Mastering Laravel 12 Conditional Validation Laravel 12's validation system is super powerful, and conditional validation makes your forms...
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,...
Essential React Native UI & Interaction Components
Jul 01, 2025
Essential React Native UI & Interaction Components React Native provides a powerful set of built-in components for creating native mobile apps....
Object-Oriented Programming (OOP) – Core Concepts
Aug 09, 2025
Object-Oriented Programming (OOP) is a modern software development approach that divides an application into units called Objects that interact with...
