Flurry Silence のカラーパレット
Flurry Silence は、青、ニュートラルカラーを基調にした 4 色のカラーパレットです。 OKLCH での明度は 17%（#02111C、とても暗い）から 96%（#E5F6FF、とても明るい）までで、最も彩度の高い色 #2C4E61 はくすんだ色です。 有彩色 3 色のうち 3 色が、色相環の寒色側にあります。 6 通りの色の組み合わせのうち 3 通りが、本文テキストの WCAG AA の比率 4.5:1 を満たしています。 冬、寒色、モノクロ、グラデーション、青、ニュートラルのタグが付いています。
- Rich Navy #02111C
- Oxford Blue #0C2E40
- Charcoal #2C4E61
- Light Cyan #E5F6FF
カラーコード
| 色 | HEX | RGB | HSL | OKLCH |
|---|---|---|---|---|
| Rich Navy | #02111C | rgb(2, 17, 28) | hsl(205, 87%, 6%) | oklch(17% 0.033 239.2) |
| Oxford Blue | #0C2E40 | rgb(12, 46, 64) | hsl(201, 68%, 15%) | oklch(28.6% 0.051 235.8) |
| Charcoal | #2C4E61 | rgb(44, 78, 97) | hsl(202, 38%, 28%) | oklch(40.6% 0.051 234.4) |
| Light Cyan | #E5F6FF | rgb(229, 246, 255) | hsl(201, 100%, 95%) | oklch(96.3% 0.022 230.5) |
アクセシビリティ
Flurry Silence の中で最も読みやすいテキストと背景の組み合わせを、WCAG 2 のコントラスト比順に掲載しています。背景上のテキストの APCA 明度コントラスト（Lc）も併記しています。
| 組み合わせ | WCAG 2 | レベル | APCA Lc |
|---|---|---|---|
| #E5F6FF を #02111C の上に | 17.24:1 | AAA | Lc -99.6 |
| #E5F6FF を #0C2E40 の上に | 12.81:1 | AAA | Lc -96.0 |
| #E5F6FF を #2C4E61 の上に | 8.00:1 | AAA | Lc -86.9 |
色覚
1型色覚、2型色覚、3型色覚、1色覚のどのシミュレーションでも、ΔE 0.06 以内に近づく色の組み合わせはありません。
1型色覚
2型色覚
3型色覚
1色覚
コードで使う
shadcn で、これらの色を Tailwind CSS v4 のテーマカラーとしてインストールできます。 npx shadcn@latest add https://getcolors.so/r/palette/02111c-0c2e40-2c4e61-e5f6ff.json.
自分好みに仕上げる
色を編集したり、ライトとダークのカラーシステムを作ったり、実際の UI で確認したりできます。