首页 › CSS › CSS 基础 › 颜色与单位

CSS 颜色

颜色表示法

/* 命名颜色（仅 147 种） */
.red { color: red; }
.blue { color: blue; }
.white { color: white; }

/* HEX（十六进制） */
.hex { color: #ff6600; }          /* #RRGGBB */
.hex-short { color: #f60; }       /* 缩写 #RGB */
.hex-alpha { color: #ff660080; }  /* #RRGGBBAA（CSS3）*/

/* rgb() / rgba() */
.rgb { color: rgb(255, 102, 0); }
.rgba { color: rgba(255, 102, 0, 0.5); }

/* hsl() / hsla() */
.hsl { color: hsl(24, 100%, 50%); }      /* 色相/饱和度/亮度 */
.hsla { color: hsla(24, 100%, 50%, 0.5); }

/* H: 色相 0-360（红=0, 绿=120, 蓝=240）*/
/* S: 饱和度 0%-100%（0=灰, 100=饱和）*/
/* L: 亮度 0%-100%（0=黑, 50=正常, 100=白）*/

CSS3 新增颜色函数

/* 相对颜色（CSS Color 5） */
.darker {
  --primary: #1890ff;
  background: rgb(from var(--primary) calc(r - 30) g b);
  /* 基于已有颜色进行通道运算 */
}

/* oklch() 更均匀的色空间 */
.oklch {
  color: oklch(0.6 0.2 240);  /* 亮度/色度/色相 */
}

选择建议

场景	推荐格式
品牌色	HEX（#1890ff）
需要透明度	rgba() 或 hsla()
调色板生成	hsl()（直观调节色相/亮度）
主题变量	存储为 CSS 变量

CSS 单位

绝对单位

/* 绝对单位（不随其他因素变化） */
.px { font-size: 16px; }      /* 像素 → 最常用 */
.pt { font-size: 12pt; }      /* 点（1pt = 1/72 英寸）打印 */
.cm { width: 5cm; }           /* 厘米（打印） */
.in { width: 2in; }           /* 英寸（打印） */

相对单位

/* 字体相对单位 */
.em { font-size: 1.5em; }       /* 相对于父元素字体大小 */
.rem { font-size: 1.5rem; }     /* 相对于根元素（html）字体大小 */
.ch { width: 20ch; }            /* 相对于 "0" 字符宽度 */
.ex { height: 1ex; }            /* 相对于 x-height */

/* 视口相对单位 */
.vw { width: 50vw; }            /* 视口宽度的 50% */
.vh { height: 100vh; }          /* 视口高度的 100% */
.vmin { width: 50vmin; }        /* vw 和 vh 中较小的 */
.vmax { width: 50vmax; }        /* vw 和 vh 中较大的 */

/* CSS3 新增视口单位 */
.dvh { height: 100dvh; }        /* dynamic viewport height（考虑地址栏） */
.svh { height: 100svh; }        /* small viewport height（最小可能） */
.lvh { height: 100lvh; }        /* large viewport height（最大可能） */

百分比 %

.percent {
  width: 50%;           /* 相对于父元素内容区宽度 */
  font-size: 150%;      /* 相对于父元素字体大小 */
  padding-top: 10%;     /* 相对于父元素**宽度** */
  margin-left: 10%;     /* 相对于父元素宽度 */
  line-height: 1.5;     /* 无单位，相对于自身字体大小 */
}

单位选择指南

场景	推荐单位
根字体大小	16px
组件内字体	rem（相对于根）
需要缩放	em（相对于父字体）
全屏/视口适配	vw / vh / dvh
布局间距	rem 或 px
响应式排版	clamp()

calc() 基础

calc() 允许混合单位计算：

.calc-demo {
  width: calc(100% - 40px);      /* 混合单位 */
  height: calc(100vh - 80px);    /* 视口减去固定值 */
  font-size: calc(1rem + 0.5vw); /* 响应式字体 */
}

小结

颜色格式	示例	适用
HEX	#1890ff	品牌色
rgb()	rgb(24,144,255)	需透明度时用 rgba
hsl()	hsl(210,100%,50%)	调色板
单位	说明
px	像素	固定尺寸
rem	根元素字体倍数	排版
em	父级字体倍数	组件缩放
%	百分比	自适应
vw / vh	视口百分比	全屏适配

上一节：层叠、继承与盒模型 下一节：Flexbox 弹性布局

贡献者: 布欧-Lewyon