Moonpool Water のカラーパレット
Moonpool Water は、青緑やシアン、赤、ニュートラルカラーを基調にした 5 色のカラーパレットです。 OKLCH での明度は 20%（#001A16、とても暗い）から 93%（#D6EDE9、とても明るい）までで、最も彩度の高い色 #623944 はくすんだ色です。 有彩色 3 色のうち 2 色が、色相環の寒色側にあります。 10 通りの色の組み合わせのうち 6 通りが、本文テキストの WCAG AA の比率 4.5:1 を満たしています。 海、落ち着いた色、赤、青緑、くすんだ色のタグが付いています。
- Rich Navy #001A16
- Midnight Green #003C36
- Dim Gray #623944
- Silver #D8C1C6
- Gainsboro #D6EDE9
カラーコード
| 色 | HEX | RGB | HSL | OKLCH |
|---|---|---|---|---|
| Rich Navy | #001A16 | rgb(0, 26, 22) | hsl(171, 100%, 5%) | oklch(19.5% 0.035 181.5) |
| Midnight Green | #003C36 | rgb(0, 60, 54) | hsl(174, 100%, 12%) | oklch(32% 0.057 183.9) |
| Dim Gray | #623944 | rgb(98, 57, 68) | hsl(344, 26%, 30%) | oklch(39.8% 0.06 2.8) |
| Silver | #D8C1C6 | rgb(216, 193, 198) | hsl(347, 23%, 80%) | oklch(83.2% 0.027 2.9) |
| Gainsboro | #D6EDE9 | rgb(214, 237, 233) | hsl(170, 39%, 88%) | oklch(92.8% 0.025 184.2) |
アクセシビリティ
Moonpool Water の中で最も読みやすいテキストと背景の組み合わせを、WCAG 2 のコントラスト比順に掲載しています。背景上のテキストの APCA 明度コントラスト（Lc）も併記しています。
| 組み合わせ | WCAG 2 | レベル | APCA Lc |
|---|---|---|---|
| #D6EDE9 を #001A16 の上に | 14.79:1 | AAA | Lc -91.9 |
| #001A16 を #D8C1C6 の上に | 10.66:1 | AAA | Lc 72.1 |
| #D6EDE9 を #003C36 の上に | 10.09:1 | AAA | Lc -86.3 |
色覚
1組の色が、少なくとも1つのシミュレーションで、互いに ΔE 0.06 以内に近づきます。
1型色覚
2型色覚
3型色覚
1色覚
コードで使う
shadcn で、これらの色を Tailwind CSS v4 のテーマカラーとしてインストールできます。 npx shadcn@latest add https://getcolors.so/r/palette/001a16-003c36-623944-d8c1c6-d6ede9.json.
自分好みに仕上げる
色を編集したり、ライトとダークのカラーシステムを作ったり、実際の UI で確認したりできます。