रंग चमकता फंक्शन - सीएसएस-ट्रिक्स

जब रंग सिद्धांत में गहराई से खुदाई करते हैं, तो सापेक्ष रंग ल्यूमिनेंस नामक कुछ होता है। बस इसे लगाने के लिए, एक रंग की चमक को परिभाषित करता है कि क्या इसकी चमक है। 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