無料のカラーパレット生成ツール（HEX対応）
HEXコードをもとに、カラーパレットを無料で作成できます。色の組み合わせ、明暗のバリエーション、用途別の6色を確認し、CSS変数をコピーしてサイト制作に使えます。
プリセットカラー
基本色（HEX）
#2563EB
色の組み合わせ
メインカラー
主な操作に使う色
#2563EBサブカラー
補助的な要素に使う色
#6C59D5アクセント
目立たせたい部分に使う色
#E3AA2D背景
ページの背景に使う色
#F7F7F8サーフェス
カードの背景に使う色
#E8E9EEテキスト
本文の文字に使う色
#1B212C:root {
--color-primary: #2563EB;
--color-secondary: #6C59D5;
--color-accent: #E3AA2D;
--color-background: #F7F7F8;
--color-surface: #E8E9EE;
--color-text: #1B212C;
--color-primary-50: #F4F6FB;
--color-primary-100: #D1DBF1;
--color-primary-200: #ABBFEB;
--color-primary-300: #82A2E7;
--color-primary-400: #5583E8;
--color-primary-500: #2563EB;
--color-primary-600: #124BC7;
--color-primary-700: #0D3794;
--color-primary-800: #082462;
--color-primary-900: #04112F;
}カラーパレット生成ツールとは何ですか？
1つのHEXコードをもとにカラーパレットを作成する、無料の配色ジェネレーターです。類似色・補色・トライアド配色、明暗のバリエーション、用途別の6色を生成し、CSS変数をコピーできます。
HEXコードからカラーパレットを作成する方法
基本色を選び、生成されたカラーパレットを確認して、必要な色コードをコピーします。HEXコードの入力、カラーピッカー、ランダムな色のいずれかで始められます。
- ステップ 1
基本色を選ぶ
HEXコードを入力するか、カラーピッカーや「ランダムな色」を使います。コードを手入力したら「パレットを生成」をクリックします。
- ステップ 2
配色を見比べる
基本色とともに、類似色・補色・トライアド配色を確認します。組み合わせを見比べながら、サイトやブランドに使う配色を検討します。
- ステップ 3
明暗と用途を確認する
50〜900の明暗のバリエーションと、用途別の6色を確認します。UIの各部分に使う色を、明るさや役割に合わせて選びます。
- ステップ 4
色とCSS変数をコピーする
個別の色コードや、生成されたCSS変数をコピーします。スタイルシートに貼り付けて、サイトやデザインシステムで使えます。
カラーパレットの主な活用シーン
作成したカラーパレットは、サイトの配色や再利用するスタイルの設計に活用できます。ブランドの印象をそろえる、6つの使い方を紹介します。
ページの背景と枠線
明るい色から暗い色まで見比べて、ページやカードの背景、枠線に使う色を選べます。サイト内の各要素に合う配色を検討できます。
ホバー時の配色
ボタンやリンクにマウスを重ねたときの色を検討できます。使う色を決める前に、実際のUIで組み合わせを確認してください。
プロダクトのUI
メイン、サブ、アクセント、背景、サーフェス、テキストの6色を使い分けられます。プロダクトのUI全体で色の役割をそろえられます。
ブランドの配色
ブランドのメインカラーをもとに、類似色・補色・トライアド配色を比較できます。サイトに使う色を検討する際の参考になります。
デザインシステム
用途別の色と明暗のバリエーションを、コピーしてデザインシステムで使えます。再利用するコンポーネントの色を共通化できます。
CSSでの色の指定
生成したCSS変数をスタイルシートに貼り付けて、スタイル内で参照できます。サイト内の各要素に同じ色の定義を使えます。
この配色ジェネレーターを使う理由
色の組み合わせ、明暗のバリエーション、用途別の色を1つの画面で確認できます。必要な色コードやCSS変数をコピーして、サイト制作に活用できます。
基本色から広がる配色
HEXコードをもとに、類似色・補色・トライアド配色を生成できます。色の組み合わせを比較して、サイトに使う配色を検討できます。
明暗のバリエーション
50〜900の番号が付いた色を、明るいものから暗いものまで確認できます。背景や枠線など、UIの各部分に使う色を選べます。
用途別に整理した6色
メイン、サブ、アクセント、背景、サーフェス、テキストの6色を生成します。用途で使い分け、サイトの配色をそろえられます。
コピーできるCSS変数
用途別の色と明暗のバリエーションをCSS変数としてコピーできます。スタイルシートに貼り付けて、サイト内の各要素で使えます。
サイト制作に役立つ
無料ツール
よくある質問
1つのHEXコードをもとにカラーパレットを作成する、無料の配色ジェネレーターです。類似色・補色・トライアド配色、明暗のバリエーション、用途別の6色を生成し、CSS変数をコピーできます。
3桁または6桁の有効なHEXコードを入力し、「パレットを生成」をクリックします。カラーピッカーやプリセットカラー、「ランダムな色」も使えます。
50〜900の番号が付いた色を、背景や枠線、ホバー時の配色を考える際の出発点として使えます。文字のコントラストは、実際のデザインで確認してください。
CSS変数の欄で「コピー」をクリックし、スタイルシートに貼り付けます。CSSのルール内で変数を参照すると、用途別の色や明暗のバリエーションを使えます。