Glacier Sky のカラーパレット
Glacier Sky は、緑、紫、赤、ニュートラルカラーを基調にした 5 色のカラーパレットです。 OKLCH での明度は 19%（#0E1809、とても暗い）から 94%（#E5EFE0、とても明るい）までで、最も彩度の高い色 #293D1E はくすんだ色です。 有彩色は、色相環の暖色側と寒色側に均等に分かれています。 10 通りの色の組み合わせのうち 4 通りが、本文テキストの WCAG AA の比率 4.5:1 を満たしています。 自然、寒色、緑、紫、くすんだ色のタグが付いています。
- Rich Navy #0E1809
- Pakistan Green #293D1E
- Dim Gray #474364
- Dusty Grape #684F5B
- Gainsboro #E5EFE0
カラーコード
| 色 | HEX | RGB | HSL | OKLCH |
|---|---|---|---|---|
| Rich Navy | #0E1809 | rgb(14, 24, 9) | hsl(100, 45%, 6%) | oklch(19.4% 0.032 135.8) |
| Pakistan Green | #293D1E | rgb(41, 61, 30) | hsl(99, 34%, 18%) | oklch(33.4% 0.057 135.3) |
| Dim Gray | #474364 | rgb(71, 67, 100) | hsl(247, 20%, 33%) | oklch(40.1% 0.055 289.2) |
| Dusty Grape | #684F5B | rgb(104, 79, 91) | hsl(331, 14%, 36%) | oklch(45.8% 0.038 348.3) |
| Gainsboro | #E5EFE0 | rgb(229, 239, 224) | hsl(100, 32%, 91%) | oklch(94% 0.023 134.9) |
アクセシビリティ
Glacier Sky の中で最も読みやすいテキストと背景の組み合わせを、WCAG 2 のコントラスト比順に掲載しています。背景上のテキストの APCA 明度コントラスト（Lc）も併記しています。
| 組み合わせ | WCAG 2 | レベル | APCA Lc |
|---|---|---|---|
| #E5EFE0 を #0E1809 の上に | 15.39:1 | AAA | Lc -94.5 |
| #E5EFE0 を #293D1E の上に | 9.97:1 | AAA | Lc -88.1 |
| #E5EFE0 を #474364 の上に | 7.87:1 | AAA | Lc -83.3 |
色覚
2組の色が、少なくとも1つのシミュレーションで、互いに ΔE 0.06 以内に近づきます。
1型色覚
2型色覚
3型色覚
1色覚
コードで使う
shadcn で、これらの色を Tailwind CSS v4 のテーマカラーとしてインストールできます。 npx shadcn@latest add https://getcolors.so/r/palette/0e1809-293d1e-474364-684f5b-e5efe0.json.
自分好みに仕上げる
色を編集したり、ライトとダークのカラーシステムを作ったり、実際の UI で確認したりできます。