CSS提供多种颜色格式。它们产生相同的颜色——选择取决于可读性和是否需要透明度。
css
{ : red; }
{ : ; }
{ : ; }
{ : ( ); }
{ : ( / ); }
{ : ( ); }
{ : ( / ); }
HSL将颜色描述为Hue（色轮上0–360°）、Saturation和Lightness——这与人们对颜色的思考方式相对应，使变化直观：
:root { --brand-h: 220; }
.primary { background: hsl(var(--brand-h) 80% 50%); }
.primary-light { background: hsl(var(--brand-h) 80% 70%); } /* just raise lightness */
.primary-dark { background: hsl(var(--brand-h) 80% 30%); } /* just lower it */
生成更浅/更深的阴影很简单——只需改变一个数字。使用hex或rgb做到这一点需要重新计算所有通道。
background: rgb(0 0 0 / 0.5); /* 50% transparent black — for overlays */
/ alpha语法（0 = 透明，1 = 不透明）是创建半透明颜色的方法，对叠加层和阴影很有用。（注意：元素上的opacity使整个元素褪色，包括子元素——alpha颜色只使该颜色褪色。）
color: oklch(70% 0.15 220); /* perceptually-uniform; better for color systems */
了解这些格式可以让你选择正确的工具：一次性颜色使用hex/rgb，设计系统使用HSL/OKLCH（简单、直观的阴影变化），以及透明度使用/ alpha语法。
HSL特别是使构建一致、可主题化的调色板变得容易得多。