ToolDeckのカラーツールを使えば、カラーフォーマット間の変換、アクセシビリティのコントラスト比チェック、パレット生成、CSSグラデーションの作成、カラー名やTailwindクラスの検索をブラウザ上で直接行えます。カラーコンバーターはHEX、RGB、HSL、HSVを双方向で変換します。コントラストチェッカーはWCAG 2.1のAAおよびAAAへの準拠を検証します。パレットジェネレーターは任意のベースカラーから補色・類似色・三色配色・四色配色を生成します。CSSグラデーションジェネレーターはそのままコピーできる線形・放射グラデーションコードを出力します。カラーネームファインダーは任意の値を最も近いCSS命名カラーに照合し、TailwindカラーファインダーはあらゆるカラーをTailwindユーティリティクラスにマッピングします。すべてのツールはクライアントサイドで動作し、データはサーバーに送信されません。
カラーツールとは？
カラーツールは、開発者やデザイナーがデジタルカラー値を扱うためのユーティリティです。画面上のすべての色は数値として保存されています：RGB（赤、緑、青）の3チャンネル、CSSの省略形としての16進数トリプレット、またはHSLの角度による色相・彩度・明度として。これらの表現間を手作業で変換するのは時間がかかりエラーが発生しやすく、アルファ透明度やOKLCHのような新しいモデルも考慮する必要がある場合はなおさらです。
フォーマット変換の他にも、カラー作業にはアクセシビリティテスト、パレット作成、グラデーション作成が含まれます。WCAG 2.1は目視で確認しにくい最小コントラスト比（AA通常テストで4.5:1、AAAで7:1）を定義しています。調和の取れたカラースキームを生成するには、HSLカラーホイール上での正確な角度計算が必要です。CSSグラデーションには方向、カラーストップ、フォールバック値の正しい構文が必要です。数十のトークンを持つデザインシステム全体でこれらを手作業で行うのはすぐに面倒になります。
カラーツールはこれらの作業を自動化します。あるフォーマットでカラーを受け取り、計算を行い、変換された値、合否のアクセシビリティ判定、調和の取れたスウォッチ群、またはCSSコードスニペットといった必要な結果を返します。ツールがブラウザで動作するため、機密性の高いデザイントークンをサードパーティサービスにアップロードせずに済みます。
ToolDeckのカラーツールを使う理由
ToolDeckのカラーツールはすべてブラウザ内で動作します。カラー値がマシンから外に出ることはなく、アカウントも不要で、拡張機能やデスクトップソフトウェアをインストールせずに各ツールが即座に読み込まれます。
🎨1ステップでフォーマット変換
HEXコードを貼り付けるだけで、RGB、HSL、HSVの値を同時に取得できます。複数のコンバーターを連鎖させたり、変換式を覚えたりする必要はありません。
🔒デザイントークンをプライベートに保つ
すべての処理はクライアントサイドで行われます。ブランドカラー、未公開のパレット決定、社内デザインシステムの値はデバイス上に留まります。
♿アクセシビリティを即座にテスト
任意の前景色・背景色のペアをWCAG 2.1のAAおよびAAAしきい値に対して、通常テキストと大きなテキストの両方でチェックできます。合否ラベルだけでなく、正確なコントラスト比を取得できます。
⚡本番環境対応の出力をコピー
すべてのツールは、CSS、Tailwindの設定、またはデザインツールの入力フィールドに直接貼り付けられる値を出力します。再フォーマットは不要です。
カラーツールのユースケース
ToolDeckのカラーツールが時間を節約できる6つの一般的なシナリオを紹介します。
デザインシステムのメンテナンス
デザインシステムを更新する際、デザイナーからHEXでカラーを受け取るが、CSSカスタムプロパティにはHSLが必要という場面がよくあります。
カラーコンバーターはフォーマット間を変換するので、手作業の計算なしにトークンファイルを更新できます。
アクセシビリティ監査
WCAGコンプライアンス監査では、すべてのテキスト・背景の組み合わせが最小コントラスト比を満たす必要があります。
カラーコントラストチェッカーは通常テキストと大きなテキストの両方について、正確な比率とAA/AAAの合否状況を表示します。
ブランドパレットの探索
単一のブランドカラーからアクセントカラーやニュートラルバリアントが必要な場合、
カラーパレットジェネレーターが補色・類似色・三色配色・四色配色のハーモニーを計算するので、パレットを決定する前にオプションを評価できます。
CSSバックグラウンドスタイリング
グラデーションを使ったヒーローセクションやカード背景を作成するには、角度、カラーストップ、ベンダープレフィックスの正しいCSS構文が必要です。
CSSグラデーションジェネレーターを使えばグラデーションを視覚的に構築してコードをコピーできます。
Tailwindへの移行
プロジェクトをTailwind CSSに移行する際、既存のHEXまたはRGB値を最も近いTailwindユーティリティクラスにマッピングする必要があります。
Tailwindカラーファインダーは最も近い一致を見つけ、差分を表示するので近似が許容できるか判断できます。
コードレビューとドキュメント
コードレビュー中、#708090のような生のHEX値は一目では意味がわかりません。
カラーネームファインダーはそれをSlateGrayと識別し、レビューとドキュメントをより読みやすくします。
CSSカラーモデルリファレンス
CSSは複数のカラーモデルをサポートしています。以下の表は最も一般的な6つのフォーマット、その構文、および典型的なユースケースをまとめています。これらはすべてToolDeckのカラーコンバーターでサポートされています。
| モデル | CSS構文 | チャンネル | 値の範囲 | 典型的な用途 |
|---|
| HEX | #rrggbb | 赤、緑、青 | チャンネルあたり 00–ff | CSSで最も一般的、デザインハンドオフ、ブランドガイドライン |
| RGB | rgb(r, g, b) | 赤、緑、青 | チャンネルあたり 0–255 | JavaScript canvas API、算出スタイル、画像処理 |
| HSL | hsl(h, s%, l%) | 色相、彩度、明度 | 0–360 / 0–100% / 0–100% | デザイントークン、テーマ生成、プログラマティックなシェードバリアント |
| HSV | N/A (CSSには存在しない) | 色相、彩度、明度（Value） | 0–360 / 0–100% / 0–100% | カラーピッカー（Photoshop、Figma）、ハードウェアカラーキャリブレーション |
| OKLCH | oklch(L C H) | 明度、彩度、色相 | 0–1 / 0–0.4 / 0–360 | 知覚的に均一なパレット（CSS Color Level 4 仕様） |
| Named | 例：slategray | 内部でRGBにマッピング | 148種類の定義済み名前 | プロトタイピング、可読性の高いコード、クイックデモ |
CSS Color Level 4（W3C）はlab()、lch()、color()関数も定義しています。HEXとRGBはブラウザとデザインツール全体で最も広くサポートされています。
適切なカラーツールの選び方
各カラーツールは異なる問題を解決します。以下のガイドを使って、目的に合ったツールを見つけてください。
- 1
必要な操作 HEX、RGB、HSL、またはHSVフォーマット間でカラーを変換する → カラーコンバーター - 2
必要な操作 テキスト・背景カラーのペアがWCAGアクセシビリティ基準を満たしているか確認する → カラーコントラストチェッカー - 3
必要な操作 単一のベースカラーから調和の取れたカラーセットを生成する → カラーパレットジェネレーター - 4
必要な操作 線形または放射状のCSSグラデーションを作成してコードを取得する → CSSグラデーションジェネレーター - 5
必要な操作 指定したカラー値に最も近い人間が読めるCSS名を見つける → カラーネームファインダー - 6
必要な操作 任意のカラーを最も近いTailwind CSSユーティリティクラスにマッピングする → Tailwindカラーファインダー
6つのツールすべてが複数のフォーマットの入力を受け付けます。カラーのフォーマットが不明な場合は、HEX、RGB、HSL、HSVの表記を自動検出するカラーコンバーターから始めてください。
よくある質問
HEXとRGBカラーフォーマットの違いは何ですか？
HEXとRGBは同じカラースペースを表しています。#ff6600のようなHEXコードは3つのRGBチャンネルの16進数エンコーディングです：ff = 255（赤）、66 = 102（緑）、00 = 0（青）。違いは表記法のみです。HEXはCSSスタイルシートでよりコンパクトですが、RGBは各チャンネルがすでに10進数の整数であるため、プログラム的に操作しやすいです。
HEXやRGBの代わりにHSLを使うべきはいつですか？
HSLは色相（カラー自体）を彩度と明度から分離します。これによりシェードバリアントの作成が容易になります：色相を固定したまま、暗いシェードには明度を下げ、明るいティントには上げます。単一のベースカラーからライト・ダークテーマを生成するデザインシステムがこの理由でトークンをHSLに保存することが多いです。CSSカスタムプロパティも個々のチャンネルを上書きできるためHSLとの相性が良いです。
WCAG 2.1はテキストにどのコントラスト比を要求していますか？
WCAG 2.1レベルAAは、通常テキスト（18pt未満または14pt太字未満）に最小コントラスト比4.5:1、大きなテキスト（18pt以上または14pt太字以上）に3:1を要求しています。レベルAAAはそれらのしきい値をそれぞれ7:1と4.5:1に引き上げます。これらの比率は、WCAG 2.1達成基準1.4.3で定義された式を使用して前景色と背景色の相対輝度から計算されます。
CSSはいくつの命名カラーをサポートしていますか？
CSSはSVG 1.1とCSS3カラー仕様から継承した148種類の命名カラーを定義しています。red、blue、whiteのような一般的な名前から、MediumSlateBlue、PapayaWhip、LavenderBlushのような固有の名前まで多岐にわたります。命名カラーは固定のRGB値にマッピングされます。CSS Color Level 4仕様は同じ148種類の名前を保持し、新しい名前は追加しません。ブラウザはキーワードtransparent（rgba(0,0,0,0)と同等）も認識します。
今日のCSSでOKLCHカラーを使用できますか？
はい。oklch()関数はChrome 111+、Firefox 113+、Safari 15.4+でサポートされています。OKLCHはW3Cが公開したCSS Color Level 4仕様の一部です。HSLと比較した主な利点は知覚的均一性です：OKLCHで同じ明度値を持つ2つのカラーは人間の目には実際に同じ明るさに見えますが、これはHSLには当てはまりません。そのためOKLCHは一貫した知覚的輝度を持つアクセシブルなパレットを生成するのに適した選択肢です。
HSLとHSVの違いは何ですか？
HSLとHSVはどちらも色相を角度とする円柱形の表現を使用していますが、明るさの定義が異なります。HSLでは明度50%が純粋なカラーで、0%が黒、100%が白です。HSVでは明度（Value）100%が純粋なカラーで、0%が黒です。HSVには彩度を下げることなく白に達する組み込みの方法がありません。デザイナーやカラーピッカー（Photoshop、Figma）は通常HSVを使用しますが、CSSはHSLをネイティブに使用します。
任意のHEXカラーのTailwindクラスを見つけるにはどうすればよいですか？
Tailwind CSSには約220のカラークラス（22の色相 × 各10シェード＋黒、白、透明）の固定パレットが含まれています。指定したHEX値に最も近いクラスを見つけるには、カラーとすべてのTailwindスウォッチの間の知覚的カラースペース（CIELABまたはOKLCHなど）でのユークリッド距離を計算します。ToolDeckのTailwindカラーファインダーはこれを自動的に行い、最も近い一致とカラーの差分を表示するので、近似が十分かどうか判断できます。
機密性の高いブランドカラーをオンラインツールに貼り付けても安全ですか？
ツールによります。入力をサーバーに送信するツールは、それらの値をネットワークトラフィックとサーバーログに露出させます。ToolDeckのカラーツールはクライアントサイドのJavaScriptを使用してすべてブラウザ内で動作します。HTTPリクエストがカラーデータをバックエンドに送信することはありません。ツール使用中にブラウザのNetworkタブを開くことで確認できます。最大限の注意を期す場合は、最初のページ読み込み後にオフラインでツールを使用することもできます。