当前位置：首页 > article >正文

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

article 2025/1/4 4:39:36

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

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

前端开发者们，

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

基础函数 🚀

颜色空间

/* 基础颜色空间 */
.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);
}

颜色操作

/* 颜色修改 */
.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))
    );
}

高级特性 🎯

动态颜色

/* 相对颜色 */
.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)
        vs
        white, 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);
}

主题系统

/* 主题定义 */
.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)
            vs
            oklch(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)
            vs
            oklch(70% 0.2 250),
            oklch(80% 0.2 250)
        );
    }
}

实际应用 💫

按钮组件

/* 按钮颜色系统 */
.button-system {
    /* 基础按钮 */
    --button-bg: var(--primary-color);
    --button-text: color-contrast(
        var(--button-bg)
        vs
        white, 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);
    }
}

卡片阴影

/* 动态阴影 */
.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%));
    }
}

性能优化 ⚡

计算优化

/* 缓存颜色 */
.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);
    }
}