这类颜色更容易在第一眼传达出的整体气质，可以帮助你快速判断是否适合当前页面方向。
热门颜色专题
红色
红色有非常强的情绪驱动力。它适合承担强调、提醒、促销和节奏拉升的角色，但也最容易因为使用过量而让页面变得紧张和拥挤。 这页会把色值、场景建议、常见误区和继续处理工具放在一起，方便直接查阅和落地。
HEX #DC2626RGB rgb(220, 38, 38)HSL hsl(0, 72%, 51%)
优先在这些位置使用，会比把同一个颜色铺满整页更稳，也更容易形成清晰层级。
红色很容易把页面拉得过满，不能同时承担背景、正文和多个强调区。
基础色值
如果你需要先和设计稿、CSS 或组件变量对齐，可以直接从这三种写法开始。
- HEX
- #DC2626
- RGB
- rgb(220, 38, 38)
- HSL
- hsl(0, 72%, 51%)
先看结论
如果你现在只想快速判断这类颜色值不值得继续深入，可以先看这几条。
- 红色更适合承担短时强调，而不是长时阅读型背景。
- 在网页里，红色最常见的角色是 CTA、错误提示、活动价格和节庆视觉。
- 红色页面最需要控制密度和留白，否则很容易显得噪和急。
红色为什么很容易吸引注意力
红色天然具备更强的视觉冲击力，用户在浏览页面时会更快注意到它，所以它特别适合被用在“需要立刻被看到”的信息上。
这种特性让红色很适合促销价格、限时活动、删除提醒、错误状态和高优先级按钮，但也意味着它不能无节制铺开。
红色在网页和品牌里适合怎么用
如果页面目标是拉升行动，比如报名、抢购、秒杀或节庆活动，红色非常有效。它能在很短时间内把用户注意力集中到一个区域上。
但如果你的产品是长期使用型工具或内容阅读站，红色通常更适合做局部强调，而不是整套界面主色。否则用户长时间停留会觉得界面始终在“催促”自己。
- 适合活动专区、价格标签、数量预警和错误提示。
- 适合做单个强按钮，但不适合页面里到处都是红色 CTA。
- 如果品牌本身需要高热度和高记忆点，红色可以做主色，但要配大量留白和中性色。
用红色时最容易踩的坑
红色最常见的问题不是颜色本身，而是密度太高。按钮红、标题红、价格红、角标红、分区背景也红，页面很快就会变得吵。
另一个高频问题是白字压在偏亮的红色上不够清晰。正式上线前，红底白字一定要做对比度检查，不要只凭主观感觉判断。
- 红色强按钮最好控制在 1 到 2 个核心动作内。
- 大面积红底更适合专题页，不适合工具型正文界面。
- 红色搭配黑白灰最稳，想加节奏再局部引入暖橙或深酒红。
适合继续搭配的颜色工具
确定方向后，可以直接从这些工具继续做取色、扩色板、配色和可读性检查。
颜色选择器
在线选择颜色并实时查看 HEX、RGB、HSL 和 CSS 写法，支持原生色板和浏览器吸管取色。
颜色选择器color picker
颜色混合器
输入两种颜色和混合比例，实时输出混合后的 HEX、RGB、HSL 和 CSS 写法。
颜色混合器在线混色
渐变生成器
交互式生成线性与径向渐变，适合网页和海报背景。
渐变生成器css gradient
对比度检测
检测前景色与背景色的可读性，输出 WCAG 对比度结果。
对比度检测wcag color contrast
相关知识
如果你还想继续补基础概念、网页配色和对比度规则，可以继续往下看。
常见问题
把高频疑问集中回答，方便快速查找。
红色适合做工具站主色吗？
通常不建议直接把高饱和红色作为整站主色。它更适合承担活动、提醒和强调角色，工具站长期使用更容易接受蓝色、绿色或中性色体系。
红色按钮为什么有时候看起来很刺眼？
常见原因是饱和度太高、周围没有留白，或者同一屏里同时出现多个红色强调点，导致用户没有真正的视觉重点。
红色和什么颜色搭配最稳？
黑、白、灰是最稳的底层搭配。如果要增加质感，可以引入偏深的棕红、酒红或暖灰，而不是再叠更多鲜艳颜色。
继续浏览其它热门颜色
如果你在比较不同主色方向，可以继续看这组高频颜色专题。