Design

渐变

在定义空间内两种或多种颜色之间平滑、连续的过渡效果。

Gradients can be linear (transitioning along a straight line), radial (transitioning outward from a center point), or conic (transitioning around a center point). In CSS, they are implemented as background-image values using linear-gradient(), radial-gradient(), and conic-gradient() functions. Gradients add depth, dimension, and visual interest to designs. Modern design trends favor subtle gradients for backgrounds and bold, multicolor gradients for branding (as seen with Instagram and Firefox). When creating gradients between certain color pairs, desaturated or muddy midpoints can occur; using OKLCH interpolation helps maintain vivid colors throughout the transition.

立即体验

调色板生成器

使用互补色、类似色、三角配色和分裂互补配色方案生成和谐的调色板。

色阶生成器

从任意基础色生成Tailwind CSS风格的色阶（50-950），适用于设计系统。

相关文章

CSS color-mix()：在浏览器中原生混合颜色

学习 CSS color-mix()，在浏览器中原生混合颜色。掌握语法、色彩空间、实际用例，无需 JavaScript 即可创建动态调色板。

从零开始构建颜色选择器 Web Component

将颜色选择器构建为可访问的 Web Component。使用 Shadow DOM 实现 canvas 渲染、色相滑块、Alpha 通道和自定义事件。

感知色彩空间：Lab、LCH、Oklab、OKLCH

深入了解感知均匀色彩空间——CIE Lab、LCH、Oklab 和 OKLCH。学习每个色彩空间的设计原理、优势场景，以及在 CSS 和设计工作中的选用建议。

数据叙事中的色彩：超越默认图表配色

掌握数据叙事中的色彩运用，告别默认图表配色。学习顺序型、发散型与分类型调色板，数据可视化的无障碍设计，以及 D3/Chart.js 色阶配置方法。

使用 Next.js 和 Satori 生成彩色 OG 图片

使用 Next.js 和 Satori 动态生成 Open Graph 图片。创建支持渐变、品牌色和响应式设计的颜色感知型 OG 模板。

色彩分色详解：印刷文件的制作准备

深入理解CMYK分色、专色版、补漏白与套准标记，掌握正确制作印刷文件所需的分色知识。