Spalvos ryškumo funkcija - CSS-gudrybės

Anonim

Gilinantis į spalvų teoriją yra kažkas, vadinamas santykiniu spalvų skaisčiu. Paprasčiau tariant, spalvos ryškumas apibrėžia, ar jos ryškumas. 1 ryškumas reiškia, kad spalva yra balta. Priešingai, skaisčio balas 0 reiškia, kad spalva yra juoda.

Spalvos ryškumo žinojimas gali būti naudingas dirbant su dinaminėmis ar atsitiktinėmis spalvomis, siekiant pateikti tikslią fono spalvą, jei spalva yra per šviesi ar per tamsi. Pagal nykščio taisyklę galite laikyti, kad spalvą, kurios skaistis viršija 0,7, bus sunku perskaityti baltame fone.

Kodas

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

Naudojimas

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