グラデーションCSS生成
開始色と終了色、角度を指定するだけで、そのままコピーして使えるCSSのグラデーションコードを自動生成します。
画像からのカラーパレット抽出、WCAGコントラスト比判定、HEX/RGB/HSL/CMYK変換、色覚多様性シミュレーション、トーン展開、グラデーションCSS生成、ダークモード配色変換まで、配色に関わる7種のツールを無料で使えます。
画像を選択
画像はサーバーに送信されません。ブラウザ内で処理されます。
抽出結果
スウォッチまたはHEXコードのクリックでコピーできます。
色を入力
カラーピッカーまたはHEXコードで前景色・背景色を指定してください。
WCAG判定
通常文字と大きい文字（18pt以上または14pt太字）で基準が異なります。
通常文字（AA=4.5 / AAA=7）
大きい文字（AA=3 / AAA=4.5）
プレビュー
見出しのサンプルです
この配色での本文テキストの見え方を確認できます。
色を入力
HEXコードまたはカラーピッカーで色を指定すると、他形式に自動変換されます。
変換結果
| HEX | - | |
|---|---|---|
| RGB | - | |
| HSL | - | |
| CMYK | - |
※ CMYKは簡易変換であり、印刷用のICCプロファイルに基づく変換ではありません。実際の印刷結果とは異なる場合があります。
色を入力
HEXコードまたはカラーピッカーで色を指定すると、色覚タイプ別の見え方をシミュレーションします。
シミュレーション結果
| 通常（オリジナル） | - |
|---|---|
| P型（1型・赤色弱/赤色盲） | - |
| D型（2型・緑色弱/緑色盲） | - |
| T型（3型・青色弱/青色盲） | - |
※ Brettel/Viénot(1999)の簡易全色域変換モデルによる近似シミュレーションです。実際の見え方には個人差があります。
ブランドカラーを入力
HEXコードを1つ指定すると、明度を9段階に振ったトーン展開を生成します（色相・彩度は維持されます）。
トーン展開結果
スウォッチをクリックするとHEXコードをコピーできます。
条件を入力
プレビュー
CSSコード
ライトモードの配色を入力
背景色と文字色を指定すると、ダークモード用の配色を提案します。
ダークモード配色（提案）
| 背景色 | - | |
|---|---|---|
| 文字色 | - |
WCAG判定
通常文字（AA=4.5 / AAA=7）基準での判定です。
通常文字（AA=4.5 / AAA=7）
プレビュー
見出しのサンプルです
このダークモード配色での本文テキストの見え方を確認できます。