UI・プロダクトデザイン
画面横断で一貫したプライマリ・セカンダリ・サーフェス色を構築。
無料 · 登録不要色彩理論ハーモニーCSS · Tailwind · JSONブラウザ内で動作
ここでパレットを作る理由
6つのハーモニーエンジン
補色・類似色・トライアド・テトラード・モノクロ・スプリット補色 — 古典的な色彩理論に基づく。
ロックして調整
気に入った色をロックし、残りを再生成してしっくりくるまで繰り返します。
開発向けエクスポート
CSS変数、Tailwindトークン、SCSSマップ、JSONをコピーしてデザインシステムへ。
WCAGコントラストチェック
パレットの文字／背景ペアを検証し、読みやすくアクセシブルなUIに。
即時フィードバック
スウォッチ・UIモック・コードがライブ更新。アップロード・待ち時間・アカウント不要。
無料・無制限
個人・商用プロジェクト向け無制限パレット。透かしなし。
カラーパレットの作り方
- 1
ベースカラーを選ぶ
カラーピッカーかHEXを入力。すべてのハーモニー計算の起点になります。
- 2
ハーモニールールを選ぶ
補色・類似色・トライアドなどを切り替え、ムードを探索します。
- 3
ロック・ランダム・調整
残す色をロックし、再生成やSpaceで新ベースを試し、ブランドに合うまで調整。
- 4
スタックへエクスポート
HEX/RGB/HSLをコピーするか、CSS・Tailwind・SCSS・JSONをデザインと開発向けに出力。
1つのHEXからデザインシステム種へ
デザイナーと開発者が実際に出荷するハーモニー、コントラスト、エクスポート形式。
01
なぜハーモニーがランダムスウォッチに勝つか
ランダム色は関係を共有しにくい。ハーモニールールは色相環に意図的に配置 — エネルギーは反対、落ち着きは隣接、活気は等間隔 — インターフェースが意図的に見えます。
02
プロダクトUIの補色 vs 類似色
補色はCTAを背景から際立たせます。類似色はダッシュボードや長文に適します。同じベースでルールを切り替え、ムードを即比較。
03
モダンスタック向けエクスポート経路
任意フレームワークのCSS変数。設定のTailwindマップ。SassデザインシステムのSCSSマップ。ツールとドキュメント用JSON。
04
アクセシビリティを第一級機能に
本文がAAを満たさなければ美しさだけでは不十分。ピッカーを開いたままコントラストを確認し、アクセシビリティレビュー後の高額な作り直しを防ぎます。
カラーパレットジェネレーターの利用者
ブランドキットからプロダクトUIまで — バランスの取れた配色は確かな色彩理論から始まります。
ブランドアイデンティティ
ガイドライン確定前に補色やモノクロの体系を探索。
フロントエンド開発
CSS変数やTailwindトークンを出力し、コードがデザインに追従。
マーケ・ソーシャル
広告・デッキ・LPでブランドに合うキャンペーンパレットを生成。
データ可視化
より明確なチャート向けに連続モノクロやカテゴリトライアドを選択。
色彩理論の学習
ハーモニールールが1つのベースをプロのマルチスウォッチに変える様子を確認。
本当に役立つパレットのコツ
「きれいなスウォッチ」と使えるデザインシステムを分ける習慣。
- 1
ブランド／プロダクト制約から始める
プライマリHEXがあるならロックして周囲を生成。5つ目のランダムアクセントを作らない。
- 2
コントラストを早めに確認
AAを満たさない美しいペアはボタンと本文を壊します。出荷前にサーフェス上の文字をテスト。
- 3
役割は少なく明確に
色相だけでなく役割（primary, accent, muted, danger）で命名。
- 4
一度エクスポート、どこでも再利用
CSS変数やTailwindトークンを単一の真実源に置き、マーケとプロダクトのズレを防ぐ。
FAQ
よくある質問
カラーパレットジェネレーターとは？
開始色やルールから調和した色セットを作るツールです。本ツールはUI・ブランディング・デザインシステム向けに色彩理論ハーモニーを適用します。
対応するハーモニールールは？
補色、類似色、トライアド、テトラード（長方形）、モノクロマティック、スプリット補色 — デザイナーが最も使う6つ。
気に入った色をロックできますか？
はい。任意のスウォッチをロックし、解除分を再生成するかベースをランダム化。ロックした色は維持されます。
コード向けにどうエクスポートしますか？
エクスポートでCSSカスタムプロパティ、Tailwindマップ、SCSSマップ、JSONをコピー。スウォッチごとにHEX・RGB・HSLも可能。
WCAGコントラストとは？なぜ確認？
WCAGはアクセシビリティのための文字と背景の最小コントラストを定めます。チェッカーはパレットのペアを測り、UIテキストの可読性を保ちます。
商用プロジェクトでも無料ですか？
はい。無制限パレット、アカウント・透かしなし。生成色とエクスポートコードは商用利用可。
データはブラウザ外に出ますか？
いいえ。色計算・コントラスト・クリップボード出力はクライアント側。サーバーへはアップロードされません。
パレットあたりの色数は？
各ハーモニーは5つの協調スウォッチを返します — プライマリ・アクセント・サーフェスに十分で、システムを過負荷にしません。
色彩理論に基づくプロのパレット
BosConvertProカラーパレットジェネレーターは、実績あるハーモニールールで1つのベースをバランスの取れたマルチスウォッチに変換します。デザイナーと開発者はお気に入りをロックし、コントラストを検証し、UIをプレビューし、本番用トークンを出力 — ブラウザ内、無料、登録不要。
- 6つの色彩ハーモニーモード
- 他を再生成しながら色をロック
- WCAGコントラスト比チェッカー
- CSS・Tailwind・SCSS・JSONエクスポート
- HEX・RGB・HSLコピー形式
- ブラウザで無料・無制限利用