每个专题页都会给出基础 HEX、RGB 和 HSL，方便设计、开发和内容协作统一格式。
热门颜色专题
热门颜色专题
这里把高频颜色的基础色值、视觉印象、网页使用场景和继续处理路径整理到同一页里，适合先确定颜色方向，再进入具体工具。
18 个热门颜色主题基础色值参考网页与品牌场景
同一个颜色放在按钮、背景、正文或活动区里，承担的作用完全不同，专题页会把场景拆开说明。
确认方向后，可以继续进入色轮、色板、对比度和渐变工具，把颜色扩成真正可上线的方案。
进入方式
先按你的颜色任务进入
如果你不是泛泛浏览颜色，而是已经知道自己要解决什么问题，可以从下面三条路径进入。
这组专题页会提供什么
不是只放一个色块，而是把颜色选择、配色和落地场景连起来。
- 给出基础色值，方便和设计稿、CSS、组件变量直接对应。
- 说明颜色更适合承担什么角色，而不是只谈抽象印象。
- 补充常见误区、可读性风险和下一步该用哪些工具继续处理。
建议怎么使用这些专题
更适合把它当作颜色决策的第一站，而不是最后一步。
- 先挑一个最接近目标气质的颜色专题，确认方向。
- 再用色板和色轮工具，把单个颜色扩成一套层级方案。
- 最后用对比度工具校验文字、按钮和背景是否真的可上线。
热门颜色列表
先看颜色方向，再继续进入色值、场景和配色细节。
蓝色
整理蓝色的基础色值、常见视觉印象、网页与品牌场景的使用建议，以及适合继续搭配的颜色工具。
品牌主色按钮与链接后台产品
查看专题红色
整理红色的基础色值、情绪强度、营销与提醒场景下的使用方法，以及常见的配色注意点。
促销活动错误与告警CTA 按钮
查看专题绿色
整理绿色在成功提示、自然感、增长感和品牌视觉中的常见用法，并给出基础色值与搭配建议。
成功提示增长趋势环保与健康
查看专题黑色
整理黑色在高对比、质感表达、正文阅读和品牌视觉中的用法，以及纯黑使用时需要避开的风险。
深色正文高对比标题奢侈感品牌页
查看专题白色
整理白色在网页背景、留白、卡片容器和阅读界面中的作用，并说明为什么白色本身也需要层级管理。
页面背景卡片容器正文阅读
查看专题灰色
整理灰色在正文、说明文字、边框、背景和中性色体系里的作用，并说明灰色如何支撑整个界面层级。
正文层级说明文字边框背景
查看专题橙色
整理橙色的基础色值、温度感、营销场景和按钮使用建议，并说明橙色为什么适合承担高行动区。
CTA 按钮活动视觉电商营销
查看专题黄色
整理黄色在高亮、提醒、活力品牌和界面氛围中的用法，并说明黄色最容易踩到的可读性问题。
高亮标签提醒提示年轻化品牌
查看专题紫色
整理紫色在创意、科技、AI、时尚和专题视觉中的常见用法，并说明紫色如何避免显得过重或过旧。
AI 工具创意品牌Hero 视觉
查看专题粉色
整理粉色在美妆、生活方式、社交和轻情绪化页面中的用法，并说明粉色如何避免显得过甜或过轻。
生活方式品牌社交活动节庆专题
查看专题棕色
整理棕色在咖啡、食品、手作、复古和自然系页面中的用法，并说明棕色如何避免显得沉闷。
咖啡食品手作品牌自然内容页
查看专题米色 / 奶油色
整理米色和奶油色在背景、内容容器、生活方式品牌和编辑感页面中的用法，并说明浅暖色页面如何保证可读性。
背景底色生活方式品牌家居内容页
查看专题青色 / 青绿色
整理青色和青绿色在科技感、清爽感、医疗健康和数据界面中的用法，并给出基础色值、场景建议与配色注意点。
辅助主色图表与状态医疗健康
查看专题酒红色
整理酒红色在高级感专题、品牌视觉、节庆和深色强调区中的常见用法，并说明如何避免页面显得过重。
品牌识别专题首屏节庆活动
查看专题藏蓝色
整理藏蓝色在企业官网、金融产品、工具后台和高对比正文结构中的用法，并说明藏蓝如何替代纯黑承担主结构色。
企业官网金融产品导航背景
查看专题金色
整理金色在高质感品牌、会员体系、奖章标签和节庆专题中的使用方式，并说明线上设计里的金色为什么更适合做点缀。
会员等级奖章标签品牌点缀
查看专题银灰色
整理银灰色在科技感界面、中性色层级、卡片边框和轻金属感品牌页中的用法，并说明如何避免页面发灰。
边框层级科技品牌页硬件产品
查看专题莫兰迪色
整理莫兰迪色在内容站、生活方式品牌、家居与编辑感页面中的用法，并说明低饱和配色如何保持层级和可读性。
内容站背景生活方式品牌家居专题
查看专题继续搭配使用的工具
确定颜色方向之后，直接用这些工具继续扩成品牌色板、配色方案或可读性结果。
品牌色板生成器
输入品牌主色后自动生成 50-900 色板层级、CSS 变量和设计系统常用 token。
品牌色板生成器品牌色板
色轮工具
基于主色生成互补色、邻近色、三角色等配色方案，实时输出 HEX、HSL 和 CSS 变量。
色轮工具color wheel
颜色选择器
在线选择颜色并实时查看 HEX、RGB、HSL 和 CSS 写法，支持原生色板和浏览器吸管取色。
颜色选择器color picker
CSS 变量主题映射器
把品牌主色映射成 CSS 变量主题，输出原始色板、accent / surface / text / border 等语义变量。
css变量主题映射器css theme variables
颜色 Token 命名生成器
为品牌色、中性色和状态色生成统一的 Token 命名，输出 CSS 变量、Design Token JSON 和 JS 常量示例。
颜色token命名生成器design token命名
批量颜色格式转换器（HEX / RGB / HSL）
批量转换 HEX、RGB 和 HSL 颜色列表，统一输出三种格式和 CSS 变量，适合设计规范与样式整理。
批量颜色转换hex rgb hsl 批量转换