目的の色のカラーコードを様々な形式で取得できるカラーピッカー「HSL Color Picker」

WEBサイトのデザインを設定するCSS(スタイルシート)では、様々な形式で色を指定することが出来ます。RGBaやHSLaで指定すれば、色の透明度も指定できます。しかし、目的の色を出すためのカラーコードを自分で調べるのは面倒です。そんな時は「HSL Color Picker」などのカラーピッカーを使いましょう。

もくじ

  • 「HSL Color Picker」の概要
  • 使い方

「HSL Color Picker」の概要

使い方


まずはHSL Color Picker – by Brandon Mathisにアクセスしましょう。


画面には4本のスライダーがあります。各スライダーの役割は、上から

  • 色相を指定
  • 彩度を指定
  • 明度を指定
  • 透明度を指定
…です。4つのスライダーをうまい具合に調節し、自分の欲しい色を出しましょう。


目的の色が出てきたら、カラーコードを取得しましょう。表示されるカラーコードは、左から

  • 16進数カラーコード(透明度の指定には非対応・古いブラウザでも大丈夫)
  • RGBa形式(透明度の指定に対応)
  • HSLa形式(透明度の指定に対応)
となります。目的に応じて任意のコードを取得しましょう。透明度の指定をしない場合は、16進数カラーコードで指定するのが最安定といえます。

また、色を表示しているパレットの左側には、格子模様の四角・白色の四角・黒色の四角・青地に5個の穴が開いている四角が並んでいますが、これをクリックすると、上から

  • 透明(16進数カラーコードでは白色になる)
  • 白色
  • 黒色
  • 何らかの色(ランダム)
のカラーコードが出てきます。また、パレットは2枚あります。切り替え可能なので、背景となるパレットに適当な色をセットして透明度を操作するとどんな感じの色になるのかを試すなど、有効活用しましょう。なお、CSSでの色指定形式については、別記事で解説しています。

このブログを応援する・寄付する

当ブログでは暗号通貨による寄付を募っております。

Bitcoin:

Monacoin:

Litecoin: