Sherbet Daydream のカラーパレット
Sherbet Daydream は、緑、ピンク、紫、青緑やシアン、黄色を基調にした 5 色のカラーパレットです。 OKLCH での明度は 77%（#9DBDB0、やや明るい）から 94%（#E3F4C8、とても明るい）までで、最も彩度の高い色 #E3F4C8 はくすんだ色です。 有彩色は、色相環の暖色側と寒色側に均等に分かれています。 10 通りの色の組み合わせのうち 0 通りが、本文テキストの WCAG AA の比率 4.5:1 を満たしています。 パステル、明るい色、緑のタグが付いています。
- French Gray #9DBDB0
- Cherry Blossom Pink #DDB4BB
- Cadet Gray #DCCBF0
- Diamond #C5E8F0
- Lemon Meringue #E3F4C8
カラーコード
| 色 | HEX | RGB | HSL | OKLCH |
|---|---|---|---|---|
| French Gray | #9DBDB0 | rgb(157, 189, 176) | hsl(156, 20%, 68%) | oklch(77.1% 0.039 168.7) |
| Cherry Blossom Pink | #DDB4BB | rgb(221, 180, 187) | hsl(350, 38%, 79%) | oklch(80.8% 0.048 6.7) |
| Cadet Gray | #DCCBF0 | rgb(220, 203, 240) | hsl(268, 55%, 87%) | oklch(86.8% 0.054 306) |
| Diamond | #C5E8F0 | rgb(197, 232, 240) | hsl(191, 59%, 86%) | oklch(90.8% 0.038 213.1) |
| Lemon Meringue | #E3F4C8 | rgb(227, 244, 200) | hsl(83, 67%, 87%) | oklch(94.3% 0.06 124.7) |
アクセシビリティ
Sherbet Daydream の中で最も読みやすいテキストと背景の組み合わせを、WCAG 2 のコントラスト比順に掲載しています。背景上のテキストの APCA 明度コントラスト（Lc）も併記しています。
| 組み合わせ | WCAG 2 | レベル | APCA Lc |
|---|---|---|---|
| #E3F4C8 を #9DBDB0 の上に | 1.74:1 | 不合格 | Lc -32.7 |
| #E3F4C8 を #DDB4BB の上に | 1.59:1 | 不合格 | Lc -27.8 |
| #C5E8F0 を #9DBDB0 の上に | 1.56:1 | 不合格 | Lc -25.1 |
色覚
3組の色が、少なくとも1つのシミュレーションで、互いに ΔE 0.06 以内に近づきます。
1型色覚
2型色覚
3型色覚
1色覚
コードで使う
shadcn で、これらの色を Tailwind CSS v4 のテーマカラーとしてインストールできます。 npx shadcn@latest add https://getcolors.so/r/palette/9dbdb0-ddb4bb-dccbf0-c5e8f0-e3f4c8.json.
自分好みに仕上げる
色を編集したり、ライトとダークのカラーシステムを作ったり、実際の UI で確認したりできます。