Chalk and Cotton のカラーパレット

Chalk and Cotton は、青、紫、青緑やシアンを基調にした 5 色のカラーパレットです。 OKLCH での明度は 33%（#2F324A、暗い）から 90%（#C8E3F5、とても明るい）までで、最も彩度の高い色 #605679 はくすんだ色です。 有彩色 5 色のうち 4 色が、色相環の寒色側にあります。 10 通りの色の組み合わせのうち 3 通りが、本文テキストの WCAG AA の比率 4.5:1 を満たしています。 落ち着いた色、紫、くすんだ色、寒色のタグが付いています。

落ち着いた色紫くすんだ色寒色

カラーコード

色HEXRGBHSLOKLCH
Gunmetal #2F324A rgb(47, 50, 74) hsl(233, 22%, 24%) oklch(32.5% 0.043 278.2)
Dusty Grape #605679 rgb(96, 86, 121) hsl(257, 17%, 41%) oklch(47.7% 0.057 297.3)
Slate Gray #658B96 rgb(101, 139, 150) hsl(193, 20%, 49%) oklch(61.2% 0.045 217.6)
French Gray #9FB1CB rgb(159, 177, 203) hsl(215, 30%, 71%) oklch(75.5% 0.043 257.5)
Light Sky Blue #C8E3F5 rgb(200, 227, 245) hsl(204, 69%, 87%) oklch(90.2% 0.038 237.1)

アクセシビリティ

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

組み合わせWCAG 2レベルAPCA Lc
#C8E3F5 を #2F324A の上に 9.40:1 AAA Lc -81.3
#2F324A を #9FB1CB の上に 5.74:1 AA Lc 53.4
#C8E3F5 を #605679 の上に 5.08:1 AA Lc -67.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/2f324a-605679-658b96-9fb1cb-c8e3f5.json.

自分好みに仕上げる

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

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

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