デザイン
配色パレット生成
無料・日本語・ローカル動作（Windows / macOS）
ベースカラーから調和パレットを生成し、WCAG基準のコントラストを検証します。
今すぐ使えます
このツールを無料でダウンロード
お使いのOSを選ぶだけで始められます。処理はPCの中で行い、ツール本体に広告は入りません。
- 無料で使える
- ファイルはPC内で処理
- ツール本体に広告なし
- 元ファイルを残して保存
すべてのバージョン・SHA-256Windows 版は準備中
macOS で開けない・「開発元を確認できません」と表示されるとき
macOS Sequoia（15）以降は、初回起動時に次の操作が必要です。Apple の公証前であることが理由で、安全性に問題はありません（ファイルは外部に送信されません）。
- アプリを「アプリケーション」フォルダに移動します。
- アプリをダブルクリックし、警告が出たら「完了」を押します（「ゴミ箱に入れる」は選ばないでください）。
- 「システム設定」→「プライバシーとセキュリティ」を開き、下部の「セキュリティ」にある「"（アプリ名）" は…ブロックされました」の右の「このまま開く」をクリックします。
- Touch ID またはパスワードで認証し、確認ダイアログで「このまま開く」を押します。次回からは通常どおり起動できます。
macOS Sonoma（14）以前では、アプリを右クリック →「開く」→「開く」でも起動できます。
うまくいかないときは、ターミナルで xattr -dr com.apple.quarantine と入力し（末尾に半角スペース）、続けてアプリのアイコンをターミナルにドラッグ＆ドロップして Enter を押すと解除できます。
ベースカラーを1つ指定するだけで、補色・類似色・トライアドの調和パレットを生成する配色ツールです。生成した各色について、背景と文字のコントラスト比をWCAG 2.x の式で計算し、AA/AAAの合否を通常テキストと大きいテキストの両方で判定します。アクセシブルな配色をその場で確認でき、計算はすべてローカルで完結します。
こんな悩みを解決します
- —ブランドカラーから配色のバリエーションを素早く作りたいとき
- —文字と背景のコントラストがアクセシビリティ基準を満たすか確認したいとき
- —UIデザインの配色をWCAG基準で検証しながら決めたいとき
主な機能
- ベースカラーから補色（180°）パレットを生成
- 類似色（±30°）・トライアド（120°ずつ）のパレット生成
- HEX・RGB・HSL の相互変換
- WCAG準拠のコントラスト比計算（1〜21:1）
- 通常テキスト/大きいテキストのAA・AAA合否判定
- 背景に応じた読みやすい文字色（黒/白）の自動提案
使い方
- 01ファイルをドラッグ&ドロップ、またはクリックで選択します。
- 02必要な設定を選び、実行ボタンを押します。
- 03別フォルダに結果を出力。元のファイルは変更しません。
よくある質問
通常テキストはAAで4.5:1以上、AAAで7:1以上、大きいテキストはAAで3:1以上、AAAで4.5:1以上が必要です。本ツールはこれらを自動判定します。
関連ツール
デザイン
カラーピッカー・カラーコード変換
画面上の色を取得し、HEXやRGB、HSLを相互変換してパレット保存できます。
WindowsmacOS詳細・ダウンロード →
デザイン
ファビコン・アプリアイコン一括生成
1枚の画像からfavicon.icoや各サイズPNGを一括生成しタグも出力します。
WindowsmacOS詳細・ダウンロード →
デザイン
画像カラーパレット抽出
写真から主要色を抽出してパレット化し、配色の参考に使えます。
WindowsmacOS詳細・ダウンロード →
デザイン
CSSグラデーションジェネレータ
グラデーションをGUIで作成し、CSSコードとして出力できます。
WindowsmacOS詳細・ダウンロード →