我的神奇笔记

唔，这个配色是我乱打然后筛选出来较为柔和的配色

给博客换皮肤这种事，说起来玄学，做起来更玄学。当时没有正经学设计，就在调色盘里随机戳几个十六进制数，看一眼顺眼就留下，刺眼就删。筛了好几轮，最后正文主色定在了 #616161——不算纯黑，带点灰，长时间看文章眼睛没那么累。标题、引用块再配浅一点的背景，整体偏「安静」，不抢内容的戏。

下面是把几组前景色 / 背景色写进页面里的效果预览。做法很土：内联 <style> 定义几个 class，再用 <div> 铺满宽度当色条，改博客主题前先在笔记里看一眼实机效果，比干盯着 Photoshop 色块直观。

<font

color="#616161"

id=“9116994572745c660f40296d7683c991cd273cca”>

字体色#616161

红色那条偏警示、绿色偏成功提示、蓝紫那条打算给代码块或侧边栏用——最后博客上线时没全用上，但笔记留着，以后改主题还能翻出来对照。如果你也在折腾个人站配色，建议别迷信「万能配色公式」，多试几组、多读几篇再定；眼睛舒服比炫酷重要。

后来真正改主题时，我还会把同一组颜色放到白底、浅灰底和深色底上分别测试，再检查链接、按钮、警告和代码的对比度。颜色单独看着好看，组合后不一定还清楚；主题配色最终是为内容层级服务，不是为色卡本身服务。

另一个容易忽略的点是深色模式和移动端。桌面屏幕上刚好的灰色，到手机户外环境中可能已经看不清。定稿前可以用浏览器开发工具检查对比度，再用真机快速读一遍文章列表和代码块。

可用性说明：本文发布于 2019 年 10 月，距今已超过五年。文中涉及的软件版本、接口、下载地址、命令参数和操作界面可能已经发生变化，部分方案在当前环境下可能失效。请结合官方最新文档核对后再操作，生产环境使用前务必先行验证。

版权声明: 本文首发于 指尖魔法屋-我的神奇笔记（https://blog.thinkmoon.cn/post/525-notes-css/） 转载或引用必须申明原指尖魔法屋来源及源地址！