カラー・グラデーション最終更新: 2026-08-26
カラーパレット自動生成
クイック回答:Colour Palette Generator は、ブラウザ内で 100% 完結して高速動作する完全無料のオンライン便利ツールです。個人情報やデータが外部サーバーへ送信されることは一切ありません。
補色配色 (Complementary)
トリアディック配色 (Triadic)
類似色配色 (Analogous)
Tetradic Harmony
単色配色 (Monochromatic) (Tints & Shades)
使い方と手順 カラーパレット自動生成
1
カラーを選択・入力
カラーピッカーまたは HEX, RGB, HSL 値を入力します。
2
配色やグラデーションを調整
補色、類似色、またはグラデーションの方向・中間色を設定します。
3
CSS コードをコピー
Webサイトの実装にすぐ使える CSS コードをコピーします。
測定結果・指標の見方
コントラスト比 (Contrast Ratio)
文字と背景色の明度比（WCAG 2.1 アクセシビリティ基準 AA/AAA 判定）。
色空間 (Color Space)
HEX, RGB, HSL など色を数値で表現する規格方式。
主な特徴とメリット
HEX, RGB, HSL, HSV 間のリアルタイム双方向カラー変換
WCAG 2.1 AA/AAA 基準に準拠した文字コントラスト比の自動診断
美しい線形（Linear）・円形（Radial）CSS グラデーション生成
Web デザインに直結する CSS 変数およびカラーコードのワンクリックコピー
よくある質問 (FAQ)
カラーパレット自動生成 の仕組みとよくある質問
A:
WCAG 2.1 AA 基準では、通常の文字サイズで 4.5:1 以上、大きな文字で 3:1 以上が求められます。