Värvi heleduse funktsioon - CSS-trikid

Anonim

Värviteooriasse süvenemisel on midagi, mida nimetatakse värvide suhteliseks heleduseks. Lihtsamalt öeldes määratleb värvi heledus, kas selle heledus. Heledusaste 1 tähendab, et värv on valge. Vastupidi, heleduse skoor 0 tähendab, et värv on must.

Värvi heleduse tundmine võib olla kasulik dünaamiliste või juhuslike värvidega tegelemisel, et saada täpne taustavärv, kui värv on liiga hele või liiga tume. Rusikareeglina võite arvestada, et värvi, mille heledus on üle 0,7, on valgel taustal raske lugeda.

Kood

/// 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); )

Kasutamine

$color: #BADA55; $luminance: luminance($color); // 0.6123778773