Mandarin Crate のカラーパレット

Mandarin Crate は、茶色、黄色、紫、ニュートラルカラーを基調にした 6 色のカラーパレットです。 OKLCH での明度は 28%（#2F2A15、暗い）から 94%（#F1ECD2、とても明るい）までで、最も彩度の高い色 #71683F はくすんだ色です。 有彩色 5 色のうち 4 色が、色相環の暖色側にあります。 15 通りの色の組み合わせのうち 5 通りが、本文テキストの WCAG AA の比率 4.5:1 を満たしています。 フード、夏、黄色、紫、くすんだ色のタグが付いています。

フード夏黄色紫くすんだ色

カラーコード

色HEXRGBHSLOKLCH
Pakistan Green #2F2A15 rgb(47, 42, 21) hsl(48, 38%, 13%) oklch(28.5% 0.035 96.4)
Dark Moss Green #71683F rgb(113, 104, 63) hsl(49, 28%, 35%) oklch(51.5% 0.06 97.3)
Cool Steel #A0A2CB rgb(160, 162, 203) hsl(237, 29%, 71%) oklch(72.5% 0.059 282.6)
Silver #BCB8A2 rgb(188, 184, 162) hsl(51, 16%, 69%) oklch(78% 0.031 98.6)
Cadet Gray #CECFE3 rgb(206, 207, 227) hsl(237, 27%, 85%) oklch(86% 0.028 283.5)
Champagne #F1ECD2 rgb(241, 236, 210) hsl(50, 53%, 88%) oklch(94% 0.035 98.1)

アクセシビリティ

Mandarin Crate の中で最も読みやすいテキストと背景の組み合わせを、WCAG 2 のコントラスト比順に掲載しています。背景上のテキストの APCA 明度コントラスト（Lc）も併記しています。

組み合わせWCAG 2レベルAPCA Lc
#F1ECD2 を #2F2A15 の上に 12.08:1 AAA Lc -91.2
#CECFE3 を #2F2A15 の上に 9.34:1 AAA Lc -74.4
#2F2A15 を #BCB8A2 の上に 7.19:1 AAA Lc 60.3

色覚

1組の色が、少なくとも1つのシミュレーションで、互いに ΔE 0.06 以内に近づきます。

  • 1型色覚

  • 2型色覚

  • 3型色覚

  • 1色覚

コードで使う

shadcn で、これらの色を Tailwind CSS v4 のテーマカラーとしてインストールできます。 npx shadcn@latest add https://getcolors.so/r/palette/2f2a15-71683f-a0a2cb-bcb8a2-cecfe3-f1ecd2.json.

自分好みに仕上げる

色を編集したり、ライトとダークのカラーシステムを作ったり、実際の UI で確認したりできます。

ジェネレーターで開く カラーシステムを作る ビジュアライズ

これらの色のグラデーション