设计预览
颜色详情
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 命名颜色。