Wenn man tief in die Farbtheorie eintaucht, gibt es etwas, das als relative Farbluminanz bezeichnet wird. Einfach ausgedrückt definiert die Leuchtdichte einer Farbe, ob ihre Helligkeit. Eine Luminanz von 1 bedeutet, dass die Farbe weiß ist. Im Gegenteil, ein Luminanzwert von 0 bedeutet, dass die Farbe schwarz ist.
Die Kenntnis der Luminanz einer Farbe kann beim Umgang mit dynamischen oder zufälligen Farben hilfreich sein, um eine genaue Hintergrundfarbe zu erhalten, wenn die Farbe zu hell oder zu dunkel ist. Als Faustregel können Sie annehmen, dass eine Farbe mit einer Luminanz von über 0,7 auf weißem Hintergrund schwer zu lesen ist.
Code
/// 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); )Verwendung
$color: #BADA55; $luminance: luminance($color); // 0.6123778773