Wildflower and Hay のカラーパレット
Wildflower and Hay は、緑、黄色を基調にした 6 色のカラーパレットです。 OKLCH での明度は 22%（#102000、とても暗い）から 97%（#EAFDC9、とても明るい）までで、最も彩度の高い色 #577820 は中程度の彩度です。 彩度が低いため、暖色にも寒色にも偏っていません。 15 通りの色の組み合わせのうち 6 通りが、本文テキストの WCAG AA の比率 4.5:1 を満たしています。 自然、春、モノクロ、グラデーション、緑のタグが付いています。
- Jet #102000
- Pakistan Green #2E4801
- Dark Moss Green #577820
- Olive #7F9F4C
- Ash Gray #B3CC88
- Cornsilk #EAFDC9
カラーコード
| 色 | HEX | RGB | HSL | OKLCH |
|---|---|---|---|---|
| Jet | #102000 | rgb(16, 32, 0) | hsl(90, 100%, 6%) | oklch(22.1% 0.061 131.3) |
| Pakistan Green | #2E4801 | rgb(46, 72, 1) | hsl(82, 97%, 14%) | oklch(36.7% 0.097 129.3) |
| Dark Moss Green | #577820 | rgb(87, 120, 32) | hsl(83, 58%, 30%) | oklch(52.9% 0.121 128) |
| Olive | #7F9F4C | rgb(127, 159, 76) | hsl(83, 35%, 46%) | oklch(66% 0.117 126.8) |
| Ash Gray | #B3CC88 | rgb(179, 204, 136) | hsl(82, 40%, 67%) | oklch(81% 0.095 124.9) |
| Cornsilk | #EAFDC9 | rgb(234, 253, 201) | hsl(82, 93%, 89%) | oklch(96.7% 0.07 124) |
アクセシビリティ
Wildflower and Hay の中で最も読みやすいテキストと背景の組み合わせを、WCAG 2 のコントラスト比順に掲載しています。背景上のテキストの APCA 明度コントラスト（Lc）も併記しています。
| 組み合わせ | WCAG 2 | レベル | APCA Lc |
|---|---|---|---|
| #EAFDC9 を #102000 の上に | 15.78:1 | AAA | Lc -100.2 |
| #102000 を #B3CC88 の上に | 9.69:1 | AAA | Lc 69.4 |
| #EAFDC9 を #2E4801 の上に | 9.49:1 | AAA | Lc -91.7 |
色覚
1型色覚、2型色覚、3型色覚、1色覚のどのシミュレーションでも、ΔE 0.06 以内に近づく色の組み合わせはありません。
1型色覚
2型色覚
3型色覚
1色覚
コードで使う
shadcn で、これらの色を Tailwind CSS v4 のテーマカラーとしてインストールできます。 npx shadcn@latest add https://getcolors.so/r/palette/102000-2e4801-577820-7f9f4c-b3cc88-eafdc9.json.
自分好みに仕上げる
色を編集したり、ライトとダークのカラーシステムを作ったり、実際の UI で確認したりできます。