カラーパレット生成
ブラウザー内でローカル実行ロック可能な配色パレット、OKLCH トーンスケール、デザイントークンを作成
アルファ付き HEX、RGB、HSL、OKLCH、CSS 色名に対応。
パレットの色
彩度を下げて sRGB に変換しました。
検査とトークン
検査
色 1
- HEX
- #6366F1
- RGB
- rgb(99 102 241)
- HSL
- hsl(238.732 83.529% 66.667%)
- OKLCH
- oklch(58.54% 0.2041 277.117)
明るい変化
#767FF5#8B96F8#A1ADFA#B9C2FC#D1D8FD
暗い変化
#5154C6#40439D#303376#202351#12142E
コントラスト
比率は色の組合せを示し、ページの認証ではありません。通常の文字は AA 4.5:1、AAA 7:1。透明色は背景と合成します。
| 前景色 \ 背景色 | 1 | 2 | 3 | 4 | 5 |
|---|---|---|---|---|---|
1 #6366F1 | 1.00 不合格 | 1.18 不合格 | 1.23 不合格 | 1.42 不合格 | 1.49 不合格 |
2 #3C69C0 | 1.18 不合格 | 1.00 不合格 | 1.45 不合格 | 1.20 不合格 | 1.76 不合格 |
3 #8F72EA | 1.23 不合格 | 1.45 不合格 | 1.00 不合格 | 1.74 不合格 | 1.22 不合格 |
4 #0063A3 | 1.42 不合格 | 1.20 不合格 | 1.74 不合格 | 1.00 不合格 | 2.11 不合格 |
5 #B27FE0 | 1.49 不合格 | 1.76 不合格 | 1.22 不合格 | 2.11 不合格 | 1.00 不合格 |
書き出し
書き出す色数: 5 (通常パレット)
:root {
--primary-1: #6366F1;
--primary-2: #3C69C0;
--primary-3: #8F72EA;
--primary-4: #0063A3;
--primary-5: #B27FE0;
}読み込み
CSS/SCSS、Tailwind v3 の JSON 設定、JSON トークン、配列、カンマまたは改行区切りの色を貼り付けます。11 トーンは明るい順に並べてください。
連携
グラデーション用の選択: 0 / 6
希望の順番で 2–6 色を選んでください。自動で切り捨てません。
生成、コントラスト、書き出しはローカルで動作し、色を送信しません。
カラーパレット生成
編集とロックが可能な色体系を、OKLCH トーンと実用的なトークンで作成します。
オプション
基準色またはランダムを選び、色を編集して保持したい色をロックしてからシャッフルします。配色は知覚的な色相差を使い、手動ロックで上書きできます。トーンは通常パレットを保持し、50–950 を生成します。基準色が 500 に一致する保証はありません。明暗の変化、四形式、コントラストを確認し、五形式のトークンを書き出せます。
コントラスト
アルファを保持し、背景と前景を不透明背景に順番に合成して比率を計算します。アクセシビリティ認証ではありません。11 トーンは明るさ順で読み込んでください。色はローカルに留まり、保存は任意です。2–6 色を選択して現在の言語のグラデーションに渡せます。リセットと読み込みは取り消せます。
