カラーパレットジェネレーター
ブラウザを離れずUI、ブランディング、デザインシステム向けの調和パレットを作成。ベースHEX色と調和（補色、類似色、トライアド、テトラード、split-complementary、モノクロ、完全ランダム）を選び、HEXリスト、カンマ区切りスウォッチ、またはCSSカスタムプロパティをコピー。CSSグラデーションジェネレーターやHEX to…
カラーパレットジェネレーターについて
ブラウザを離れずUI、ブランディング、デザインシステム向けの調和パレットを作成。ベースHEX色と調和（補色、類似色、トライアド、テトラード、split-complementary、モノクロ、完全ランダム）を選び、HEXリスト、カンマ区切りスウォッチ、またはCSSカスタムプロパティをコピー。CSSグラデーションジェネレーターやHEX to RGBコンバーターと組み合わせ。調和ルール初めてならColor Harmony Types Explainedを参照。何もアップロードされません。
カラーパレットジェネレーターの使い方
- 調和（類似色、補色、トライアドなど）またはRandom（無関係スウォッチ）を選択。
- ピッカーまたはHEXフィールドでベース色、またはShuffleでランダムベース。
- random、analogous、monochromaticでは色数（3-8）を調整。
- 生成をクリック、各スウォッチのHEX/RGB/HSLを確認、HEXリストまたはCSS変数をコピー。すべてデバイス上。
カラーパレットジェネレーターの例
類似色UIアクセント
ベース #3b82f6、Analogous、5色 - 隣接ブルーとティールでソフトUIアクセント。
補色コントラスト
ベース #ef4444、Complementary - 赤と反対色で高コントラストCTA。
トライアドブランドセット
ベース #22c55e、Triadic - 等間隔3色相で活気あるブランドトリオ。
モノクロームスケール
ベース #0f172a、Monochromatic、6色 - 背景とテキスト向け明→暗スレートスケール。
一般的な使用例
- ブランド・マーケティングカラーシステムを構築
- UIアクセントとニュートラルスケールをプロトタイプ
- デザイントークン用CSSカスタムプロパティをエクスポート
- 補色・トライアドコントラストを探索
- インスピレーション用ランダムムードボードを生成
関連ガイド
カラーパレットジェネレーターに関するよくある質問
- どのカラー調和に対応？
- Random、complementary (2)、analogous (3-8)、triadic (3)、tetradic (4)、split-complementary (3)、monochromatic (3-8)。固定調和は高い目標数を設定しても自然なスウォッチ数を返します。
- どの形式をコピーできる？
- 各スウォッチにHEX、RGB、HSL。Copy HEX list（1行1つ）、Copy HEX row（カンマ区切り）、Copy CSS（--color-1形式の:rootブロック）。
- ブランド色から始められる？
- はい。#3b82f6のようなHEXを貼るかカラーピッカー。Shuffleは選んだ調和を保ち新しいランダムベース。
- WCAGコントラストをチェック？
- いいえ。調和パレットとエクスポート形式に焦点。AA/AAAテキスト検証にはコントラストチェッカーと組み合わせ。
- パレットはデバイスから離れる？
- いいえ。カラーパレットジェネレーターは完全にブラウザ内。色はアップロード・保存されません。
関連ツール
CSSグラデーションジェネレーター
ライブプレビュー付きでCSS linear、radial、conicグラデーションを構築。カラーストップを選び、background CSSをコピーしてスタイルシートに貼り付け。ブラウザで動作。
HEX と RGB 変換
HEX と RGB（双方向）、HSL、CMYK、ティント・シェード、WCAG コントラスト、CSS トークンスニペット - 無料オンラインカラー変換。
RGB と HSL 変換
RGB と HSL を即相互変換。ライブスウォッチとコピー可能な rgb()/hsl() CSS の無料オンラインカラー変換。
favicon ジェネレーター
ブラウザ内無料 favicon ジェネレーター。ロゴをアップロードし 16、32、48、180、192、512 の PNG を取得、ZIP ダウンロード。アップロードなし。
乱数ジェネレーター
ブラウザで無料乱数ジェネレーター。min/max、個数、オプションで一意抽選や小数を設定し結果をコピー。crypto乱数使用 - 何もアップロードされません。