Little Strange Software

スマホアプリの開発を行う LittleStrangeSoftware のブログです。

HSL版カラーパレット

 どうも!LSSです!!

  以前公開した、4クリックRGBカラーパレットに続き、HSL版カラーパレットを作ってみました!

 

 

 

 

 

HSLって?

 

 Web上で色を表現する形式として、RGB形式と別に存在するもう一つの形式です。

 

 RGB形式は#aabbccのように6桁の16進数で色を表現しますが、
最初の2桁が赤(Red)の強さ、次の2桁が緑(Green)の強さ、最後の2桁が青(Blue)の強さという形式で表現されています。
 赤緑青のそれぞれハッキリした色の場合は分かりやすいのですが、くすんだ色・暗い色・明るい色を表現した場合には分かりにくいものでもあります。

 

 HSL形式は「色相・彩度・明度」の3つで表現され、最初の「色相」は0~359で全ての色の種類がここで決まります。

 彩度は鮮やかさ。これを落とすとくすんだ色になります。

 明度は明るさ。これが最低だと色相が何であっても黒、最大だと色相が何であっても白になります。

 

 

HSL版カラーパレット

 

 HSL形式に沿って作ったカラーパレットです。

 HSLそのまま、色相・彩度・明度を選択して色を作る事ができます^^

 全てが連動しており、例えば彩度を落とすと、色相選択の色も彩度が落ちたものになります。

 

 色相360種類、彩度・明度0~100%の全てをマスにすると膨大な量になってしまうので、ある程度の単位で区切りました。

 細かい調整をしたい場合は「微調整無」をクリックしていただくと、各調整項目の下に微調整用のマスが出てきます^^