Renk Parlaklığı İşlevi - CSS Hileleri

Anonim

Renk teorisinin derinliklerine inerken, göreceli renk parlaklığı denen bir şey vardır. Basitçe söylemek gerekirse, bir rengin parlaklığı onun parlaklığını belirler. 1 parlaklık, rengin beyaz olduğu anlamına gelir. Öte yandan, 0 parlaklık puanı rengin siyah olduğu anlamına gelir.

Bir rengin parlaklığını bilmek, dinamik veya rastgele renklerle uğraşırken, renk çok parlak veya çok koyu ise doğru bir arka plan rengi sağlamak için yararlı olabilir. Genel bir kural olarak, parlaklığı 0.7'nin üzerinde olan bir rengin beyaz bir arka planda okunmasının zor olacağını düşünebilirsiniz.

Kod

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

Kullanım

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