🎨 カラーパレット生成
ベースカラーを選ぶだけで、配色パターン・Tailwind風シェード・コード出力・コントラストチェックまでまとめて生成できるツールです。
ベースカラー
補色（コンプリメンタリー）
ベース
#3366cc
補色 +180°
#cc9933
類似色（アナログ ±30°）
-30°
#33b3cc
ベース
#3366cc
+30°
#4d33cc
トライアド（±120°）
-120°
#66cc33
ベース
#3366cc
+120°
#cc3366
スプリット補色（180°±30°）
+150°
#cc4c33
ベース
#3366cc
+210°
#b3cc33
モノクロマティック（明度違い5段階）
10%
#0a1429
30%
#1f3d7a
50%
#3366cc
70%
#85a3e0
90%
#d6e0f5
シェード（50〜950）
Tailwind風に11段階の明度スケールで生成しています。クリックでHEXをコピーできます。
50
#ebf0fa
100
#c6d4f1
200
#a1b9e8
300
#7c9dde
400
#5882d5
500
#3366cc
600
#2a53a6
700
#204081
800
#172e5b
900
#0d1b36
950
#040810
コード出力
Tailwind config
CSS変数
SCSS変数
✅ コピーしました！
コントラストチェック
ベースカラーを背景にしたときの、白文字・黒文字それぞれのWCAGコントラスト比です。4.5:1以上でAA（通常テキスト）合格の目安です。
白文字プレビュー
コントラスト比: 5.37 : 1
AA 合格
黒文字プレビュー
コントラスト比: 3.91 : 1
AA 不合格
※ 入力内容はすべてブラウザ内で処理しており、弊社サーバーへ送信・保存することは一切ありません。
※ スウォッチをクリックするとHEXカラーコードをコピーできます。
こんなツールをこれからも作っていきます。もしこれは！と思っていただけましたら、シェア・応援していただけると嬉しいです！😀