Ember Descent のカラーパレット
Ember Descent は、ニュートラルカラー、紫を基調にした 4 色のカラーパレットです。 OKLCH での明度は 19%（#20100A、とても暗い）から 94%（#F3E9E5、とても明るい）までで、最も彩度の高い色 #732D7E は鮮やかです。 彩度が低いため、暖色にも寒色にも偏っていません。 6 通りの色の組み合わせのうち 3 通りが、本文テキストの WCAG AA の比率 4.5:1 を満たしています。 夕焼け、暖色、紫、グレー、くすんだ色のタグが付いています。
- Rich Navy #20100A
- Purple #732D7E
- Dim Gray #62544F
- Gainsboro #F3E9E5
カラーコード
| 色 | HEX | RGB | HSL | OKLCH |
|---|---|---|---|---|
| Rich Navy | #20100A | rgb(32, 16, 10) | hsl(16, 52%, 8%) | oklch(19.4% 0.03 41.2) |
| Purple | #732D7E | rgb(115, 45, 126) | hsl(292, 47%, 34%) | oklch(43.1% 0.145 322) |
| Dim Gray | #62544F | rgb(98, 84, 79) | hsl(16, 11%, 35%) | oklch(45.8% 0.02 40.7) |
| Gainsboro | #F3E9E5 | rgb(243, 233, 229) | hsl(17, 37%, 93%) | oklch(94.1% 0.012 43.3) |
アクセシビリティ
Ember Descent の中で最も読みやすいテキストと背景の組み合わせを、WCAG 2 のコントラスト比順に掲載しています。背景上のテキストの APCA 明度コントラスト（Lc）も併記しています。
| 組み合わせ | WCAG 2 | レベル | APCA Lc |
|---|---|---|---|
| #F3E9E5 を #20100A の上に | 15.44:1 | AAA | Lc -94.0 |
| #F3E9E5 を #732D7E の上に | 7.32:1 | AAA | Lc -80.7 |
| #F3E9E5 を #62544F の上に | 6.07:1 | AA | Lc -76.9 |
色覚
1組の色が、少なくとも1つのシミュレーションで、互いに ΔE 0.06 以内に近づきます。
1型色覚
2型色覚
3型色覚
1色覚
コードで使う
shadcn で、これらの色を Tailwind CSS v4 のテーマカラーとしてインストールできます。 npx shadcn@latest add https://getcolors.so/r/palette/20100a-732d7e-62544f-f3e9e5.json.
自分好みに仕上げる
色を編集したり、ライトとダークのカラーシステムを作ったり、実際の UI で確認したりできます。