Saat menggali lebih dalam teori warna, ada sesuatu yang disebut luminansi warna relatif. Sederhananya, luminansi warna menentukan apakah kecerahannya. Luminance 1 berarti warnanya putih. Sebaliknya, skor luminansi 0 berarti warnanya hitam.
Mengetahui luminansi suatu warna dapat berguna saat berhadapan dengan warna dinamis atau acak, untuk memberikan warna latar belakang yang akurat jika warnanya terlalu terang atau terlalu gelap. Sebagai aturan praktis, Anda dapat mempertimbangkan bahwa warna dengan luminansi lebih dari 0,7 akan sulit dibaca pada latar belakang putih.
Kode
/// 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); )Pemakaian
$color: #BADA55; $luminance: luminance($color); // 0.6123778773