カラー変換
HEX・RGB・HSL・OKLCH変換＋ピッカー・履歴。
▦
カラーパレット生成
ベース色から調和のとれたパレットを生成。
ベース
#3b82f6
白比 3.68:1 · 不適合黒比 5.71:1 · AA
類似色（-60°）
#3bf6af
白比 1.4:1 · 不適合黒比 14.99:1 · AA
類似色（-30°）
#3be0f6
白比 1.59:1 · 不適合黒比 13.18:1 · AA
類似色（+30°）
#513bf6
白比 6.35:1 · AA黒比 3.31:1 · 不適合
類似色（+60°）
#af3bf6
白比 4.39:1 · AA近い黒比 4.78:1 · AA
:root {
--color-base: #3b82f6;
--color-analogous-1: #3bf6af;
--color-analogous-2: #3be0f6;
--color-analogous-3: #513bf6;
--color-analogous-4: #af3bf6;
}配色は色相環上でベース色を回転させて生成します。コントラスト比は白・黒背景に対する参考値で、実際のUIでは文字色と背景色の組み合わせを別途確認してください。
カラーパレット生成について
カラーパレット生成とは、色相環の上でベース色を回転させ、調和の取れた複数色を自動で導き出すツールです。多くの配色ツールはスウォッチを並べて終わりですが、toco.toolsはそこにコピペで使えるコード出力とWCAGコントラスト表示を加えています。CSS変数・Tailwindの `theme.extend.colors` 断片・SCSS変数・JSON・HEX一覧のいずれかを選び、生成したパレットをそのままプロジェクトに貼り付けられます。
配色モードにはそれぞれ得意な用途があります。補色（コンプリメンタリー）はベース色の反対側（+180°）の1色を組み合わせるモードで、強いコントラストが欲しいCTAボタンやアクセントカラーに向いています。類似色（アナログ）は隣接する色相（±30°・±60°）をまとめて使うモードで、自然にまとまりのある配色になるためブランドカラーの階調や背景のグラデーションに向いています。トライアド（三色配色）は色相環を三等分（+120°・+240°）した3色で、補色より穏やかながら十分な変化があり、イラストやアイコンセットの配色に使われます。このほかテトラード（四色）・スプリット補色（補色の両隣）・モノクロマティック（明度のみ変化）も選べます。
各スウォッチには白背景・黒背景に対するコントラスト比とWCAG判定を表示しています。ただしこれは参考値で、実際にテキストとして使う背景色との組み合わせは別途 contrast-checker で確認してください。自動生成された配色はあくまで出発点であり、ブランドガイドラインやアクセシビリティ要件に合わせて手動調整することを前提にしています。すべての計算はブラウザ内で完結し、入力した色がサーバーに送信されることはありません。
使い方
- ベース色をHEX・RGB・HSLで入力（またはカラーピッカーで選択）
- 補色・類似色・トライアドなど配色モードを選ぶ
- スウォッチでコントラストを確認し、CSS/Tailwind/SCSS/JSONをコピー
よくある質問（FAQ）
カラーパレット生成とは何ですか？
1つのベース色から、色相環上での回転によって調和の取れた複数色を自動生成するツールです。手動で似合う色を探す手間を省けます。
補色・類似色・トライアドの違いは何ですか？
補色はベース色の反対側（+180°）の1色で強いコントラストを作ります。類似色は隣接する色相（±30°・±60°）をまとめて使い、自然にまとまった配色になります。トライアドは色相環を3等分（+120°・+240°）した3色で、補色ほど強くないが変化のある配色です。用途に応じて、アクセント重視なら補色、統一感重視なら類似色、賑やかさが欲しいならトライアドを選ぶとよいでしょう。
Tailwindの設定にそのまま貼り付けられますか？
はい。Tailwindタブでは `theme.extend.colors` にそのまま貼り付けられるオブジェクト断片を出力します。CSS変数・SCSS変数・JSON・HEX一覧の出力も選べます。
表示されているコントラスト比は何のためですか？
各色を白背景・黒背景の上に置いた場合のWCAGコントラスト比です。文字色として使えるかどうかの目安になりますが、実際に使う背景色との組み合わせはcontrast-checkerで個別に確認してください。
入力した色は外部に送信されますか？
いいえ。パレット生成・コード整形はすべてブラウザ内のJavaScriptで完結し、toco.toolsのサーバーへは送信されません。