ブランドカラーを1色入れるだけ。 使えるカラーシステムができあがります。

GetColors は、ブランドカラーからライトモードとダークモードの UI ロールを作り、すべての組み合わせのコントラストを確認して、Tailwind v4、shadcn/ui、素の CSS、デザイントークン向けに書き出します。AI エージェントも MCP から同じツールを使えます。

GetColors の使い方

  1. まずブランドカラーを 1 色用意します。HEX コードを入力するか、カラーピッカーで選ぶか、画像や既存の Web サイトから取り込みます。
  2. GetColors はその色から、OKLCH でライトテーマとダークテーマを作成します。canvas、surface、ink、primary、accent といったロールが割り当てられます。
  3. すべてのロールの組み合わせを、両方のテーマで WCAG 2 のコントラストに照らして確認します。対応が必要な組み合わせは Studio で分かります。
  4. CSS 変数、light-dark()、Tailwind v4、shadcn/ui、デザイントークンとして書き出せます。MCP 経由で AI エージェントに同じツールを使わせることもできます。

GetColors でできること

  • カラーシステムを作る

    ブランドカラー 1 色から、OKLCH でライト・ダーク両方の UI ロールを作成。両テーマをライブプレビューで確認できます。

  • カラーパレットを生成する

    気に入った色をロックして、残りをシャッフル。アナロガス、トライアド、補色などのハーモニーを試せるほか、色覚特性のある人にどう見えるかも確認できます。

  • コントラストをチェックする

    文字色と背景色の組み合わせを WCAG 2.1 と APCA で判定し、不合格の文字色は自動で修正できます。

  • 今ある配色を監査する

    CSS、Tailwind のテーマ、shadcn のグローバル CSS を貼り付けると、コントラスト不足、ほぼ同じ色の重複、直書きの値、ダーク用ロールの不足を検出します。監査はブラウザー上で実行されます。

  • パレット、グラデーション、色名を探す

    厳選したカラーパレットや CSS グラデーションを、雰囲気・テーマ・色相から探せます。色名で検索して、HEX、RGB、OKLCH の値も確認できます。

  • 普段の作業環境で使う

    Chrome 拡張機能、Figma プラグイン、REST API、AI エージェント向けの MCP サーバー、shadcn/ui レジストリは、いずれも Web サイトと同じエンジンで動きます。

よくある質問

GetColors とは？

GetColors は、デザイナーと開発者のためのカラーツール集です。カラーパレットジェネレーター、カラーシステム Studio、コントラストチェッカー、Tailwind スケールジェネレーター、画像のカラーピッカーなどがそろっています。カラーツールの利用にアカウントは必要ありません。

GetColors は無料で使えますか？

はい。主要なカラーツールと書き出し機能はすべて無料です。GetColors Pro は別プランで、より大きなクラウドのパレットライブラリが使え、AI エージェントからも利用できるようになります。

カラーシステムとは？

カラーシステムとは、それぞれの色に役割を持たせる考え方です。ばらばらなパレットではなく、背景、文字、主要アクション、境界線といったロールを、ライトテーマとダークテーマの両方で定義します。そのため、すべての組み合わせのコントラストを確認でき、コードの中でも一貫して使い回せます。

OKLCH とは？ なぜ GetColors で使っているの？

OKLCH は、明度、彩度（クロマ）、色相で色を表す形式です。数値が等間隔で変わると見た目も等間隔に変わる色空間なので、スケールやテーマの見た目を揃えやすくなります。Tailwind v4 も独自のパレットに OKLCH を採用しています。

AI エージェントから GetColors を使えますか？

はい。GetColors は MCP サーバーを提供しているため、Claude、Cursor などの MCP クライアントから、パレットの生成、コントラストの確認、Tailwind スケールやカラーシステムの作成、コードベース内の色の監査ができます。無料のツールにトークンは不要です。