🎨

Tailwind CSS風カラースケールを自動生成するツールを作った話

に公開
個人開発
Tailwind CSS
配色
デザインシステム
カラースケール
tech

はじめに

Webアプリケーションを開発していると、必ず直面するのが「配色」の問題だ。

特にTailwind CSSを使っていると、blue-500とかgray-100みたいな段階的なカラースケールの便利さに慣れてしまう。でも、いざ自分のブランドカラーで同じことをやろうとすると、これが意外と大変なんですよね。

「この#3B82F6を500として、50から950まで綺麗なグラデーションを作りたい」

そう思って手作業で色を調整したことがある人、結構いるんじゃないでしょうか。

今回は、その面倒な作業を自動化するツールを作った経緯と、どういう設計思想で作ったのかをまとめてみます。

なぜこのツールを作ったのか

Tailwind CSSのカラーシステムの良さ

Tailwind CSSのカラースケールには、いくつかの優れた特徴がある。

  1. 50から950までの11段階で、細かいニュアンスを表現できる
  2. 500が「基準色」として位置づけられている
  3. 明暗のバランスが取れていて、どの段階を使っても破綻しにくい

このシステムのおかげで、「ホバー時は一段暗く」「背景は薄めに」といった調整が直感的にできる。

既存ツールの課題

カラーパレット生成ツールは世の中にたくさん存在する。だけど、Tailwind CSSの構造に特化したものは意外と少なかった。

あっても、類似色（色相を回転させた色）まで同時に生成してくれるものは見つからなかったんですよね。デザインシステムを作るとき、メインカラーだけじゃなくてアクセントカラーも一緒に決めたい。そのニーズを満たすツールが欲しかったのだ。

ツールの設計思想

入力は最小限に

操作はシンプルにしたかった。カラーピッカーで色を選ぶか、HEXコードを入力する。それだけ。

余計な設定項目は設けない。「使い方を調べる」というステップを踏ませたくなかったから。

出力は実用的に

生成されたカラースケールは、すぐにプロジェクトで使える形式で出力される。

HEX形式とHSL形式の両方に対応した。特にHSL形式は、shadcn/uiのCSS変数形式に合わせてある。これで、コピペするだけでテーマに組み込める。

/* HEX形式 */
:root {
  --color-50: #eff6ff;
  --color-100: #dbeafe;
  --color-500: #3b82f6;
  --color-900: #1e3a8a;
}

/* HSL形式（shadcn/ui対応） */
@layer base {
  :root {
    --50: 214 100% 97%;
    --100: 214 95% 93%;
    --500: 217 91% 60%;
    --900: 224 76% 33%;
  }
}

類似色も同時生成

メインカラーを選ぶと、色相を±30°、±60°ずらした類似色のスケールも自動生成される。

これがあると、セカンダリカラーやアクセントカラーの選定がスムーズになる。色相環上で近い位置にある色は、自然と調和するからだ。

色相 用途例
-60° 補助的なアクセント
-30° セカンダリカラー候補
0° メインカラー
+30° セカンダリカラー候補
+60° 補助的なアクセント

技術的なアプローチ

カラースケール生成のアルゴリズム

スケールの生成には、シンプルな線形補間を採用した。

明るくする場合は、RGB各成分を255（白）に向かって補間する。暗くする場合は、0（黒）に向かって補間する。

// 明るくする（例：400→300）
const lightenFactor = 0.18; // 18%白に近づける
newR = r + (255 - r) * lightenFactor;

// 暗くする（例：600→700）
const darkenFactor = 0.18; // 18%黒に近づける
newR = r * (1 - darkenFactor);

この方法のメリットは、どんな入力色でも破綻しにくいこと。彩度が高い色でも低い色でも、それなりに自然なグラデーションになる。

なぜHSLで色相回転するのか

類似色の生成にはHSL色空間を使っている。

HSL（Hue, Saturation, Lightness）は、色相・彩度・明度で色を表現する方式だ。色相だけを変えて、彩度と明度を維持すれば、調和のとれた色が得られる。

function rotateHue(hex: string, degrees: number): string {
  const { h, s, l } = hexToHsl(hex);
  const newHue = (h + degrees + 360) % 360;
  return hslToHex(newHue, s, l);
}

RGB色空間で同じことをしようとすると、かなり複雑な計算が必要になる。HSLを使うことで、コードもシンプルになった。

使い方のヒント

デザインシステムへの組み込み

このツールで生成したスケールは、Tailwind CSSの設定ファイルにそのまま追加できる。

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
          50: '#eff6ff',
          100: '#dbeafe',
          200: '#bfdbfe',
          // ...以下略
        }
      }
    }
  }
}

これでbg-brand-100やtext-brand-700といったクラスが使えるようになる。

アクセシビリティへの配慮

各色にはコントラストチェッカーへのリンクがついている。背景色と文字色の組み合わせが、WCAG基準を満たしているか確認できる。

見た目の美しさだけでなく、読みやすさも大事。この連携機能は、そういう意味で重要だと思っている。

今後の展望

現状はベースカラー1色からの生成だけど、将来的には複数色の関係性を考慮した生成機能も検討している。

例えば、「メインカラーとセカンダリカラーを両方指定して、バランスの取れたパレットを提案する」みたいな機能。これがあると、より実践的なデザインワークフローに対応できそうだ。

おわりに

配色は、デザインの基盤となる要素だ。でも、技術的なツールでサポートできる部分も多い。

今回作ったツールが、少しでも誰かの開発を楽にできれば嬉しい。使ってみてフィードバックがあれば、ぜひ教えてほしい。

ツールはこちら → Color Scale Generator

Discussion