タグ

配色とhslに関するokyawaのブックマーク (2)

  • 【CSS】HSLはこんなに便利! – RGBからHSLへ

    HSL使ってますか?まだ使ったことがないという人は、このページでHSLを体験してください。マウスホイールを回すだけで色を作成できます。RGBでは手間がかかった色の作成もHSLなら簡単にできます。HSLは、イメージした色を簡単に作成したいと思っている人に強くおすすめします。 CSSでの色の指定方法 一覧 HSLをやる前に、HSLを含めて色を指定する方法をざっとおさらいしておきます。 下に私が知っている色を指定する方法を書いてみました。形式はちがいますが、すべて同じ色を指定しています(厳密に言うと値を変換するときに少数点以下を丸めるなどしているためまったく同じと言う訳ではありませんが、モニタでは同じに見えると思います)。 color: #778899;                   /* ① #RRGGBB 形式 カラーコード */ color: #789;               

    【CSS】HSLはこんなに便利! – RGBからHSLへ
  • 配色を考えるのが面倒ならhsl()を使おう - Qiita

    hsl()ではhue:色相、saturation:彩度、lightness:輝度の3要素で色を指定します。 RGBより直感的な色指定方法としてCSS3で追加されました。 キーとなるhueさえ最初に決めておけば、あとは彩度と輝度の割合を変えるだけでそれなりにまとまったサイト配色になります。 モックや社内用管理画面をゴリゴリ作る際に覚えておくとべんり! 指定方法 hue:色相 0~360°の角度の値で指定。 角度のため、例えば400と指定すると40に変換されます。 0=360=red saturation:彩度 0~100%の割合で指定。 100%=純色、0%=灰色 lightness:輝度 0~100%の割合で指定。 100%=白、50%=純色、0%=黒 (明度とは異なるので注意。明度は100%=純色、0%=黒。) 例)hue=0 の場合の変化 See the Pen hsl() による色の

    配色を考えるのが面倒ならhsl()を使おう - Qiita
  • 1