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.21.0 – A Smart Update for Cleaner Queries and Stricter Validation
Aug 03, 2025
Laravel 12.21.0 introduces two game-changing features aimed at writing cleaner, more maintainable code. The update includes the new whereValueBetwe...
React Native 0.80 & ExecuTorch: A Powerful Leap into Offline AI for Mobile Apps
Jul 28, 2025
🚀 What’s New in React Native 0.80? The React Native 0.80 release marks a pivotal moment in mobile development. This update not only enhances...
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....
Mastering Async Iteration in JavaScript with Array.fromAsync()
Jul 27, 2025
🔍 What Exactly is Array.fromAsync()? Array.fromAsync() is a static method introduced in ES2024 as part of JavaScript's growing support for asynchr...
ECMAScript 2025 Detailed Update Guide for Frontend Developers
Jul 06, 2025
🔍 ECMAScript 2025 – Detailed Feature Guide All new ECMAScript 2025 features with code examples and explanation of their importance for front...
Comparison between Scopes + Traits × UseEloquentBuilder in Laravel
Jul 13, 2025
Laravel provides multiple ways to write reusable query logic. The two most common approaches are using Scopes with Traits or the newer #[UseEloquentBu...
