Champagne Reception のカラーパレット
Champagne Reception は、ニュートラルカラー、緑を基調にした 5 色のカラーパレットです。 OKLCH での明度は 23%（#192112、とても暗い）から 95%（#EBF0E8、とても明るい）までで、最も彩度の高い色 #A9C495 は中程度の彩度です。 彩度が低いため、暖色にも寒色にも偏っていません。 10 通りの色の組み合わせのうち 4 通りが、本文テキストの WCAG AA の比率 4.5:1 を満たしています。 ウェディング、緑、グレー、くすんだ色、アースカラー、ニュートラルのタグが付いています。
- Jet #192112
- Dim Gray #4D5746
- Ash Gray #A9C495
- Ash Gray #BFC7BA
- Anti-Flash White #EBF0E8
カラーコード
| 色 | HEX | RGB | HSL | OKLCH |
|---|---|---|---|---|
| Jet | #192112 | rgb(25, 33, 18) | hsl(92, 29%, 10%) | oklch(23.5% 0.03 131.2) |
| Dim Gray | #4D5746 | rgb(77, 87, 70) | hsl(95, 11%, 31%) | oklch(44.3% 0.03 132.5) |
| Ash Gray | #A9C495 | rgb(169, 196, 149) | hsl(94, 28%, 68%) | oklch(78.8% 0.071 132.2) |
| Ash Gray | #BFC7BA | rgb(191, 199, 186) | hsl(97, 10%, 75%) | oklch(82% 0.02 133.1) |
| Anti-Flash White | #EBF0E8 | rgb(235, 240, 232) | hsl(98, 21%, 93%) | oklch(94.9% 0.012 133.4) |
アクセシビリティ
Champagne Reception の中で最も読みやすいテキストと背景の組み合わせを、WCAG 2 のコントラスト比順に掲載しています。背景上のテキストの APCA 明度コントラスト（Lc）も併記しています。
| 組み合わせ | WCAG 2 | レベル | APCA Lc |
|---|---|---|---|
| #EBF0E8 を #192112 の上に | 14.33:1 | AAA | Lc -95.1 |
| #192112 を #BFC7BA の上に | 9.54:1 | AAA | Lc 69.8 |
| #192112 を #A9C495 の上に | 8.69:1 | AAA | Lc 65.0 |
色覚
1組の色が、少なくとも1つのシミュレーションで、互いに ΔE 0.06 以内に近づきます。
1型色覚
2型色覚
3型色覚
1色覚
コードで使う
shadcn で、これらの色を Tailwind CSS v4 のテーマカラーとしてインストールできます。 npx shadcn@latest add https://getcolors.so/r/palette/192112-4d5746-a9c495-bfc7ba-ebf0e8.json.
自分好みに仕上げる
色を編集したり、ライトとダークのカラーシステムを作ったり、実際の UI で確認したりできます。