freeCodeCamp 视觉设计教程：理解三色原理与色彩搭配

汤力赛Frederica

于 2025-05-30 09:00:36 发布

阅读量406

点赞数 5

本文链接：https://blog.csdn.net/gitblog_00836/article/details/148322962

版权

freeCodeCamp 视觉设计教程：理解三色原理与色彩搭配

freeCodeCamp freeCodeCamp.org的开源代码库和课程。免费学习编程。项目地址: https://gitcode.com/gh_mirrors/fr/freeCodeCamp

什么是三色（Tertiary Colors）？

在视觉设计中，理解色彩原理是创建美观界面的基础。三色是由原色（Primary Colors）和相邻的二次色（Secondary Colors）混合而成的颜色。在RGB色彩模型中：

原色包括红（Red）、绿（Green）、蓝（Blue）
二次色由两种原色混合而成：青色（Cyan）、品红（Magenta）、黄色（Yellow）
三色则是原色与相邻二次色的混合，例如红色+黄色=橙色

RGB色彩模型基础

现代数字设备通过组合不同强度的红、绿、蓝光来呈现各种颜色，这就是RGB加色模型：

红色(R) + 绿色(G) = 黄色(Yellow)
红色(R) + 蓝色(B) = 品红(Magenta)
绿色(G) + 蓝色(B) = 青色(Cyan)

三色在色轮中的位置

完整的RGB色轮包含12种颜色：

3种原色
3种二次色
6种三色（每种原色与相邻二次色的组合）

例如：

红色(原色) + 黄色(二次色) = 橙色(三色)
绿色(原色) + 青色(二次色) = 蓝绿色(三色)

分补色配色方案

分补色方案(Split-Complementary)是一种实用的配色方法：

选择一个基色
找到其补色（色轮对面的颜色）
使用补色两侧相邻的两种颜色

这种方案能提供良好的视觉对比，同时比直接使用互补色更柔和。

实践练习

让我们通过CSS实现一个分补色方案的示例：

<style>
  .orange {
    background-color: #FF7F00; /* 橙色 */
  }
  
  .cyan {
    background-color: #00FFFF; /* 青色 */
  }
  
  .raspberry {
    background-color: #FF007F; /* 树莓色 */
  }
</style>

<div class="orange"></div>
<div class="cyan"></div>
<div class="raspberry"></div>