Khi đào sâu vào lý thuyết màu sắc, có một thứ gọi là độ chói màu tương đối. Nói một cách đơn giản, độ chói của một màu xác định độ sáng của nó. Độ chói bằng 1 có nghĩa là màu trắng. Ngược lại, điểm độ chói bằng 0 có nghĩa là màu đen.
Biết được độ chói của màu có thể hữu ích khi xử lý các màu động hoặc ngẫu nhiên, để cung cấp màu nền chính xác nếu màu quá sáng hoặc quá tối. Theo nguyên tắc chung, bạn có thể coi rằng một màu có độ chói trên 0,7 sẽ khó đọc trên nền trắng.
Mã
/// Returns the luminance of `$color` as a float (between 0 and 1) /// 1 is pure white, 0 is pure black /// @param (Color) $color - Color /// @return (Number) /// @link http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef Reference @function luminance($color) ( $colors: ( 'red': red($color), 'green': green($color), 'blue': blue($color) ); @each $name, $value in $colors ( $adjusted: 0; $value: $value / 255; @if $value < 0.03928 ( $value: $value / 12.92; ) @else ( $value: ($value + .055) / 1.055; $value: pow($value, 2.4); ) $colors: map-merge($colors, ($name: $value)); ) @return (map-get($colors, 'red') * .2126) + (map-get($colors, 'green') * .7152) + (map-get($colors, 'blue') * .0722); )Sử dụng
$color: #BADA55; $luminance: luminance($color); // 0.6123778773