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

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

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

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

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

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

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

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

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

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

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

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

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

色空間『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』方式で色が設定されています。

参考記事

もんプロ～問題発見と解決のためのプログラミング〜

 

2 Users

3 Pockets

【Sass】の書き方 bulmaフレームワークから読み解いてみる【初心者向け】

https://coinbaby8.com/sass-bulma-how-to-writing.html

ホームページなりWebサービスを作ろうと思ったらもれなく『HTML』と『CSS』が必要になりますが、実は多くのプログラマーが苦手意識を持ってたりするのが『CSS』。なんせ、書くのがめんどくさい。一行一行書いていかなきゃなのでとてもめんどくさいし、一箇所変えると他のあらぬところまで影響しちゃったりしてややこしい。よく使うクラスや書き方を用意しておいてどうにかやりくりしてきたものの、それでもやっぱりめんどうくさい。さらには変数もif文も計算もできないということで、『CSS』はプログラム言語じゃないっしょ。なんて言...

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

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

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

コードはこちら。

function setup() {
  createCanvas(500, 300);
  colorMode(HSL, 360, 100, 100, 100);
  background(0);
}

function draw() {
  noStroke();
  fill(random(180, 200),100 ,50,30);
  circle(random(width), random(height), random(40,80));
  
}

『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』も使えるようになっておくと、

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

アオキ

たまにはランダムな色合いで遊んでみるのもええと思いまっせ〜

Generative Design with p5.js – [p5.js版ジェネラティブデザイン] ―ウェブでのクリエイティブ・コーディング

created by Rinker

• Kindle
• Amazon
• 楽天市場
• Yahooショッピング

[普及版]ジェネラティブ・アート―Processingによる実践ガイド

created by Rinker

• Amazon
• 楽天市場
• Yahooショッピング

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

『アート(視覚美術)』関係ではこんな記事も読まれています。

アオキ

ツイッターでも記事ネタ含めちょろちょろ書いていくので、よろしければぜひフォローお願いしますm(_ _ )m