深色模式配色生成器

工作原理

出色的深色界面并不只是把黑白颠倒:背景应保持轻微的色调倾向,切忌使用纯黑,以避免对比过于刺眼;强调色则要足够明亮,才能在深色背景上保持清晰可读。本工具会根据您强调色的色相,在 HSL 色彩空间中自动计算这些细微差别,生成一组协调统一的颜色,并以 CSS 变量的形式,可直接粘贴到您的样式表中。

为什么在深色模式下要避免使用纯黑(#000000)背景?

纯黑背景搭配纯白文字会形成极端的对比,容易让眼睛疲劳,并在部分 OLED 屏幕上产生光晕效应(视觉抖动)。macOS、Material Design 等专业的深色界面通常采用带有轻微色调的深灰色,本配色正是如此。

强调色也需要针对深色模式进行调整吗?

需要:在浅色背景上效果很好的强调色,放到黑色背景上可能显得暗淡或过暗。本工具会将您提供的强调色适当提亮,使其保持良好的对比度,并在生成的深色背景上清晰可见。

任何颜色或偏好设置都不会发送到服务器:所有色彩计算都在您的浏览器中本地运行。