Fungsi Pencahayaan Warna - Trik CSS

Anonim

Semasa menggali jauh ke dalam teori warna, ada sesuatu yang disebut pencahayaan warna relatif. Secara sederhana, kecerahan warna menentukan sama ada kecerahannya. Pencahayaan 1 bermaksud warnanya putih. Sebaliknya, skor pencahayaan 0 bermaksud warnanya hitam.

Mengetahui kecerahan warna dapat berguna ketika berhadapan dengan warna dinamis atau rawak, untuk memberikan warna latar belakang yang tepat jika warnanya terlalu terang atau terlalu gelap. Sebagai peraturan, anda boleh menganggap bahawa warna yang bercahaya lebih dari 0.7 sukar dibaca pada latar belakang putih.

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

Penggunaan

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