配色方案分享:从零搭建调色板
从用途出发
先想清楚页面拿来做什么:技术博客适合冷静的蓝灰,个人作品集可以更活泼。
60-30-10 法则
- 60% 主色(背景、大面积区域)
- 30% 辅助色(卡片、导航栏)
- 10% 强调色(按钮、链接、高亮)
CSS 变量管理配色
:root {
--color-bg: #ffffff;
--color-primary: #2c3e50;
--color-accent: #3498db;
}
一处修改,全局生效。
先想清楚页面拿来做什么:技术博客适合冷静的蓝灰,个人作品集可以更活泼。
:root {
--color-bg: #ffffff;
--color-primary: #2c3e50;
--color-accent: #3498db;
}
一处修改,全局生效。