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特别是使构建一致、可主题化的调色板变得容易得多。