Zenn
🎨

色って色々あんねん。

に公開
初心者
未経験
色
クリエイティブ
tech

はじめに - 色の沼にハマった

エンジニアとして普段はWebアプリを作っていた私が、クリエイティブコーディングに手を出した時のこと。

「色相って何？彩度？明度？HSL？RGB？#FF0000？」

同じ赤色なのに、なんでこんなに表現方法があるんだ...と完全に迷子になりました。
白って200色あんねん...?

特に混乱したのがこれ：

  • #FF0000 = rgb(255, 0, 0) = hsl(0, 100%, 50%)

全部同じ赤なのに、なぜ数値が全然違うの？

この記事は、そんな色の迷子になった私が整理した「クリエイティブコーディングで色を扱うための基礎知識」です。

まず体験してみよう

理屈より先に、実際に色をいじってみましょう。
ささっとClaudeパイセンに作成してもらったので、遊んでみてください。

色の基本：たった3つの要素

色は基本的に以下の3つの要素で表現されます：

1. 色相（Hue）

「何色か」を表す

  • 赤、青、緑、黄色など、色の種類そのもの
  • 0-360度の円（色相環）で表現
  • 0度=赤、120度=緑、240度=青

2. 彩度（Saturation）

「鮮やかさ」を表す

  • 100% = パキッとした鮮やかな色
  • 0% = 完全にグレー
  • 中間値 = くすんだ色

3. 明度（Lightness）

「明るさ」を表す

  • 100% = 白っぽい色
  • 50% = 純粋な色
  • 0% = 黒っぽい色

紛らわしい用語の整理

私が最初に混乱したのは、同じ意味なのに呼び方が違う用語たち：

同じ意味だけど呼び方が違う系

  • 明度 = Lightness = Brightness = Value（全部「明るさ」）
  • 彩度 = Saturation = Chroma（全部「鮮やかさ」）

微妙に違うけど基本同じ系

  • HSL: Hue, Saturation, Lightness
  • HSV/HSB: Hue, Saturation, Value/Brightness

基本的には同じものと考えてOK。明度の計算方法が少し違うだけです。

なぜクリエイティブコーディングではHSLが便利なのか

RGBだと大変な例

虹色のアニメーションを作りたい時：

// RGBで虹色アニメーション（めんどくさい）
let r = 255, g = 0, b = 0; // 赤から始まって...
// 緑に変化させるには？黄色は？計算が複雑すぎる

HSLなら簡単

// HSLなら色相を回すだけ
let hue = frameCount % 360;
fill(hue, 80, 60); // 色相だけ変化、彩度・明度は固定

圧倒的に直感的！

よく使うパターン集

1. 時間で色が変化するアニメーション

function draw() {
  let hue = millis() * 0.1 % 360; // ゆっくり色相が回転
  fill(hue, 80, 60);
  circle(width/2, height/2, 100);
}

2. マウス位置で色が変わる

function draw() {
  let hue = map(mouseX, 0, width, 0, 360);
  let saturation = map(mouseY, 0, height, 0, 100);
  fill(hue, saturation, 60);
  circle(mouseX, mouseY, 50);
}

3. 複数の色で調和を作る

let baseHue = 200; // 基準の色相（青系）

// 類似色（近い色相）
fill(baseHue, 80, 60);      // ベース
fill(baseHue + 30, 80, 60); // 少しずらした色
fill(baseHue - 30, 80, 60); // 逆方向にずらした色

// 補色（正反対の色相）
fill(baseHue + 180, 80, 60); // 180度反対の色

RGB・16進数も理解しておこう

クリエイティブコーディングではHSLが便利ですが、Web開発や他のツールとの連携でRGB・16進数も重要です。GLSLとかはRGBなのかな？

RGB値の読み方

rgb(255, 0, 0) = 赤

  • 第1引数：赤の強さ（0-255）
  • 第2引数：緑の強さ（0-255）
  • 第3引数：青の強さ（0-255）

16進数の読み方

#FF0000 = 赤

  • FF = 255（赤）
  • 00 = 0（緑）
  • 00 = 0（青）

16進数では：

  • 00 = 0（最小）
  • FF = 255（最大）
  • 80 = 128（中間）

省略記法

同じ値が続く時は3桁で書ける：

  • #000 = #000000（黒）
  • #FFF = #FFFFFF（白）
  • #F00 = #FF0000（赤）

実践的な使い分け

HSLを使う場面

  • アニメーションで色を変化させる
  • 色相・彩度・明度を個別に調整したい
  • 調和のとれた色パレットを作る
  • 直感的に色を操作したい

RGBを使う場面

  • 他のシステムとの連携
  • 精密な色の計算
  • 画像処理
  • パフォーマンスが重要な場面

16進数を使う場面

  • HTMLやCSSでの色指定
  • デザインツールからの色コピー
  • コンパクトな色の記述

まとめ

色の扱いで迷子になったら、この順番で。

  1. 基本は3要素：色相・彩度・明度
  2. クリエイティブコーディングならHSLで考える
  3. 用途に応じてRGB・16進数を使い分け
  4. 同じ色の異なる表現だと理解する

最初は「また別の呼び方か」程度に思っておけばOK。実際に手を動かして色をいじっているうちに、自然と理解できるようになります。

色は感覚的なものなので、理屈より体験が大切。たくさん色をいじって、楽しいクリエイティブコーディングライフを送りましょう！

参考リンク

この記事が誰かの色の迷子状態を解決できれば嬉しいです。もしご意見などあれば、コメントで教えてください！

Discussion