デザインプレビュー
カラーの詳細
01メイン
コントラストAa 11.1Aa 1.9
02サブ
コントラストAa 6.4Aa 3.3
03アクセント
コントラストAa 2.5Aa 8.5
04背景
コントラストAa 1.4Aa 14.9
このパレットを使う
CSS 変数
:root {
--forest-dream-1: #1B4332;
--forest-dream-2: #2D6A4F;
--forest-dream-3: #52B788;
--forest-dream-4: #B7E4C7;
}Tailwind カラー
module.exports = {
theme: {
extend: {
colors: {
'forest-dream': {
100: '#1B4332',
200: '#2D6A4F',
300: '#52B788',
400: '#B7E4C7',
},
},
},
},
};アクセシブルな色の組み合わせ
このパレットの中で、通常テキストの WCAG AA（4.5:1）を満たす文字色と背景色の組み合わせです。
- Aa #1B4332 / #B7E4C7 7.9:1
- Aa #B7E4C7 / #1B4332 7.9:1
- Aa #2D6A4F / #B7E4C7 4.5:1
- Aa #B7E4C7 / #2D6A4F 4.5:1
パレットに含まれる色の名前
各スウォッチに最も近い CSS カラー名です。