Όταν σκάβουμε βαθιά στη θεωρία χρωμάτων, υπάρχει κάτι που ονομάζεται σχετική φωτεινότητα χρώματος. Με απλά λόγια, η φωτεινότητα ενός χρώματος καθορίζει εάν η φωτεινότητά του. Η φωτεινότητα του 1 σημαίνει ότι το χρώμα είναι λευκό. Αντίθετα, η βαθμολογία φωτεινότητας 0 σημαίνει ότι το χρώμα είναι μαύρο.
Η γνώση της φωτεινότητας ενός χρώματος μπορεί να είναι χρήσιμη όταν αντιμετωπίζετε δυναμικά ή τυχαία χρώματα, προκειμένου να παρέχετε ένα ακριβές χρώμα φόντου εάν το χρώμα είναι πολύ φωτεινό ή πολύ σκοτεινό. Κατά κανόνα, μπορείτε να θεωρήσετε ότι ένα χρώμα του οποίου η φωτεινότητα είναι πάνω από 0,7 θα είναι δύσκολο να διαβαστεί σε λευκό φόντο.
Κώδικας
/// 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); )Χρήση
$color: #BADA55; $luminance: luminance($color); // 0.6123778773