メインコンテンツへスキップ
Awesome Toolkit
カラーパレット

カラーパレットを作成する

1色から始めて、相性のいい配色パレットを作成。補色、類似色、トライアド、テトラード、分裂補色、モノクロマティックから選べます。

基本色
配色
パレット
Aa 2.4Aa 8.8✓
Aa 4.5Aa 4.7✓
Aa 3.7Aa 5.7✓

スペースキー：新しいパレット（ロックした色は残ります）

CSS変数
:root {
  --color-1: #63ADF1;
  --color-2: #6366F1;
  --color-3: #A763F1;
}
くわしく知る

カラーパレット作成のすべて

1色からパレットを作る

ほとんどのパレットは、すでにある色から始まります。ロゴ、ブランドのガイドライン、商品写真などです。その色を選んで配色を決めれば、ほかの色が色相環上でまわりに計算されます。1色ずつコピーするか、パレット全体をCSS変数として書き出せば、スタイルシートやデザイントークンのファイルにすぐ使えます。

パレットが役立つ場面

既存の1色からブランドやUIの配色を作る、ロゴに合うアクセントカラーを探す、グラフやイラストの色を決める、ボタン・背景・枠線用に1色の明るい色から暗い色までの段階を作る、といった場面で役立ちます。

配色の計算方法

配色は、選んだ基本色をもとにHSLの色相環上で計算します。補色（180°）、類似色（±30°）、トライアド（120°）、テトラード（90°）、分裂補色（150°／210°）、モノクロマティック（明度を均等に5段階）です。各色見本にはHEX・HSL・RGBが表示され、クリックでコピーできます。パレットはCSSのカスタムプロパティとしてもコピー・ダウンロードできます。

使い方

カラーパレットを作る方法

  1. 基本色を選ぶ

    カラーピッカーを使うか、HEXの値を入力して、出発点となる色を決めます。

  2. 配色を選ぶ

    補色、類似色、トライアド、テトラード、分裂補色、モノクロマティックから配色のモードを選びます。

  3. コピーして使う

    色見本をクリックしてHEXの値をコピーするか、スタイルシート用にCSS変数のブロックをコピーします。

活用ガイド

コツとガイド

調和のとれたデザインに

配色のハーモニーは、人の目が自然にバランスよく感じる、色相環上の数学的な関係に従っているので、見て心地よい組み合わせになります。

落ち着いたまとまりのあるデザインには類似色を、コントラストの強い鮮やかなレイアウトには補色やトライアドを。モノクロマティックは、上品でミニマルなUIにぴったりです。

プロのコツ

プライベート

色の計算はすべてブラウザ内で行われ、データがサーバーに送られることはありません。

選んだ色が追跡・保存されることはありません。タブを閉じれば、すべて消えます。

プライバシー
よくある質問

よくある質問

カラーパレットについて知っておきたいこと