Luminance
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/luminance/" 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/luminance/Add a dynamic SVG badge to your README or docs.
[](https://colorfyi.com/glossary/luminance/)Use the native HTML custom element.
A photometric measure of the intensity of light emitted or reflected from a surface per unit area in a given direction.
Luminance is a physical measurement expressed in candelas per square meter (cd/m2 or nits). It quantifies how bright a surface appears to the human eye and is fundamental to display technology, where typical monitors range from 250-400 nits and HDR displays can exceed 1000 nits. In color science, luminance is related to but distinct from lightness, which is a perceptual quality. The Y component of the CIE XYZ color space directly represents relative luminance, forming the basis for all photometric calculations in color science.
Try It Out
Related Articles
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.
Multi-Brand Color Architecture: One Codebase, Many Themes
Build multi-brand color architecture with CSS custom properties and design tokens. Support white-label theming from a single codebase with Tailwind integration.
Designing a Color API: REST Endpoints for Color Data
Design a RESTful color API with endpoints for color conversion, search, contrast checking, and palette generation. Learn schema design and best practices.
Generating Colorful OG Images with Next.js and Satori
Generate dynamic Open Graph images with Next.js and Satori. Create color-aware OG templates with gradients, brand colors, and responsive designs.
Is White a Color? Light, Pigment, and Perception
Is white a color or the absence of color? Explore the science of light, the pigment world, and how white is used in design — from #FFFFFF to warm whites.
What Is Color Harmony? Rules for Pleasing Palettes
Learn what color harmony means — complementary, analogous, triadic, and tetradic schemes. Understand the rules behind visually pleasing color combinations.