Lightness
Embed This Widget
Add the script tag and a data attribute to embed this widget.
Embed via iframe for maximum compatibility.
<iframe src="https://colorfyi.com/iframe/glossary/lightness/" width="420" height="400" frameborder="0" style="border:0;border-radius:10px;max-width:100%" loading="lazy"></iframe>Paste this URL in WordPress, Medium, or any oEmbed-compatible platform.
https://colorfyi.com/glossary/lightness/Add a dynamic SVG badge to your README or docs.
[](https://colorfyi.com/glossary/lightness/)Use the native HTML custom element.
The perceived amount of light reflected by a color, ranging from black (0%) to white (100%).
Lightness is a perceptual measurement that indicates how light or dark a color appears. In the HSL model, lightness is the third component measured as a percentage, where 0% is pure black, 50% is the pure hue, and 100% is pure white. Lightness differs from brightness (used in HSV/HSB) in that maximum lightness always produces white regardless of saturation. In the CIELAB color space, the L* axis represents perceptual lightness, designed to be more uniform with human perception than HSL lightness.
Try It Out
Related Articles
CSS color-mix(): Blend Colors Natively in the Browser
Learn CSS color-mix() to blend colors natively in the browser. Master syntax, color spaces, practical use cases, and create dynamic palettes without JavaScript.
Building a Color Picker Web Component from Scratch
Build an accessible color picker as a Web Component. Implement canvas rendering, hue sliders, alpha channels, and custom events with Shadow DOM.
Perceptual Color Spaces: Lab, LCH, Oklab, OKLCH
Explore perceptually uniform color spaces — CIE Lab, LCH, Oklab, and OKLCH. Learn how each was designed, where it excels, and which to use for CSS and design work.
Color for Data Storytelling: Beyond Default Chart Colors
Go beyond default chart colors for data storytelling. Learn sequential, diverging, and categorical palettes, accessibility in dataviz, and D3/Chart.js color scales.
Emerald vs Jade vs Forest Green: Green Comparison Guide
Compare emerald (#50C878), jade (#00A86B), and forest green (#228B22). Learn the visual and hex code differences between these popular green shades.
Difference Between Cyan and Turquoise
Cyan (#00FFFF) and turquoise (#40E0D0) look similar but differ fundamentally in color model position, saturation, and use case. Here's the full breakdown.