M

MLOG

中文

探索 CSS 相对颜色语法的强大功能，包括 `color-mix()`、`color-adjust()` 和 `color-contrast()` 等颜色操作函数，用于创建精致、易访问且全球一致的网页设计。

CSS 相对颜色语法：掌握颜色操作，打造全球化网页设计

在不断发展的网页开发领域中，CSS 持续突破其可能性边界，尤其是在颜色方面。对于旨在创造视觉引人入胜、易于访问且全球一致体验的设计师和开发者来说，CSS 相对颜色语法的引入标志着一个重大的飞跃。这套强大的新功能，特别是其颜色操作函数，使我们能够比以往任何时候都创建出更具动态性、可主题化和更复杂的调色板。

本综合指南将深入探讨 CSS 相对颜色语法的核心，重点关注 color-mix()、color-adjust()（尽管 color-adjust 已被弃用并由 color-mix 以更精细的控制所取代，我们仍将讨论它所代表的概念）和 color-contrast() 等函数的变革性能力。我们将探索这些工具如何彻底改变您的设计流程，使您能够打造出在不同情境和用户偏好下无缝适应的精美界面，同时保持可访问性和全球化的设计视角。

理解高级颜色操作的需求

在过去，CSS 中的颜色管理通常涉及静态定义。虽然 CSS 变量（自定义属性）提供了一定程度的灵活性，但复杂的颜色转换或基于上下文的动态调整通常很繁琐，需要大量的预处理或 JavaScript 干预。这些局限性在以下方面尤为明显：

CSS 相对颜色语法通过提供原生的、强大的工具直接在 CSS 中操作颜色，直接解决了这些挑战，为动态和响应式设计开辟了一个充满可能性的世界。

CSS 相对颜色语法简介

根据 CSS 颜色模块第 4 级的定义，相对颜色语法允许您基于另一种颜色来定义颜色，并使用特定函数调整其属性。这种方法对于创建可预测的颜色关系和确保颜色调整在整个设计系统中得到一致应用非常有益。

该语法通常遵循引用现有颜色然后应用转换的模式。虽然规范很广泛，但最具影响力的操作函数是：

我们将主要关注 color-mix()，因为它是该语法中被最广泛采用和实际应用的颜色操作函数。

color-mix()：颜色混合的主力军

color-mix() 可以说是相对颜色语法中最具革命性的函数。它允许您在指定的颜色空间中混合两种颜色，从而对结果颜色进行精细控制。

语法与用法

color-mix() 的基本语法是：

color-mix(<color-space>, <color1> <percentage1>, <color2> <percentage2>)

选择正确的颜色空间

颜色空间对于实现可预测且感知均匀的结果至关重要。不同的颜色空间以不同的方式表示颜色，在一个空间中混合可能会产生与在另一个空间中不同的视觉效果。

color-mix() 的实践示例

1. 创建主题化组件（例如，按钮）

假设您有一个主品牌色，并希望为悬停（hover）和激活（active）状态创建变体。使用 CSS 变量和 color-mix()，这变得非常简单。

场景：一个品牌使用鲜艳的蓝色，我们希望悬停时颜色稍暗，激活时颜色更暗。


:root {
  --brand-primary: #007bff; /* A vibrant blue */
}

.button {
  background-color: var(--brand-primary);
  color: white;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.button:hover {
  /* Darken the primary color by mixing with black */
  background-color: color-mix(in srgb, var(--brand-primary) 80%, black 20%);
}

.button:active {
  /* Further darken by mixing more with black */
  background-color: color-mix(in srgb, var(--brand-primary) 60%, black 40%);
}

全球化考量：这种方法非常适合全球品牌。只需设置一个 --brand-primary 变量，派生出的颜色就会随着品牌颜色的变化而自动调整，确保所有地区和产品实例的一致性。

2. 生成易于访问的颜色变体

确保文本和背景之间有足够的对比度对于可访问性至关重要。color-mix() 可以帮助创建背景颜色的较亮或较暗变体，以确保文本可读。

场景：我们有一个背景色，并希望确保放置在其上的文本保持可读。我们可以为覆盖元素创建略微去饱和或变暗的背景版本。


:root {
  --surface-color: #f0f8ff; /* AliceBlue */
}

.card {
  background-color: var(--surface-color);
  padding: 20px;
  border-radius: 8px;
}

.card-overlay {
  /* Create a slightly darker overlay for text */
  background-color: color-mix(in lch, var(--surface-color) 90%, black 10%);
  color: #333;
  padding: 15px;
  border-radius: 0 0 8px 8px;
}

.card-title {
  color: #000;
  font-weight: bold;
}

/* Example of ensuring text contrast */
.high-contrast-text {
  color: color-mix(in oklch, var(--surface-color) 10%, black 90%);
}

可访问性洞见：通过使用像 lch 或 oklch 这样的感知均匀颜色空间进行混合，您可以在调整亮度时获得更可预测的结果。例如，与黑色混合会增加暗度，与白色混合会增加亮度。我们可以系统地生成保持易读性的色调和色度。

3. 创建微妙的渐变

渐变可以增加深度和视觉趣味。color-mix() 简化了创建平滑颜色过渡的过程。


.hero-section {
  /* Blend a primary color with a slightly lighter, desaturated version */
  background: linear-gradient(
    to right,
    color-mix(in oklch, var(--brand-primary) 90%, white 10%),
    color-mix(in oklch, var(--brand-primary) 70%, hsl(210 50% 50%) 30%)
  );
  color: white;
  padding: 50px;
}

全球设计影响：在为全球受众设计时，微妙的渐变可以在不造成压倒性感觉的情况下增添一丝精致感。使用 oklch 可确保这些渐变在各种设备和显示技术上平滑渲染，尊重感官上的颜色差异。

4. 在 HSL 颜色空间中进行颜色操作

在 HSL 中混合对于调整特定的颜色分量非常有用。


:root {
  --accent-hue: 200;
  --accent-saturation: 80%;
  --accent-lightness: 50%;
}

.widget {
  background-color: hsl(
    var(--accent-hue),
    var(--accent-saturation),
    var(--accent-lightness)
  );
}

.widget:hover {
  /* Increase lightness and decrease saturation for hover */
  background-color: color-mix(
    in hsl,
    hsl(
      var(--accent-hue),
      var(--accent-saturation),
      var(--accent-lightness)
    ) 80%,
    hsl(var(--accent-hue), 50%, 70%) 20%
  );
}

洞见：虽然 HSL 混合对于亮度和饱和度很直观，但在混合色相时要小心，因为它有时可能导致意想不到的结果。对于对色相敏感的操作，通常首选 oklch。

color-contrast()：为可访问性提供未来保障

虽然 color-contrast() 仍然是一个实验性功能，尚未得到广泛支持，但它代表了 CSS 自动化可访问性的关键一步。其目的是允许开发者指定一个基础颜色和一系列候选颜色，然后让浏览器自动选择满足指定对比度的最佳候选颜色。

概念性用法

提议的语法可能如下所示：


.element {
  /* Select the best text color from the list for contrast against the background */
  color: color-contrast(var(--background-color) vs (#000, #fff, #333));

  /* Specify a minimum contrast ratio (e.g., WCAG AA for normal text is 4.5:1) */
  color: color-contrast(var(--background-color) vs (#000, #fff) AA);
}

对比度的重要性

WCAG（网页内容无障碍指南）为颜色对比度提供了明确的标准。例如：

color-contrast() 一旦实现，将自动化满足这些关键可访问性要求的过程，从而显著简化为每个人（无论其视觉能力如何）构建包容性界面的工作。

全球可访问性：可访问性是一个普遍关注的问题。像 color-contrast() 这样的功能可确保网页内容能被尽可能广泛的受众使用，超越了视觉感知和能力上的文化和国籍差异。这对于用户需求高度多样化的国际网站尤其重要。

结合 CSS 变量利用相对颜色语法

当与 CSS 变量（自定义属性）结合使用时，相对颜色语法的真正威力才得以释放。这种协同作用可以实现高度动态和可主题化的设计系统。

建立全球颜色主题

您可以定义一组核心品牌颜色，然后从这些基础值派生出所有其他的 UI 颜色。


:root {
  /* Core Brand Colors */
  --brand-primary-base: #4A90E2; /* A pleasing blue */
  --brand-secondary-base: #50E3C2; /* A vibrant teal */

  /* Derived Colors for UI Elements */
  --primary-500: var(--brand-primary-base);
  --primary-600: color-mix(in oklch, var(--brand-primary-base) 85%, black 15%); /* Darker variant */
  --primary-400: color-mix(in oklch, var(--brand-primary-base) 95%, white 5%);  /* Lighter variant */

  --secondary-500: var(--brand-secondary-base);
  --secondary-600: color-mix(in oklch, var(--brand-secondary-base) 80%, black 20%);

  /* Neutral Palette */
  --neutral-900: #1a1a1a;
  --neutral-800: #333333;
  --neutral-700: #555555;
  --neutral-50: #f9f9f9;

  /* Derived Text Colors for Accessibility */
  --text-on-primary: white;
  --text-on-secondary: var(--neutral-900);
  --text-on-surface: var(--neutral-800);
  --text-on-dark: var(--neutral-50);
}

/* Example Usage */
.button-primary {
  background-color: var(--primary-500);
  color: var(--text-on-primary);
}

.button-primary:hover {
  background-color: var(--primary-600);
}

.card-background {
  background-color: var(--neutral-50);
  color: var(--text-on-surface);
}

设计系统优势：这种结构化的方法确保您的整个颜色系统都建立在明确定义的基础颜色之上。对基础颜色的任何更改都会自动传播到所有派生颜色，保持完美的一致性。这对于在复杂产品上工作的庞大国际团队来说是无价的。

使用相对颜色语法实现深色模式

创建深色模式可以像重新定义基础 CSS 变量一样简单。


/* Default (Light Mode) Styles */
:root {
  --background-color: white;
  --text-color: #333;
  --card-background: #f9f9f9;
  --primary-color: #007bff;
}

/* Dark Mode Styles */
@media (prefers-color-scheme: dark) {
  :root {
    --background-color: #1a1a1a;
    --text-color: #f0f0f0;
    --card-background: #333333;
    /* Dark mode primary might be a slightly desaturated lighter blue */
    --primary-color: color-mix(in oklch, #007bff 70%, white 30%); 
  }

  /* Specific element overrides if needed */
  .dark-mode-specific-element {
    background-color: color-mix(in srgb, var(--primary-color) 50%, black);
  }
}

/* Applying styles */
body {
  background-color: var(--background-color);
  color: var(--text-color);
}

.card {
  background-color: var(--card-background);
}

.button-primary {
  background-color: var(--primary-color);
}

全球用户偏好：尊重用户对深色模式的偏好对于用户体验至关重要。这种方法允许全球用户以他们偏好的视觉模式体验您的网站，增强舒适度并减少眼部疲劳，尤其是在许多文化和时区中常见的低光照条件下。

全球化应用的最佳实践

在为全球受众实施相对颜色语法时，请考虑以下几点：

浏览器支持

包括 color-mix() 在内的相对颜色语法，正日益受到现代浏览器的支持。根据最近的更新，Chrome、Firefox、Safari 和 Edge 等主流浏览器都提供了良好的支持。

关于支持的关键点：

备用方案示例：


.button {
  /* Fallback for older browsers */
  background-color: #007bff;
  /* Modern syntax using color-mix */
  background-color: color-mix(in srgb, #007bff 80%, black 20%);
}

通过提供备用方案，您可以确保您的网站对所有用户保持功能正常和视觉一致，无论他们的浏览器版本如何。

结论

以功能多样的 color-mix() 函数为首的 CSS 相对颜色语法，为我们在网页上处理颜色的方式带来了范式转变。它赋予设计师和开发者前所未有的控制力，使得创建动态、可主题化且易于访问的用户界面成为可能。通过将 CSS 变量与这些新的颜色操作功能相结合，您可以构建复杂的、能够有效扩展并无缝适应用户偏好和全球需求的设计系统。

随着网络技术的不断进步，拥抱这些现代 CSS 特性将是为全球受众提供高质量、引人入胜和包容性数字体验的关键。立即开始尝试 color-mix()，在您的网页项目中释放颜色的全部潜力。

可行的见解：

网页颜色的未来已至，它比以往任何时候都更加强大和灵活。