hsl関数
概要
CSSで使える関数
色を設定する
hslの3つの引数
h hue 色相
s saturation 彩度
l lightness 輝度
使用例
code:css
.telomere-border.unread {border-color: hsl(90, 100% , 50%)}
下のGIFではテロメアの色を変えながらhsl関数がどんな動きをするか見ている
https://gyazo.com/bbb0bec707acabf4ab1468d7dff2bde3
hsl関数の何が良いのか
色を調整しやすい
rgb関数の場合、色を混ぜる感覚が慣れていないと分からない
hslを使いやすくするための用意
色相をすぐに調べる方法がセットであれば、なお良いだろう
色相(hue)の度合いを知るためのページでざっとhueの度を知り、そっから調整。
基本的な色の色相度を暗記しておいてもいいだろう
Stop using HEX and rgb() - YouTube
https://youtube.com/shorts/vBl86spb1JY
Kevin Powellで存在を知る
配色を考えるのが面倒ならhsl()を使おう - Qiitaでさらに知る
関連
/villagepump/HSL