Pine Floor のカラーパレット
Pine Floor は、緑、黄色を基調にした 4 色のカラーパレットです。 OKLCH での明度は 33%（#1B3D2B、暗い）から 93%（#E3EBD3、とても明るい）までで、最も彩度の高い色 #86A867 は中程度の彩度です。 彩度が低いため、暖色にも寒色にも偏っていません。 6 通りの色の組み合わせのうち 1 通りが、本文テキストの WCAG AA の比率 4.5:1 を満たしています。 森、自然、緑、落ち着いた色のタグが付いています。
- Pakistan Green #1B3D2B
- Dark Moss Green #4F7F4A
- Muted Teal #86A867
- Champagne #E3EBD3
カラーコード
| 色 | HEX | RGB | HSL | OKLCH |
|---|---|---|---|---|
| Pakistan Green | #1B3D2B | rgb(27, 61, 43) | hsl(148, 39%, 17%) | oklch(32.8% 0.052 158.6) |
| Dark Moss Green | #4F7F4A | rgb(79, 127, 74) | hsl(114, 26%, 39%) | oklch(54.8% 0.096 142.1) |
| Muted Teal | #86A867 | rgb(134, 168, 103) | hsl(91, 27%, 53%) | oklch(69% 0.098 131) |
| Champagne | #E3EBD3 | rgb(227, 235, 211) | hsl(80, 37%, 87%) | oklch(92.8% 0.033 122.1) |
アクセシビリティ
Pine Floor の中で最も読みやすいテキストと背景の組み合わせを、WCAG 2 のコントラスト比順に掲載しています。背景上のテキストの APCA 明度コントラスト（Lc）も併記しています。
| 組み合わせ | WCAG 2 | レベル | APCA Lc |
|---|---|---|---|
| #E3EBD3 を #1B3D2B の上に | 9.77:1 | AAA | Lc -85.8 |
| #1B3D2B を #86A867 の上に | 4.47:1 | AA（大きな文字） | Lc 43.2 |
| #E3EBD3 を #4F7F4A の上に | 3.83:1 | AA（大きな文字） | Lc -62.8 |
色覚
1型色覚、2型色覚、3型色覚、1色覚のどのシミュレーションでも、ΔE 0.06 以内に近づく色の組み合わせはありません。
1型色覚
2型色覚
3型色覚
1色覚
コードで使う
shadcn で、これらの色を Tailwind CSS v4 のテーマカラーとしてインストールできます。 npx shadcn@latest add https://getcolors.so/r/palette/1b3d2b-4f7f4a-86a867-e3ebd3.json.
自分好みに仕上げる
色を編集したり、ライトとダークのカラーシステムを作ったり、実際の UI で確認したりできます。