ベースカラーを1色選ぶだけで、系統別の配色パレットを自動生成します。カラーコードはクリックでコピー、サンプルUIで配色の見え方も確認できます。
スウォッチ/コードをタップでコピー、鍵アイコンでロック、◀▶で並び替え。Spaceキー(またはシャッフルボタン)でロック中の色以外を再生成します
この配色をボタンや背景に適用した場合の見え方のサンプルです。
Adobe Swatch Exchange(.ase)形式で書き出します。Photoshop・Illustratorのスウォッチパネルに読み込めます。
色相環でベースカラーに近い色相(本ツールでは±30°刻み)を組み合わせる配色です。色の系統がまとまっているため、統一感があり落ち着いた印象を作りやすいのが特徴です。
色相環でベースカラーの反対側(色相+180°)にある色を組み合わせる配色です。コントラストが強く出るため、目を引きたい箇所や強調したい要素に向いています。
色相環を均等に3分割した位置(±120°)の色を組み合わせる配色です。類似色よりメリハリがありつつ、補色よりはバランスの取れた、賑やかで明るい印象になりやすい配色です。
色相と彩度を固定し、明度(明るさ)だけを変化させる配色です。色相を変えないため最もまとまりやすく、同じトーンで強弱をつけたい場合に向いています。
Webサイトやアプリのデザイン、プレゼン資料、名刺・チラシなどの配色決めに使えます。CSS変数として一括コピーできるため、そのままコーディングに利用したり、ASE形式で書き出してPhotoshop・Illustratorのスウォッチに読み込むといった使い方もできます。