カラーパレット生成 JobDoneBot
配色に迷ったら、一瞬で解決Adobe Color年間サブスク→0円で即座に生成
配色に迷ったら、一瞬で解決
📥 入力
→📄HEX📄カラーピッカー
📤 出力
📄HEX📄RGB📄HSL📄CSS変数📄Tailwind設定
🔒
完全ローカル処理 - ファイルはあなたのPC内で完結
サーバーへのアップロード不要。プライバシー完全保護、処理速度は爆速。
ベースカラー
RGB: 59, 130, 246HSL: 217°, 91%, 60%
配色タイプ
隣り合う色相の組み合わせ
生成されたパレット
コントラストチェック
白文字テスト
コントラスト比: 1.59:1
黒文字テスト
コントラスト比: 13.19:1
WCAG AA基準: 通常テキスト 4.5:1以上、大きなテキスト 3:1以上
CSS変数
--color-1: #3ce0f6;
--color-2: #3B82F6;
--color-3: #523cf6;Tailwind設定
'brand': {
50: '#e7fbfe',
100: '#bbf4fc',
200: '#8fedfa',
300: '#63e6f8',
400: '#37dff6',
500: '#0bd8f4',
600: '#09b1c8',
700: '#078b9c',
800: '#056470',
900: '#033d44',
}配色理論リファレンス
補色: 色相環で正反対の色
類似色: 色相環で隣り合う色
トライアド: 色相環を3等分
分裂補色: 補色の両隣の色
テトラード: 正方形配置の4色
モノクロ: 同一色相の濃淡
Job Done!
3件の処理が完了しました
このツールが役に立ったら、ぜひシェアしてください
おすすめハッシュタグ
#カラーパレット#配色#Webデザイン#CSS#Tailwind#JobDoneBot
📥
入力対応形式
2形式📄
HEX
📄
カラーピッカー
変換
📤
出力形式
5形式📄
HEX
📄
RGB
📄
HSL
📄
CSS変数
📄
Tailwind設定
カラーパレット生成でできること
配色理論に基づいたカラーパレットを自動生成。CSS/Tailwindコードもワンクリック出力
✨主な機能
🎨
6種類の配色理論
補色、類似色、トライアド、分裂補色、テトラード、モノクロマティックに対応
🔄
リアルタイム生成
ベースカラーを選ぶと即座にパレットを生成
📋
CSS/Tailwind出力
CSS変数やTailwind設定をワンクリックでコピー
♿
コントラストチェック
WCAG基準に基づいたコントラスト比を表示
🎲
ランダム生成
ワンクリックでランダムなベースカラーを生成
🔒
完全ローカル処理
すべての処理がブラウザ内で完結
🚀使い方（たった3ステップ）
1
ベースカラーを選択
カラーピッカーまたはHEXコードでベースカラーを指定
2
配色タイプを選択
補色、類似色、トライアドなどから選択
3
パレットをコピー
生成されたパレットのHEXコードやCSS/Tailwindコードをコピー
💡JobDoneBotならではの特徴
- ✓完全無料・回数無制限
- ✓ログイン不要
- ✓6種類の配色理論対応
- ✓CSS/Tailwind出力
- ✓コントラストチェック
- ✓ワンクリックコピー
❓よくある質問
🔒
完全ローカル処理 - ファイルはあなたのPC内で完結
サーバーへのアップロード不要。プライバシー完全保護、処理速度は爆速。
