Sorrel Hedgerow のカラーパレット
Sorrel Hedgerow は、緑、オレンジ、ピンク、黄色を基調にした 5 色のカラーパレットです。 OKLCH での明度は 38%（#244E1A、暗い）から 89%（#D7E2A0、明るい）までで、最も彩度の高い色 #D57C3C は中程度の彩度です。 有彩色 5 色のうち 2 色が、色相環の暖色側にあります。 10 通りの色の組み合わせのうち 2 通りが、本文テキストの WCAG AA の比率 4.5:1 を満たしています。 自然、春、緑、暖色のタグが付いています。
- Pakistan Green #244E1A
- Persian Green #5E8C61
- Burnt Sienna #D57C3C
- Cherry Blossom Pink #E8B4C8
- Tea Green #D7E2A0
カラーコード
| 色 | HEX | RGB | HSL | OKLCH |
|---|---|---|---|---|
| Pakistan Green | #244E1A | rgb(36, 78, 26) | hsl(108, 50%, 20%) | oklch(38% 0.094 139.9) |
| Persian Green | #5E8C61 | rgb(94, 140, 97) | hsl(124, 20%, 46%) | oklch(59.5% 0.082 146) |
| Burnt Sienna | #D57C3C | rgb(213, 124, 60) | hsl(25, 65%, 54%) | oklch(67.2% 0.135 53.6) |
| Cherry Blossom Pink | #E8B4C8 | rgb(232, 180, 200) | hsl(337, 53%, 81%) | oklch(82.3% 0.065 353.7) |
| Tea Green | #D7E2A0 | rgb(215, 226, 160) | hsl(70, 53%, 76%) | oklch(88.9% 0.087 115.9) |
アクセシビリティ
Sorrel Hedgerow の中で最も読みやすいテキストと背景の組み合わせを、WCAG 2 のコントラスト比順に掲載しています。背景上のテキストの APCA 明度コントラスト（Lc）も併記しています。
| 組み合わせ | WCAG 2 | レベル | APCA Lc |
|---|---|---|---|
| #D7E2A0 を #244E1A の上に | 7.01:1 | AAA | Lc -73.7 |
| #E8B4C8 を #244E1A の上に | 5.41:1 | AA | Lc -58.3 |
| #D57C3C を #244E1A の上に | 3.11:1 | AA（大きな文字） | Lc -32.6 |
色覚
1組の色が、少なくとも1つのシミュレーションで、互いに ΔE 0.06 以内に近づきます。
1型色覚
2型色覚
3型色覚
1色覚
コードで使う
shadcn で、これらの色を Tailwind CSS v4 のテーマカラーとしてインストールできます。 npx shadcn@latest add https://getcolors.so/r/palette/244e1a-5e8c61-d57c3c-e8b4c8-d7e2a0.json.
自分好みに仕上げる
色を編集したり、ライトとダークのカラーシステムを作ったり、実際の UI で確認したりできます。