Canopy Floor のカラーパレット
Canopy Floor は、緑を基調にした 4 色のカラーパレットです。 OKLCH での明度は 26%（#13291C、暗い）から 96%（#E1F8E6、とても明るい）までで、最も彩度の高い色 #4B6F58 はくすんだ色です。 彩度が低いため、暖色にも寒色にも偏っていません。 6 通りの色の組み合わせのうち 3 通りが、本文テキストの WCAG AA の比率 4.5:1 を満たしています。 森、自然、モノクロ、グラデーション、緑、色覚特性に配慮した色のタグが付いています。
- Jet #13291C
- Dark Moss Green #4B6F58
- Muted Teal #90B29A
- Honeydew #E1F8E6
カラーコード
| 色 | HEX | RGB | HSL | OKLCH |
|---|---|---|---|---|
| Jet | #13291C | rgb(19, 41, 28) | hsl(145, 37%, 12%) | oklch(25.8% 0.038 156.6) |
| Dark Moss Green | #4B6F58 | rgb(75, 111, 88) | hsl(142, 19%, 36%) | oklch(50.7% 0.055 155.9) |
| Muted Teal | #90B29A | rgb(144, 178, 154) | hsl(138, 18%, 63%) | oklch(73.1% 0.051 154.3) |
| Honeydew | #E1F8E6 | rgb(225, 248, 230) | hsl(133, 62%, 93%) | oklch(95.7% 0.034 152.1) |
アクセシビリティ
Canopy Floor の中で最も読みやすいテキストと背景の組み合わせを、WCAG 2 のコントラスト比順に掲載しています。背景上のテキストの APCA 明度コントラスト（Lc）も併記しています。
| 組み合わせ | WCAG 2 | レベル | APCA Lc |
|---|---|---|---|
| #E1F8E6 を #13291C の上に | 13.79:1 | AAA | Lc -96.5 |
| #13291C を #90B29A の上に | 6.62:1 | AA | Lc 54.3 |
| #E1F8E6 を #4B6F58 の上に | 5.05:1 | AA | Lc -75.0 |
色覚
1型色覚、2型色覚、3型色覚、1色覚のどのシミュレーションでも、ΔE 0.06 以内に近づく色の組み合わせはありません。 色覚特性に配慮したタグが付いています。すべての組み合わせが ΔE 0.14 以上離れています。
1型色覚
2型色覚
3型色覚
1色覚
コードで使う
shadcn で、これらの色を Tailwind CSS v4 のテーマカラーとしてインストールできます。 npx shadcn@latest add https://getcolors.so/r/palette/13291c-4b6f58-90b29a-e1f8e6.json.
自分好みに仕上げる
色を編集したり、ライトとダークのカラーシステムを作ったり、実際の UI で確認したりできます。