フロントエンド

【CSS】色の設定は『RGB』より『HSL』の方が使いやすい件〜ランダムに使いたい(3)【P5.js】

遊ぶようにプログラミングができる『クリエイティブコーディング』はもちろん、

ホームページやウェブサービス、洋服やコスメなどでも、

『色』によってずいぶんと雰囲気が変わります。

  • モノクロにしてシックにしてみたり、
  • 暖色系であったかくしてみたり、
  • ショッキングピンクで攻めてみたり。

『色』の表現範囲を表す用語として『色空間(カラースペース)』というものがあり、

インターネットで使う『色空間(カラースペース)』は大きく3つあるのかなと思います。

 
色空間(カラースペース)
 
・RGB・・Red、Green、Blueの3原色・・ウェブ・テレビ・ディスプレイで使われてる
・CMYK・・シアン、マゼンタ、イエロー、ブラック・・印刷やプリンタで使う
・HSL・・色相(Hue)、彩度(Saturation)、輝度(Lightness)・・CSSで設定できる
 

ホームページなどで配色をしようとすると、

長らく『RGB(アールジービー)』が使われていた経緯もあり、

ググっても『RGB』で説明されていることが多いのですが、

最近は『HSL(エイチエスエル)』の方がわかりやすく、

『P5.js(ProcessingのJavaScript版)』などの『クリエイティブコーディング』でも使いやすいと感じているので、

今回は『HSL』寄りでまとめてみたいと思います。

Sponsored link

色空間『RGB』の特徴とメリット

『RGB』は、赤(Red)・緑(Green)・青(Blue)の頭文字をとったもので、

『光の3原色』と呼ばれています。

ウェブやソフトェア上では、

原色一つにつき256段階の濃さを設定できるので、

256 × 256 × 256 = 葯1670万通りの色を表現することができます。

RGBの3つの値で表現したり、16進数で表現されることもよくあります。

  • 黒・・0:0:0・・・#000000
  • 白・・255:255:255・・・#FFFFFF
  • 赤・・255:0:0・・#FF0000
  • 緑・・0:255:0・・#00FF00
  • 青・・0:0:255・・#0000FF
  • 紺・・29:49:86・・#283455

テレビやモニター、ディスプレイでも『RGB』が表現されているので、

指定した色そのままで表示されるというのはメリットなのかなと思います。

アオキ
決まった色を使う分には『RGB』でまったく問題ないと思います。

色空間『RGB』のデメリット・・同系色が指定しづらい

ホームページなど、決まった色を指定する場合は『RGB』でも問題ないと思いますが、

プログラミングでデザインやアートをつくる『クリエイティブコーディング』などで、

  • 同系色をランダムに使いたい
  • ちょっとだけ明るくしたい

となると、とたんに『RGB』だと表現が難しくなります。

青なら下記で設定できますが、

  • 青・・0:0:255・・#0000FF

青の同系色の紺は、全然違う値になってしまいます。

  • 紺・・29:49:86・・#283455

空色だったりシアンだったりターコイズブルーだったり、

似たような色だけを使いたいなぁと思っても、

直感的にわかりづらいので、一つ一つ調べる必要があるのかなと思います。

アオキ
一つ一つ調べるのもなかなかしんどくなってきますわね。

色空間『HSL』の特徴とメリット

『HSL』ってなんだろうと調べてみると、下記の頭文字をとった用語になります。

  • Hue・・色相・・色合い・・360度の角度で指定できる
  • Saturation・・彩度・・0%〜100%・・0%は灰色 100%で純色
  • Lightness・・明度・・0%〜100%・・0%は黒 50%が原色 100%は白

※LightnessはBrightnessとして『HSB』と表現する場合もあります。

例えば赤色を基準として、

  • ちょっと薄い赤/濃い赤
  • ちょっと暗い赤/明るい赤

なんて色を選ぼうとしたら、

『Hue』を赤に固定して、
『Saturation』と『Lightness』をちょっと変更すれば、
彩度や明るさだけを変える事ができるのでわかりやすいです。

See the Pen
hsl() による色の変化
by aoki_monpro (@suica)
on CodePen.

プログラミングでデザインやアートをつくれる『クリエイティブコーディング』では、

『ランダム関数』というものを使えるので、

例えば 赤系統で、

デザイナー
ちょっとだけ明るさをまばらにしたい

という時に、とてもわかりやすく使う事ができます。

余談ですが、
最近流行りのCSSフレームワーク『Bulma』でも、
『HSL』方式で色が設定されています。

参考記事

Sponsored link

色空間『HSL』で遊んでみる

せっかくなので『クリエイティブコーディング(今回は『P5.js(ProcessingのJavaScript版)』)』で遊んでみます。

See the Pen
p5.js hsl-random
by aoki_monpro (@suica)
on CodePen.

コードはこちら。

『P5.js(ProcessingのJavaScript版)』では標準で『RGBモード』になっているので、

『colorMode』関数で『HSL』を設定する必要があります。

  • colorMode(HSL, Hの最大値, Sの最大値, Lの最大値, A・・透過の最大値);
  • colorMode(HSL, 360, 100, 100, 100);

『fill』関数で色を指定しているのですが、

  • fill (H,S,L,A)
  • fill(random(180, 200),100 ,50,30);

『Hue』を指定する箇所をrandom(180, 200)とすることで、

『Hue』を180〜200 の範囲のどれかで使うように設定しています。

ちょっと明るくするならLを増やしたり。

  • fill(random(180, 200),100 ,80,30);

See the Pen
p5.js hsl-random-2
by aoki_monpro (@suica)
on CodePen.

赤系にするならHを変えたり。

  • fill(random(0, 20),100 ,50,30);

See the Pen
p5.js hsl-random-3
by aoki_monpro (@suica)
on CodePen.

といった事が、直感的にわかりやすいなと思います。

色空間『RGB』と『HSL』のまとめ

決まった色を使う場合は『RGB』で何の問題もないのですが、

ある程度色の範囲を広げて使いたいなぁと思ったりすると、

なかなか『RGB』では設定が難しいので、

『HSL』も使えるようになっておくと、

表現の幅がひろがっていいんじゃないかなと思います。

アオキ
たまにはランダムな色合いで遊んでみるのもええと思いまっせ〜
created by Rinker
¥1,944 (2019/08/20 16:29:41時点 Amazon調べ-詳細)

『クリエイティブコーディング』関係ではこんな記事も読まれています。

1. 【P5.js】遊ぶようにプログラミングできるクリエイティブコーディング〜はじめのいっぽ〜(1)

2. 移動・回転・拡大縮小を覚えると表現に幅がでてきます(2)【P5.js】

3. 【CSS】色の指定なら『RGB』より『HSL』の方が使いやすい件〜ランダムで使いたい【P5.js】(3)

4. 『ベクトル』の使い方のコツ〜『ベクトル』はただの数値の組み合わせです(4)【P5.js】

5. 加速度をわかりやすくするために実際に動かしてみる【まずは2Dから】(5)【P5.js】

6. 配列をわかりやすく『ゴディバ』で例えてみる〜ボールを100個に増やしたり(6)【P5.js】

7. プログラミングの関数をわかりやすく使ってみる〜自動販売機に例えてみる〜(7)【P5.js】

8. プログラミングで色や大きさをランダムにして遊んでみる(8)【P5.js】

9. 【3Dプログラム】初心者にオススメな方法はこれ【P5.js】(9)

10. プログラムで図形の描き方~頂点と【バラ曲線】を使って〜 (10)【P5.js】

11. プログラミングで数学も身につく 一石四鳥なクリエイティブコーディング

12. プログラミングと三角関数〜小学生でもすんなりわかる三角関数を目指して

 

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

CAPTCHA


関連記事

  1. バックエンド

    【Webアプリ実践記】JSすら怪しい37歳おっさんが独学でVue.js+Laravelでwebアプリ…

    本業Webマーケッターと育児をしながら独学でwebアプリをつくってみる…

  2. フロントエンド

    プログラミングで色や大きさをランダムにして遊んでみる(8)【P5.js】

    遊ぶようにプログラミングができる『クリエイティブコーディング』。『…

  3. フロントエンド

    ホームページのつくり方を3ステップでわかりやすくまとめてみた【初心者向け】

    今回の記事ではこんな悩みにお答えします。ホームページを作れ…

  4. システムデザイン

    受注管理・発送管理システムのつくり方を考えてみる【Laravel】

    プログラミングを上達するための秘訣は「何かをつくる」ということだと思っ…

  5. バックエンド

    【厳選8冊】ホームページを作れるようになるためのおすすめ本【初心者向け】

    先日とあるコミュニティで質問があがりまして。教えたがり性分の身…

  6. フロントエンド

    【3Dプログラム】初心者にオススメな方法はこれ【P5.js】(9)

    一般的に『3Dプログラム』というとややこしい、敷居が高いイメージがある…

Sponsored link

最近の記事

  1. 学び・教育

    『ニュータイプの時代』〜リベラルアーツとテクノロジーの融合〜
  2. IoT関連

    【Arduino】ラジコンをつくってみた 〜今ドキのプログラミングの覚え方
  3. 数学

    【微分】とは わかりやすくまとめてみた〜めっちゃすごいわり算【初心者向け】
  4. 数学

    【三角関数】の使い方〜わかりやすさ重視でまとめてみた【動画あり】
  5. バックエンド

    【検索システム】をつくってみた【実際にログインしてさわれます】
PAGE TOP
//記事ページのみに構造化データを出力 //サムネイルを取得 //ここから構造化データの記述