正在加载...

CSS 颜色值

命名色够入门。品牌和设计需要精确数值——特定的青绿、柔和的叠层、可以微调一点的色相。这些来自颜色值格式：hex、rgb() / rgba() 与 hsl() / hsla()。

什么是颜色值？

颜色值是写在接受颜色的属性后面的内容——例如 color: 或稍后的 background-color:。还是同一个属性；只是更丰富的写法。命名关键字也算值。今天加上你每周都会用的数值格式。

格式一览

按任务选格式。第一天不必会全部语法——先认地图，再练日常三种。

📊 CSS 颜色值格式

格式 示例 最适合
命名 teal 快速演示、教学、草稿
Hex #0f766e 设计工具、品牌令牌、从 Figma 粘贴
rgb() / rgba() rgb(15 118 110) / rgba(15, 118, 110, 0.85) 按通道思考、用 alpha 做透明
hsl() / hsla() hsl(174 77% 25%) 不离开色系地调色相/明度

Hex 颜色

Hex 值以 # 开头，后接十六进制数字（0–9、a–f）。常见形式：六位 #rrggbb（完整）和三位 #rgb（简写——每位翻倍）。大小写无所谓。

文字与柔和提示上的 Hex

css
CSS Code 
h1 {
color: #0f172a;
}

.note {
color: #0f766e;
}

怎么读 #0f766e？

成对是红、绿、蓝：0f / 76 / 6e。设计应用通常导出这串——原样贴进 CSS，并保留 #。

rgb() 与 rgba()

rgb() 混合红、绿、蓝通道，范围 0–255（现代语法也可用百分比）。用 rgba() 或第四个值加 alpha，让颜色半透明。

RGB 通道与 RGBA 淡化

css
CSS Code 
.lead {
color: rgb(51, 65, 85);
}

.overlay-label {
color: rgba(15, 118, 110, 0.9);
}

一句话讲 alpha

Alpha 是该颜色的透明度——1（或 100%）不透明；更低会露出后面的内容。这不等于把元素从布局里拿掉。

用 hsl() 想色相

hsl() 使用色相（色环角度）、饱和度（%）和明度（%）。想要「同一家族、稍亮一点」又不必手算 hex 时很方便。

可微调的 HSL 强调

css
CSS Code 
.badge {
color: hsl(174, 77%, 28%);
border: 2px solid hsl(174, 77%, 20%);
}

微调习惯

保持色相，提高明度让文字更安静，或降低明度让标题更有力。饱和度控制颜色看起来有多鲜艳。

该用哪种格式？

  • Hex — 从设计文件或品牌色板复制时的默认
  • rgb() / rgba() — 关心通道或需要快速 alpha 时
  • hsl() — 探索或调整相关色系时
  • 命名 — 草图与教学演示仍然合适
    今天它们在 color 上都有效；之后还会用在背景上。

自己动手

  1. 页面含 h1、.lead、.note。
  2. 标题用 hex（#0f172a），lead 用 rgb(51, 65, 85)，note 用 #0f766e。
  3. 给 .badge 用 hsl(174, 77%, 28%)，以及同色相更深的 HSL 边框。
  4. 用 rgba(15, 118, 110, 0.75) 柔化标签——应比 1 更不实心。
  5. 可选：仅当数字对真能翻倍时用短 hex；否则保留六位。

常见错误

  • hex 前忘记 #（单独的 0f766e 不是合法颜色）
  • hex 里出现 a–f 以外的字母
  • RGB 通道超出 0–255（或单位混用混乱）
  • 以为 alpha 会像 display: none 一样拿走布局空间
  • 把每种格式当成层叠里「更特异」——格式不改变 specificity

小结

  • 颜色值是同一批接受颜色的属性的写法格式
  • Hex 是从设计粘贴的日常格式
  • rgb() / rgba() 露出通道与 alpha
  • hsl() 帮你按色相、饱和度、明度思考
  • 命名色仍然有效；按任务选格式
  • 练 hex 加一种实用格式（rgba 或 hsl），直到两者都自然

🧠 测试您的知识

准备开始

测试您的知识

通过这个互动测验挑战自己，看看你对这个主题的理解程度如何

❓
7
问题
🎯
70%
及格要求
♾️
∞
时间
🔄
∞
尝试次数

📝 说明

  • 仔细阅读每个问题
  • 为每个问题选择最佳答案
  • 您可以随时重新参加测验
  • 您的进度将显示在顶部
主题 1 的 1
Css 教程