配色パレット生成
補色・類似色・トライアドなどの配色をHEX・RGBで作成
色・デザイン無料・登録不要端末の中で処理PR・このページには広告が含まれます
基準の色
補色色相環の反対側（180°）の色
- 白と 3.67（大きな文字のみ）黒と 5.70（AA合格）
- 白と 1.88黒と 11.11（AA合格）
類似色となり合う色（±30°）
- 白と 1.60黒と 13.07（AA合格）
- 白と 3.67（大きな文字のみ）黒と 5.70（AA合格）
- 白と 6.33（AA合格）黒と 3.31（大きな文字のみ）
トライアド120°ずつ離れた3色
- 白と 3.67（大きな文字のみ）黒と 5.70（AA合格）
- 白と 3.57（大きな文字のみ）黒と 5.86（AA合格）
- 白と 1.38黒と 15.19（AA合格）
分裂補色補色の両どなり（150°・210°）
- 白と 3.67（大きな文字のみ）黒と 5.70（AA合格）
- 白と 3.39（大きな文字のみ）黒と 6.18（AA合格）
- 白と 1.20黒と 17.38（AA合格）
テトラード90°ずつ離れた4色（正方形）
- 白と 3.67（大きな文字のみ）黒と 5.70（AA合格）
- 白と 3.17（大きな文字のみ）黒と 6.60（AA合格）
- 白と 1.88黒と 11.11（AA合格）
- 白と 1.44黒と 14.49（AA合格）
ティント（明るく）白を20%ずつ混ぜた色
- 白と 3.67（大きな文字のみ）黒と 5.70（AA合格）
- 白と 2.77黒と 7.56（AA合格）
- 白と 2.10黒と 9.97（AA合格）
- 白と 1.61黒と 12.99（AA合格）
- 白と 1.26黒と 16.65（AA合格）
シェード（暗く）黒を20%ずつ混ぜた色
- 白と 3.67（大きな文字のみ）黒と 5.70（AA合格）
- 白と 5.37（AA合格）黒と 3.90（大きな文字のみ）
- 白と 8.11（AA合格）黒と 2.58
- 白と 12.30（AA合格）黒と 1.70
- 白と 17.38（AA合格）黒と 1.20
色の見本を押すとHEX、その下の rgb(…) を押すとRGBをコピーします。色相環の配色はHSLの色相を回して作り、彩度と明るさは基準の色のままです。「白と」「黒と」は、その色を背景にして白・黒の文字を置いたときのコントラスト比（WCAG 2.x）で、ふつうの文字は4.5以上がAA合格です。
次はこちら
配色パレット生成の使い方
- 「基準の色」をカラーピッカーで選ぶか、カラーコードを入れます。
- 補色・類似色・トライアドなどの配色と、明るさを変えた色が自動で並びます。
- 色の見本を押すとHEX、その下の rgb(…) を押すとRGBをコピーできます。
よくある質問
Q. 配色はどのように計算していますか？
A. 基準の色をHSLに変換し、色相だけを回して作っています。彩度と明るさは基準の色のままです。
Q. 「白と」「黒と」の数字は何ですか？
A. その色を背景にして白・黒の文字を置いたときのコントラスト比です。ふつうの文字は4.5以上でWCAGのAAに合格します。
Q. ティントとシェードの違いは？
A. ティントは白を混ぜて明るくした色、シェードは黒を混ぜて暗くした色です。20%ずつ混ぜて並べています。
このツールについて
配色パレット生成の無料ツール。補色・類似色・トライアドなどの配色をHEX・RGBで作成。登録不要で、入力した内容はブラウザの中だけで処理します。
最終更新：2026/10/19