免费 HEX 配色生成器
从一个 HEX 色值开始，找到网站的配色方向。对比色彩组合、深浅色阶和六种语义色，再复制 CSS 变量，用到自己的项目中。
快速预设
基础颜色（HEX）
#2563EB
和谐色
主色
用于主要操作的颜色
#2563EB辅助色
用于辅助元素的颜色
#6C59D5强调色
用于视觉强调的颜色
#E3AA2D背景色
用于页面背景的颜色
#F7F7F8表面色
用于卡片背景的颜色
#E8E9EE文字色
用于正文文字的颜色
#1B212C:root {
--color-primary: #2563EB;
--color-secondary: #6C59D5;
--color-accent: #E3AA2D;
--color-background: #F7F7F8;
--color-surface: #E8E9EE;
--color-text: #1B212C;
--color-primary-50: #F4F6FB;
--color-primary-100: #D1DBF1;
--color-primary-200: #ABBFEB;
--color-primary-300: #82A2E7;
--color-primary-400: #5583E8;
--color-primary-500: #2563EB;
--color-primary-600: #124BC7;
--color-primary-700: #0D3794;
--color-primary-800: #082462;
--color-primary-900: #04112F;
}什么是 HEX 配色生成器？
HEX 配色生成器根据一个 HEX 色值生成相关颜色。这款工具可生成和谐色、色阶和六种语义色，并提供可复制的 CSS 变量。
如何从 HEX 色值生成配色
先选一个基础颜色，再查看配色组合、深浅色阶和语义色，最后复制需要的值。你可以输入 HEX 色值，也可以使用取色器或随机颜色开始。
- 步骤 1
选择基础颜色
输入有效的 HEX 色值，或使用取色器、随机颜色选色。手动输入后，点击“生成配色”查看结果。
- 步骤 2
比较配色组合
查看基础颜色生成的类似色、互补色和三等分色。比较不同组合，为网站或品牌寻找合适的配色方向。
- 步骤 3
查看深浅与用途
查看标记为 50 到 900 的色阶及六种语义色。按界面不同部分的需要，选择合适的深浅和颜色用途。
- 步骤 4
复制色值与 CSS
复制单个色值，或复制生成的 CSS 变量。将其粘贴到自己的样式表中，用于网站页面或设计系统。
一套配色，可以用在哪里？
从页面背景到按钮和文字，让网站各处的用色都有依据。以下六种用途，可以帮你把生成的配色方案用到实际设计中。
背景和边框
从色阶中挑选深浅色调，用于页面背景、卡片背景和边框。让网站中不同层次的元素拥有合适的颜色。
悬停状态
为按钮和链接挑选鼠标悬停时显示的颜色。决定采用哪种搭配前，先在实际界面中查看它们的效果。
产品界面
按用途使用主色、辅助色、强调色、背景色、表面色和文字色。让产品界面各处的颜色角色保持一致。
品牌配色
从品牌主色出发，比较类似色、互补色和三等分色组合。为网站的颜色选择提供一组可参考的方向。
设计系统
将语义色和色阶复制到自己的设计系统中。为可复用的组件提供共同的色值，方便保持用色一致。
CSS 样式表
将生成的 CSS 变量粘贴到样式表，并在样式中引用。让网站不同页面和组件使用同一套颜色定义。
从挑选配色到复制 CSS，在这里完成
这款免费配色生成器将色彩组合、深浅色阶和六种语义色放在一起，方便你查看和比较。选好后，复制色值或 CSS 变量，即可在自己的项目中使用。
从主色延伸更多搭配
根据基础 HEX 色值生成类似色、互补色和三等分色。比较不同组合，为网站寻找适合的配色方向。
从浅到深挑选色调
查看标记为 50 到 900 的深浅色阶。按页面背景、边框和其他界面元素的需要，选择合适的色调。
按用途整理六种颜色
获取主色、辅助色、强调色、背景色、表面色和文字色。按六种用途使用颜色，让网站用色更一致。
复制即可使用的 CSS
将语义色和色阶复制为 CSS 变量。粘贴到自己的样式表后，即可在网站的不同元素中引用这些颜色。
打造线上品牌
所需工具一应俱全
常见问题
HEX 配色生成器根据一个 HEX 色值生成相关颜色。这款工具可生成和谐色、色阶和六种语义色，并提供可复制的 CSS 变量。
输入有效的三位或六位 HEX 色值，再点击“生成配色”。你也可以使用取色器、选择预设，或选择“随机颜色”。
色阶提供编号为 50 到 900 的深浅色调，可作为背景、边框和悬停状态配色的起点。请在最终设计中检查文字对比度。
在 CSS 变量面板中点击“复制”，再将变量粘贴到样式表。在 CSS 规则中引用这些变量，即可应用语义色和色阶。