Pewter Edit のカラーパレット
Pewter Edit は、茶色、紫、赤、ピンクを基調にした 6 色のカラーパレットです。 OKLCH での明度は 26%（#381E00、暗い）から 93%（#FFE0E2、とても明るい）までで、最も彩度の高い色 #4C4468 はくすんだ色です。 有彩色 6 色のうち 4 色が、色相環の暖色側にあります。 15 通りの色の組み合わせのうち 5 通りが、本文テキストの WCAG AA の比率 4.5:1 を満たしています。 ラグジュアリー、くすんだ色、紫、暖色、落ち着いた色のタグが付いています。
- Jet #381E00
- Dim Gray #4C4468
- Gray #91685A
- English Lavender #B28C9F
- Silver #CDB7D1
- Apricot #FFE0E2
カラーコード
| 色 | HEX | RGB | HSL | OKLCH |
|---|---|---|---|---|
| Jet | #381E00 | rgb(56, 30, 0) | hsl(32, 100%, 11%) | oklch(26.4% 0.059 65.6) |
| Dim Gray | #4C4468 | rgb(76, 68, 104) | hsl(253, 21%, 34%) | oklch(41% 0.06 293.8) |
| Gray | #91685A | rgb(145, 104, 90) | hsl(15, 23%, 46%) | oklch(55.6% 0.057 39.7) |
| English Lavender | #B28C9F | rgb(178, 140, 159) | hsl(330, 20%, 62%) | oklch(68.2% 0.053 347.1) |
| Silver | #CDB7D1 | rgb(205, 183, 209) | hsl(291, 22%, 77%) | oklch(80.6% 0.043 321) |
| Apricot | #FFE0E2 | rgb(255, 224, 226) | hsl(356, 100%, 94%) | oklch(93.3% 0.034 13.3) |
アクセシビリティ
Pewter Edit の中で最も読みやすいテキストと背景の組み合わせを、WCAG 2 のコントラスト比順に掲載しています。背景上のテキストの APCA 明度コントラスト（Lc）も併記しています。
| 組み合わせ | WCAG 2 | レベル | APCA Lc |
|---|---|---|---|
| #FFE0E2 を #381E00 の上に | 12.57:1 | AAA | Lc -89.5 |
| #381E00 を #CDB7D1 の上に | 8.34:1 | AAA | Lc 65.0 |
| #FFE0E2 を #4C4468 の上に | 7.29:1 | AAA | Lc -79.6 |
色覚
1型色覚、2型色覚、3型色覚、1色覚のどのシミュレーションでも、ΔE 0.06 以内に近づく色の組み合わせはありません。
1型色覚
2型色覚
3型色覚
1色覚
コードで使う
shadcn で、これらの色を Tailwind CSS v4 のテーマカラーとしてインストールできます。 npx shadcn@latest add https://getcolors.so/r/palette/381e00-4c4468-91685a-b28c9f-cdb7d1-ffe0e2.json.
自分好みに仕上げる
色を編集したり、ライトとダークのカラーシステムを作ったり、実際の UI で確認したりできます。