给小世界配色：从一杯抹茶开始

演示教程：这篇文章用于展示阅读、目录、图片和代码块功能。你可以把它替换成自己的原创教程。

先决定画面的温度

开始挑颜色之前，我通常会先写下三个词。比如这次是：温柔、自然、透气。这些词没有标准答案，但它们可以帮我们做选择。

如果一种颜色很漂亮，却总是抢走画面的注意力，就暂时把它放到旁边。配色的任务是服务内容，而不是让每一块都同样热闹。

从三种颜色开始

一块温暖的底色，一种用来强调的颜色，再加一种清晰的文字色，就足以开始一张页面。

用途	示例颜色	使用方式
背景	奶油白 #FFF9F0	大面积留白
点缀	鼠尾草绿 #A8BFA0	标签和装饰
文字	深森林绿 #40594C	标题与正文

把颜色变成可维护的变量

下面的 CSS 示例可以作为一次小练习。把重复出现的颜色集中起来，之后调整主题会更轻松。

:root {
  --paper: #fff9f0;
  --leaf: #a8bfa0;
  --ink: #40594c;
}

.little-card {
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--leaf);
  border-radius: 24px;
}

用真实内容检查配色

不要只看空卡片。放进去一段较长的中文、一个真实标题和一张颜色复杂的图片，再把画面缩小到手机宽度。这样更容易发现文字不够清楚、颜色太接近或重点不明显的问题。

浅绿适合装饰，但不一定适合小字。正文要保持足够清楚，再温柔的页面也需要先让人读得舒服。

一个小练习

挑一张自己拍的日常照片，从中选出三种颜色，试着做一张作品卡片。先只用这三种颜色，完成后再决定是否需要第四种。