Funkcia farebnej jasnosti - Triky CSS

Anonim

Keď sa ponoríte do teórie farieb, existuje niečo, čo sa nazýva relatívna jasnosť farieb. Zjednodušene povedané, jas farby určuje, či má jas. Svietivosť 1 znamená, že farba je biela. Naopak, skóre jasu 0 znamená, že farba je čierna.

Poznanie jasu farby môže byť užitočné pri práci s dynamickými alebo náhodnými farbami, aby sa zaistila presná farba pozadia, ak je farba príliš jasná alebo príliš tmavá. Ako základné pravidlo môžete vziať do úvahy, že farba, ktorej jas je viac ako 0,7, bude na bielom pozadí ťažko čitateľná.

Zákonníka

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

Využitie

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