Splash カラーシステム：簡易 RGB の魅力

Splash は、色のフォーマットを3 桁の数字で表すシステムです。

システムの特徴と仕組み

• 構造: 各桁はそれぞれ異なる色チャンネルに対応します。
  • 1 桁目：赤 (Red)
  • 2 桁目：緑 (Green)
  • 3 桁目：青 (Blue)
• 値の範囲: 各数は

  0

  から

  9

  の整数です（例：

  900

  は赤が最大で緑・青が最小）。
• 決断麻痺防止:
  • 完璧な色を探すための頭を抱え込む手間を省きます。
  • 感情的な負担なく、「どれを選んでも大丈夫」という安心感を提供します。

標準的な色組み合わせの例

基本的には以下の組み合わせが最も一般的です。

000

999

555

079

090

099

009

409

909

900

940

990

自由度の確保: 標準的な組み合わせだけでなく、独自スタイルを作る十分な余地があります。

• 例：

  289

  (より深いシアン)、

  529

  (パープル) など
• 完璧でなくても問題ありません。この制約こそが、ミスを恐れずに色を選べる「解放感」を生み出します。

なぜ「1,000 種類」なのか？

Splash カラーは合計 1,000 種類しか存在しないため、すべての組み合わせをリスト化する現実的なメリットがあります。

• 高速動作: コードが静的に生成できるため、パフォーマンスに優れています（Cellpond プロジェクトの戦略の一例）。
• 直感的な操作: ユーザーは

  1

  から

  9

  の個々の値のみを扱うだけで済み、ドラッグ＆ドロップも容易です。

JavaScript での実装方法

Splash コードから標準的な RGB / 十六進法 (#Hex) に変換する方法はいくつかあります。

方法 1：自動計算によるマッピング

単純な数学式で

0-9

0-255

function getHexFromSplash(splash) {
  // 1. 入力を文字列とし、不足分を '0' で埋める (例: "9" -> "009")
  const splashChannels = splash.toString().padStart(3, "0").split("")

  // 2. 各値を線形マッピングする (値 / 9 * 255)
  const rgbChannels = splashChannels.map((v) => Math.floor((v / 9) * 255))

  // 3. 各成分を十六進法に変換し連結する
  const hexChannels = rgbChannels.map((v) => v.toString(16).padStart(2, "0"))
  
  return "#" + hexChannels.join("")
}

// 例: Splash "900" -> "#f00" (赤)
console.log(getHexFromSplash("900")); 

方法 2：テーマに合わせたカスタマイズ

「完全な黒」や特定の色バランスを好む場合は、ルックアップテーブルを手作業で作成し使用します。

例えば、暗い背景でも視認性が高く、かつ青み・緑みが少し入ったようなパステル調を実現したい場合：

const CHANNEL_VALUES = [
  // Red channel values (0-9 mapped to hex)
  ['17', '37', '46', '62', '80', '9f', 'ae', 'cc', 'f2', 'ff'],
  // Green channel values
  ['1d', '43', '62', '80', '9f', 'ae', 'cc', 'de', 'f5', 'ff'],
  // Blue channel values
  ['28', '46', '62', '80', '99', 'ae', 'cc', 'de', 'f7', 'ff'] // ※調整済み例
]

function getHexFromSplash(splash) {
  const splashChannels = splash.toString().padStart(3, "0").split("")
  
  // ルックアップテーブルから直接取得
  const hexChannels = splashChannels.map((v, i) => CHANNEL_VALUES[i][v])
  return "#" + hexChannels.join("")
}

方法 3：静的ルックアップテーブル（超高速化）

計算ロジックを完全に省略し、配列の直接参照のみを使用する方法です。パフォーマンスが最大化されます。

const SPLASH_TO_HEX = [
  "#000000", "#00001c", "...", "#ffffff" 
  // 全ての 000〜999 のケースを事前に定義
];

function getHexFromSplash(splash) {
  return SPLASH_TO_HEX[splash]
}

その他の言語・フレームワークでの利用

SCSS (Matan)

SCSS 関数として実装され、

splash()

@function splash($r, $g, $b) {
  @return rgb($r * 28.34, $g * 28.34, $b * 28.34);
}

.foo {
  background-color: splash(0, 0, 9); // Splash "009"
}

• プリセット CSS: すべてのカラーを含む静的なファイルも利用可能です。

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/matan-h/splash-css@master/dist/styles.css">
  <!-- 使用例 -->
  <span style="background-color: var(--sp090)">090</span>
  

CSS ミックスイン (Roman Komarov)

CSS 変数と組み合わせることで、以下のように簡潔に記述できます。

<span style="--splash-bg: 971">971</span>

• 利点: 3 桁の数字のみを入力するため、テキストコードとの相性が抜群です。

まとめ

Splash カラーは、人間が扱いやすく、コンピュータでも高速に処理できる理想的な色システムです。

• 読みやすさ:

  900

  という数字だけで「赤」と即座に理解できます。
• 柔軟性: 計算ロジックを使わず、静的テーブルで完全に抽象化することも可能です。
• 心身の健康: 選択肢が多すぎることで生じる「決断麻痺」を防ぎます。

ご意見やアイデアがありましたら、お気軽にお知らせください！