设计预览
颜色详情
01主色
对比度Aa 9.9Aa 2.1
02辅助色
对比度Aa 6.7Aa 3.2
03强调色
对比度Aa 3.4Aa 6.2
04背景色
对比度Aa 1.8Aa 11.5
使用这套配色
CSS 变量
:root {
--storm-cloud-1: #36454F;
--storm-cloud-2: #4F5D75;
--storm-cloud-3: #778DA9;
--storm-cloud-4: #BFC0C0;
}Tailwind 颜色
module.exports = {
theme: {
extend: {
colors: {
'storm-cloud': {
100: '#36454F',
200: '#4F5D75',
300: '#778DA9',
400: '#BFC0C0',
},
},
},
},
};无障碍配色组合
本配色中满足 WCAG AA 普通文字标准（4.5:1）的文字与背景组合。
- Aa #36454F / #BFC0C0 5.4:1
- Aa #BFC0C0 / #36454F 5.4:1
配色中的命名颜色
每个色块最接近的 CSS 命名颜色。