跳到主要内容

红色:含义、心理学、色调与搭配

红色是可见光谱中最强烈、最引人注目的颜色之一。它与能量、激情、行动和力量相关联,因此是平面设计、品牌、广告和 UI 设计中常见的选择。

Red#DC2626

什么是红色?

红色是可见光谱中最强烈、最抓眼球的颜色之一。

由于它能强烈吸引注意力,红色常用于突出关键元素、创建行动号召或即时传递情感。

红色代表什么?

红色通常与以下概念相关联:

  • 能量
  • 激情
  • 爱
  • 力量
  • 权力
  • 行动
  • 勇气
  • 危险
  • 紧迫
  • 情感

其含义因文化和语境而异,但几乎在所有地方都是一种能瞬间吸引注意力的颜色。

红色的色彩心理学

在色彩心理学中,红色是引发最强情感反应的颜色之一。

它可以传递热情、决心和自信,但在高饱和度使用时也可能传达紧迫或警告。

因此常见于:

  • 购买按钮
  • 优惠与折扣
  • 体育
  • 食品品牌
  • 汽车
  • 科技品牌
  • 警示标志
  • 编辑设计

在数字界面中,红色通常保留给重要操作、警报或需要从其余内容中脱颖而出的元素。

红色在哪里使用?

红色在数字和印刷媒体中广泛使用,尤其常见于:

  • 网页设计
  • 移动应用
  • 企业品牌
  • 标志
  • 广告
  • 包装
  • 社交媒体
  • 营销
  • 海报
  • 标识

其吸引注意力的能力使其成为突出按钮、促销和转化元素的绝佳颜色。

红色色调

红色拥有大量细微差别。一些最常用的色调包括:

名称色样HexRGBHSLOKLCH
IndianRed
LightCoral
Salmon
Crimson
FireBrick
Red
DarkRed
Maroon
Tomato
Coral

每种色调传递不同的感受。亮红色更动感,深红色则带来优雅与精致。

HTML 颜色

与红色搭配的颜色

虽然红色是主导色,但它可以与其他颜色轻松组合,形成平衡构图。常见搭配包括:

  • 白色#FFFFFF
  • 黑色#111111
  • 灰色#9CA3AF
  • 象牙色#FFFFF0
  • 米色#F5F5DC
  • 海军蓝#001F3F
  • 石油蓝#0E4D5C
  • 橄榄绿#556B2F
  • 浅粉#F8C8DC
  • 金色#D4AF37

选择取决于您想要的视觉风格:现代、优雅、经典或大胆。

红色的互补色

红色的互补色位于色轮的蓝绿或青色区域。互补组合对比度极高,常用于突出关键元素、创造视觉平衡或构建高冲击力的布局。

Red#DC2626
#28DCDC

红色的色彩和谐

根据颜色在色轮上的位置,红色可以形成不同的色彩和谐。最常用的是:

类似色

将红色与橙色、橙红色等邻近色组合,形成温暖、自然的构图。

互补色

将红色与蓝绿色配对,实现最大视觉对比。

分裂互补色

保持互补对比,同时使用互补色两侧的两个颜色,获得更平衡的效果。

三色

使用色轮上均匀分布的三种颜色。在插画、品牌和创意设计中很受欢迎。

四色

使用两对互补色组成的四种颜色,适合复杂项目中更丰富的配色。

色轮

红色的变化

通过改变明度和饱和度,可以从红色生成许多变化。最常见的是:

浅色调(加白)

中间调(加灰)

深色调(加黑)

饱和度变化

色阶

这些变化让您可以将同一颜色适配到不同的 UI 元素,同时保持视觉一致性。

红色配色方案

基于红色的配色可以传达从能量到优雅的多种感受,取决于搭配颜色。热门组合包括:

红色 + 白色 + 灰色

3 colors

红色 + 黑色 + 银色

3 colors

红色 + 米色 + 棕色

3 colors

红色 + 海军蓝 + 白色

3 colors

红色 + 粉色 + 酒红

3 colors

在网页设计中,建议用中性色平衡红色,避免视觉过于强烈。

配色板

对比度与无障碍

在文字或按钮中使用红色时,请检查与背景的对比度。

遵循 WCAG 无障碍建议有助于保持所有用户的可读性,尤其是浅色或高饱和度色调。

在界面中使用颜色之前,请验证其在白色和黑色背景上的对比度比率。

  • 红色文字 / 白色背景

    4.99:1AA ✓

  • 白色文字 / 红色背景

    4.99:1AA ✓

  • 黑色文字 / 珊瑚色背景

    7.56:1AA ✓

  • 红色文字 / 黑色背景

    5.77:1AA ✓

WCAG 对比度检查器

红色渐变

红色因其色彩丰富性在渐变中表现尤其出色。常见渐变包括:

这些渐变广泛用于背景、现代界面和突出元素。

渐变生成器

网页设计中的红色

除了 HEX 代码,红色在界面中有具体作用。了解它在真实 UI 组件中的表现:按钮、状态、表单和品牌。

  • CTA 按钮
  • 错误色
  • 危险状态
  • 背景
  • 文字
  • 表单
  • 品牌
  • 无障碍
在 UI 中查看红色

常见问题

红色象征能量、激情、力量、行动和突出性。根据语境,也可代表紧迫、危险或警告。

红色与白色、黑色、灰色、海军蓝、米色、象牙色、橄榄绿和金色搭配尤其出色。

其互补色位于蓝绿或青色范围,形成色轮上最强的对比之一。

用于 CTA 按钮、促销、重要消息、错误指示、品牌以及需要快速吸引注意力的元素。

相关颜色

相关工具