CSS系列（46）-- Color Functions详解

前端技术探索系列：CSS Color Functions详解 🎨

致读者：探索颜色函数的艺术 👋

前端开发者们，

今天我们将深入探讨 CSS Color Functions，这个强大的颜色处理特性。

基础函数 🚀

颜色空间

css">/* 基础颜色空间 */
.color-spaces {/* RGB空间 */color: rgb(255 0 0);color: rgba(255 0 0 / 0.5);/* HSL空间 */color: hsl(0 100% 50%);color: hsla(0 100% 50% / 0.5);/* LAB空间 */color: lab(50% 50 0);/* LCH空间 */color: lch(50% 50 0);/* OKLAB空间 */color: oklab(50% 0 0);
}/* 颜色转换 */
.color-convert {--brand-color: #ff0000;background: color(var(--brand-color) space hsl);border-color: color(var(--brand-color) space lab);
}

颜色操作

css">/* 颜色修改 */
.color-modify {/* 亮度调整 */color: color-mix(in lch, var(--color) 80%, white);/* 饱和度调整 */color: color(var(--color) saturation(150%));/* 色相旋转 */color: color(var(--color) hue(+ 180deg));/* 透明度 */color: color(var(--color) alpha(50%));
}/* 颜色混合 */
.color-blend {/* 基础混合 */background: color-mix(in srgb, #ff0000 50%, #0000ff);/* 空间混合 */background: color-mix(in lch, var(--color-1), var(--color-2));/* 渐变混合 */background: linear-gradient(to right,color-mix(in lch, var(--start) 0%, var(--end)),color-mix(in lch, var(--start) 100%, var(--end)));
}

高级特性 🎯

动态颜色

css">/* 相对颜色 */
.dynamic-colors {/* 亮度相对调整 */--lighter: color-mix(in lch, var(--base) 80%, white);--darker: color-mix(in lch, var(--base) 80%, black);/* 对比度保证 */--text-color: color-contrast(var(--background-color)vswhite, black);/* 互补色 */--complement: color(var(--base) hue(+ 180deg));
}/* 颜色系统 */
.color-system {/* 主色调变体 */--primary-100: color-mix(in lch, var(--primary) 10%, white);--primary-200: color-mix(in lch, var(--primary) 20%, white);--primary-300: color-mix(in lch, var(--primary) 30%, white);--primary-400: color-mix(in lch, var(--primary) 40%, white);--primary-500: var(--primary);--primary-600: color-mix(in lch, var(--primary) 20%, black);--primary-700: color-mix(in lch, var(--primary) 40%, black);--primary-800: color-mix(in lch, var(--primary) 60%, black);--primary-900: color-mix(in lch, var(--primary) 80%, black);
}

主题系统

css">/* 主题定义 */
.theme-system {/* 亮色主题 */&[data-theme="light"] {--bg-color: oklch(98% 0 0);--text-color: oklch(20% 0 0);--primary-color: oklch(60% 0.2 250);/* 自动对比度调整 */--accent-color: color-contrast(var(--bg-color)vsoklch(60% 0.2 250),oklch(50% 0.2 250));}/* 暗色主题 */&[data-theme="dark"] {--bg-color: oklch(20% 0 0);--text-color: oklch(95% 0 0);--primary-color: oklch(70% 0.2 250);/* 自动对比度调整 */--accent-color: color-contrast(var(--bg-color)vsoklch(70% 0.2 250),oklch(80% 0.2 250));}
}

实际应用 💫

按钮组件

css">/* 按钮颜色系统 */
.button-system {/* 基础按钮 */--button-bg: var(--primary-color);--button-text: color-contrast(var(--button-bg)vswhite, black);--button-hover: color-mix(in lch, var(--button-bg) 90%, black);--button-active: color-mix(in lch, var(--button-bg) 80%, black);background: var(--button-bg);color: var(--button-text);&:hover {background: var(--button-hover);}&:active {background: var(--button-active);}
}

卡片阴影

css">/* 动态阴影 */
.card {--shadow-color: color-mix(in oklab,var(--primary-color) 30%,rgb(0 0 0 / 20%));box-shadow: 0 2px 4px color(var(--shadow-color) alpha(10%)),0 4px 8px color(var(--shadow-color) alpha(20%));&:hover {box-shadow: 0 4px 8px color(var(--shadow-color) alpha(15%)),0 8px 16px color(var(--shadow-color) alpha(25%));}
}

性能优化 ⚡

计算优化

css">/* 缓存颜色 */
.optimized {/* 预计算颜色 */--cached-color: color-mix(in lch, var(--base) 80%, white);/* 重用计算结果 */background: var(--cached-color);border-color: color(var(--cached-color) alpha(50%));
}/* 条件计算 */
@media (prefers-color-scheme: dark) {:root {/* 仅在需要时计算 */--theme-color: color-mix(in lch, var(--base) 60%, black);}
}