配色ジェネレーター（カラーパレット作成）
基準色をHEX・RGB・HSLで入力するか、カラーピッカーで選び、配色パターンを選んでください。HSLの色相環で色相を回転させて配色を作り、各色を色見本とHEX・RGB・HSLの値で表示します。値はワンクリックでコピーできます。
計算方法
配色パターンの作り方
ジェネレーターは基準色をHSLモデル（CSS Color Module Level 4の定義による色相H〔度〕、彩度S・明度L〔%〕）に変換します。各配色パターンでは色相だけを回転させ、彩度と明度はそのままです。最後に各色をsRGBに戻し、0〜255の整数に丸めます。
カラーパレットを作る手順
- 基準色をHEX・RGB・HSLで入力するか、カラーピッカーで選びます。
- 補色・類似色・トライアド・モノクロマティックなどの配色パターンを選びます。
- 各色をHEX・RGB・HSLの値でコピーします。
例：青 hsl(217, 91%, 60%) を色相環で180°回転させると、補色は hsl(37, 91%, 60%)、つまり約#F6AF3Cの暖かいオレンジになります。
| 配色パターン | 色相の回転 | 色数 |
|---|---|---|
| 補色（コンプリメンタリー） | 0°、180° | 2 |
| 類似色（アナロガス） | −30°、0°、＋30° | 3 |
| トライアド | 0°、120°、240° | 3 |
| スプリットコンプリメンタリー | 0°、150°、210° | 3 |
| テトラード（長方形） | 0°、60°、180°、240° | 4 |
| スクエア | 0°、90°、180°、270° | 4 |
| モノクロマティック | 回転なし、明度を5段階 | 5 |
例：純粋な赤#FF0000はH＝0°、S＝100%、L＝50%です。180°回転するとH＝180°、つまりシアン#00FFFFが補色になります。トライアドではさらに120°（緑#00FF00）と240°（青#0000FF）が加わります。
補色とは
補色は色相環で正反対（180°）に位置する色の組み合わせです。互いを最も引き立て合うため、強いアクセントになります。一方、類似色は隣り合う色相どうしで、落ち着いたまとまりのある配色になります。
モノクロマティック配色
「モノクロマティック」では色相を変えず、明度を黒の方向へ2段階、白の方向へ2段階、等間隔で動かします。初期値の#3B82F6（L≈60%）では、明度がおよそ20%、40%、60%、73%、87%になります。
色見本の文字の読みやすさ
各色見本のラベルは、WCAGの相対輝度の式でコントラストが高くなる方の黒または白で表示されます。これにより常に4.58:1以上を確保しています。パレット内の2色を文字色と背景色として組み合わせられるかは、コントラスト比チェッカーで確認できます。
注意点
HSLは単純な幾何学モデルで、知覚的に均等ではありません。同じLでも黄色は青よりずっと明るく見えます。計算された配色は出発点と考え、最後は目で微調整してください。グレーには色相がないため、回転しても同じ色になります。
よくある質問
補色とは何ですか？
色相環で180°反対側にある色です。青#0000FF（H＝240°）の補色は黄色#FFFF00（H＝60°）、#3B82F6（H≈217°）の補色は#F6AF3B前後のオレンジです。
入力できる色の形式は？
3・4・6・8桁のHEX（#の有無は問いません）、rgb()・rgba()、hsl()・hsla()、hsv()／hsb()、hwb()、「59, 130, 246」のような3つの数値（RGBとして解釈）です。CSS Color 4のカンマ区切りとスペース区切りの両方に対応します。
作った色をCSSやデザインツールで使うには？
各色見本にHEX値のコピーボタンがあります。「CSS変数としてコピー」を押すと、--farbe-1、--farbe-2…を含む:rootブロックがクリップボードに入ります。RGBとHSLの値は下の表に一覧表示されます。
配色のバランスが悪く見えるのはなぜですか？
HSLの明度は純粋に数学的な値だからです。同じLでも黄色やシアンは青や紫よりずっと明るく見えます。必要に応じて個々の色の明度を調整するか、彩度の低い基準色から始めてください。
相性のよい色の組み合わせは？
色相環上で決まった間隔にある色は調和して見えます。強いコントラストなら補色（180°）、落ち着いた配色なら類似色（隣り合う色相）、バランスのよいカラフルな組み合わせならトライアド（120°間隔）がおすすめです。
出典・根拠
- CSS Color 4, § 7: W3C – CSS Color Module Level 4: HSL colors
- CSS Color 4, § 5.2: W3C – CSS Color Module Level 4: RGB hex notation
- WCAG 2.2: W3C – WCAG 2.2: Definition “relative luminance”
更新日：
関連ツール
- カラーコード変換：HEX・RGB・HSL・HSV・CMYKカラーコードを変換します。HEXからRGB、RGBからHEX、HSL・HSV・HWB・CMYKへ一括変換。どの形式で入力しても自動で判別し、結果はコピーできます。
- コントラスト比チェッカー（WCAG 2.2）文字色と背景色のコントラスト比をWCAG 2.2の基準で計算。通常の文字・大きな文字・UI部品それぞれのAA／AAA判定と、基準を満たす近い色の提案を表示します。
- 画像からカラーコードを抽出（スポイト）画像のカラーコードを調べるスポイトツール。写真をクリックするだけでHEX・RGB・HSLを表示し、メインカラーも抽出します。アップロード不要でブラウザ内で完結。
- 1RM計算機（最大挙上重量）挙げた重量と回数から、1回だけ挙げられる最大重量（1RM）をEpley式とBrzycki式で推定します。1〜10回のRM換算表付き。kgとlbに対応しています。
- 1日に必要な水分量の計算1日に必要な水分量の目安を計算。年齢・性別・体重、妊娠中や授乳中かどうかから、飲み物でとる水分と食事を含めた総水分量をEFSAとDGEの基準で表示します。
- BMI計算：肥満度と標準体重BMI計算ツール。身長と体重を入れるだけで自動計算し、日本肥満学会の基準で低体重・普通体重・肥満1〜4度を判定。普通体重の範囲もわかります。