カラーハーモニージェネレーター
カラー
HSL カラーホイールの周りで色相を回転させ、画家と UI デザイナーが手を伸ばす 7 つのパレットを生成する。16 進数を投入すると、マッチするトーンが得られる — ブランドカラーがあってチャートパレット、CTA 用のアクセント、または背景用の落ち着いたアナロガスストリップが必要なときに便利。数学は HSL で維持されるため、すべてのハーモニーがベースと同じ彩度と明度を保持する、ただしモノクロマティックは意図的に明度を上下にシフトする。
—
色相: 217°彩度: 91%明度: 60%
スウォッチ
#3B82F6
#F6AF3B
色相回転は HSL で行われる、これは高速だが知覚的にむら。知覚的パレットには OKLCH ピッカーを試す。
使い方
- ブランドまたはアンカーの 16 進数をベースフィールドに貼り付ける(またはカラーピッカーを使用する)。
- ユースケースに合うハーモニーを選ぶ — 落ち着いた背景にはアナロガス、鮮やかなコントラストにはトライアド。
- 個別の 16 進コードまたは全体のカンマ区切りリストをコピーする。
よくある質問
- チャートパレットにはどのハーモニーが安全?
- トライアドまたはスプリット補色 — 3 つほどの十分に間隔の開いた色相で、ほとんどの視聴者にとって区別可能なまま。アクセントペアを超えるものには純粋な補色(2 色のみ)を避ける。
- なぜモノクロマティックは 5 色を提供する?
- モノクロマティックは色相回転ではなく明度スケール。5 ステップ(−30%、−15%、ベース、+15%、+30%)が一般的な妥協 — ベースカラーを失わずに十分な変動。
関連ツール
色覚シミュレーター
8 種類の色覚異常(CVD)で画像がどう見えるかを再現。
カラー00
CSS Box Shadow ジェネレーター
複数レイヤーで CSS box-shadow を視覚的にデザイン — リアルタイムプレビュー + CSS / Tailwind 出力。
カラー00
カラーフォーマット変換
任意の色を HEX・RGB・HSL・HSV・OKLCH・CSS 変数で一括変換。
カラー00
CSS グラデーションジェネレーター
線形・放射状 CSS グラデーションを多段カラーストップでデザインし、コードをコピー。
カラー00
カラーパレット ジェネレーター
基準色から 6 種類のスキームで調和の取れたパレットを作成。
カラー00
カラーコントラスト チェッカー
文字/背景のコントラストを WCAG AA・AAA 基準でチェック。
カラー00