教程
Step-by-step tutorials applying color science concepts to real-world design and development tasks.
使用 Next.js 和 Satori 生成彩色 OG 图片
使用 Next.js 和 Satori 动态生成 Open Graph 图片。创建支持渐变、品牌色和响应式设计的颜色感知型 OG 模板。
已更新 二月 24, 2026
CSS 自定义属性构建动态颜色系统
学习如何使用 CSS 自定义属性构建可维护、可主题化的颜色系统。涵盖变量、亮/暗色模式以及通过 JavaScript 实现运行时颜色更改。
已更新 二月 18, 2026
Tailwind CSS 颜色：完整色阶系统指南
全面掌握 Tailwind CSS 的颜色系统：默认调色板、50-950 色阶命名规范、在配置中自定义颜色，以及 Tailwind v4 中全新的 CSS 变量方案。
已更新 二月 11, 2026
实现深色模式：开发者完整指南
学习如何使用 CSS 自定义属性、prefers-color-scheme、JavaScript 切换及正确的配色适配策略，为任意 Web 项目实现深色模式。
已更新 二月 04, 2026
从零开始构建颜色选择器 Web Component
将颜色选择器构建为可访问的 Web Component。使用 Shadow DOM 实现 canvas 渲染、色相滑块、Alpha 通道和自定义事件。
已更新 二月 02, 2026
CSS color-mix()：在浏览器中原生混合颜色
学习 CSS color-mix()，在浏览器中原生混合颜色。掌握语法、色彩空间、实际用例，无需 JavaScript 即可创建动态调色板。
已更新 一月 31, 2026
色域详解：sRGB、P3 与 Rec. 2020
全面理解色域——sRGB、Display P3 与 Rec. 2020——以及如何在现代显示器上使用 CSS 宽色域颜色与 @media (color-gamut)。包含实用示例。
已更新 一月 28, 2026
CSS 颜色函数：rgb()、hsl()、oklch() 对比
对比所有 CSS 颜色函数——rgb()、rgba()、hsl()、hsla()、lab()、lch()、oklch() 和 color-mix()。了解各自的适用场景、用法以及 2026 年的浏览器支持情况。
已更新 一月 22, 2026
感知色彩空间：Lab、LCH、Oklab、OKLCH
深入了解感知均匀色彩空间——CIE Lab、LCH、Oklab 和 OKLCH。学习每个色彩空间的设计原理、优势场景，以及在 CSS 和设计工作中的选用建议。
已更新 一月 22, 2026
在 Figma 自动布局组件中使用颜色令牌
构建基于颜色令牌架构的 Figma 自动布局组件。学习变量绑定、响应式令牌、主题变体和开发者交接的最佳实践。
已更新 一月 15, 2026
颜色打样：确保印刷颜色的准确性
学习软打样、硬打样和印刷机打样技术，确保从屏幕到最终输出的准确印刷颜色还原。
已更新 一月 13, 2026
网页设计师的 CMYK 指南：当印刷遇见屏幕
承接印刷项目的网页设计师需要了解 CMYK。学习色域差异、安全的 RGB 转 CMYK 策略、印刷打样流程和常见陷阱。
已更新 一月 12, 2026
纸张如何影响色彩：承印材料与印刷质量
了解纸张类型、涂布方式和克重如何影响印刷色彩。掌握铜版纸、非铜版纸和特种纸之间的差异，以实现精确的色彩还原。
已更新 一月 09, 2026
印刷设计中的烫金与金属色彩
了解烫金技术、金属油墨选项、金银箔选择及高端印刷材料的设计注意事项。
已更新 一月 08, 2026
多品牌色彩架构：单一代码库，多套主题
使用 CSS 自定义属性和设计令牌构建多品牌色彩架构。从单一代码库实现白标主题支持，并整合 Tailwind。
已更新 一月 06, 2026
3D 与 WebGL 中的色彩：线性色彩空间与 PBR
理解 3D 渲染中的色彩——sRGB 与线性 RGB 的对比、伽马校正、基于物理的渲染颜色、Three.js 色彩管理，以及 Web 3D 中的 HDR。
已更新 一月 02, 2026
数据叙事中的色彩：超越默认图表配色
掌握数据叙事中的色彩运用，告别默认图表配色。学习顺序型、发散型与分类型调色板，数据可视化的无障碍设计，以及 D3/Chart.js 色阶配置方法。
已更新 十二月 29, 2025
CSS 颜色动画：过渡与关键帧
掌握 CSS 颜色动画技术，包括过渡、关键帧动画、HSL 色相旋转、OKLCH 感知均匀插值以及性能优化最佳实践。
已更新 十二月 26, 2025
CSS light-dark() 函数：原生主题切换
使用 CSS light-dark() 实现原生主题切换。用一个 CSS 函数替代 JavaScript 切换和媒体查询，轻松处理亮色和深色模式颜色。
已更新 十二月 24, 2025
RGB 颜色模型：屏幕如何显示颜色
深入了解 RGB 颜色模型的工作原理——红、绿、蓝光的混合方式、0–255 的范围、CSS rgb() 函数，以及为什么屏幕能显示1670万种颜色。
已更新 十二月 20, 2025
色彩管理工作流程：从屏幕到印刷
掌握从显示器校准到印刷打样的色彩管理。了解 ICC 配置文件、软打样与一致工作流程如何确保从屏幕到印刷品的颜色精准还原。
已更新 十二月 14, 2025
为设计系统构建色彩系统
学习如何为设计系统构建系统化的颜色架构，涵盖命名规范、色阶生成、语义令牌与实现模式。
已更新 十二月 09, 2025
设计颜色 API：颜色数据的 REST 接口
设计具有颜色转换、搜索、对比度检查和调色板生成功能的 RESTful 颜色 API。学习 Schema 设计与最佳实践。
已更新 十二月 06, 2025
SVG 颜色技术：填充、描边与渐变
全面掌握 SVG 颜色技术：fill 与 stroke 属性、线性与径向渐变、currentColor 关键字，以及基于 CSS 的 SVG 样式，助力现代 Web 开发。
已更新 十一月 29, 2025
60-30-10 法则：设计中的色彩比例
掌握设计中的 60-30-10 色彩法则。学习主色、辅色和强调色如何协同运作，附实际案例、十六进制代码以及打破规则的有效技巧。
已更新 十一月 24, 2025
色彩分色详解：印刷文件的制作准备
深入理解CMYK分色、专色版、补漏白与套准标记，掌握正确制作印刷文件所需的分色知识。
已更新 十一月 21, 2025
HSL 与 HSV：该用哪种颜色模型？
了解 HSL 与 HSV 颜色模型的区别、各自适用于 Web 开发或颜色选择器的场景，以及两者与 CSS 颜色函数的比较。
已更新 十一月 19, 2025
语义色彩系统：按用途而非色相命名颜色
构建以用途命名颜色（成功、警告、错误）而非色相的语义色彩系统，学习令牌架构以及在 CSS 和 Tailwind 中的实现方式。
已更新 十一月 14, 2025
CSS 相对颜色语法：动态变换任意颜色
掌握 CSS 相对颜色语法，动态变换颜色。直接在样式表中调整色相、饱和度、亮度和 Alpha 通道。
已更新 十一月 10, 2025
为高对比度模式设计：Windows、macOS 与 Web
了解如何为 Windows、macOS 和 Web 的高对比度模式进行设计。学习强制颜色 CSS、系统颜色关键字、测试策略及常见陷阱的规避方法。
已更新 十一月 06, 2025
十六进制颜色代码详解：完整指南
从零掌握十六进制颜色代码。了解 #RRGGBB 的含义、如何读取任意十六进制值、简写表示法、透明度通道，以及如何在不同格式之间进行转换。
已更新 十月 29, 2025
生成艺术中的色彩：构建美丽调色板的算法
通过 HSL 螺旋、噪声调色板、黄金比例采样和 p5.js 色彩算法，在生成艺术中创造出美丽的程序化美学色彩。
已更新 十月 26, 2025
React 动态颜色主题：超越 CSS 变量
使用 CSS 变量、Context Provider 和 Tailwind CSS 在 React 中实现动态颜色主题。构建支持运行时颜色生成的用户自定义主题系统。
已更新 十月 23, 2025
Pantone 配色系统详解：设计师指南
了解 Pantone 配色系统的运作原理、铜版与非铜版色册的区别、专色与印刷色，以及 Pantone 转十六进制换算的局限性。
已更新 十月 19, 2025
超越对比度的无障碍设计：包容性设计中的颜色
颜色无障碍远不止对比度比率。了解 WCAG 的'不仅凭颜色'原则、焦点指示器、错误状态以及色盲友好设计模式。
已更新 十月 17, 2025
丝网印刷色彩：设计师指南
掌握丝网印刷色彩技术，包括色彩分色、网点屏幕、专色油墨及丝网印刷物料的设计准备工作。
已更新 十月 14, 2025
CSS 颜色插值：为何 OKLCH 更胜一筹
CSS 颜色插值决定了渐变和 color-mix() 混合颜色的方式。了解为何 OKLCH 能产生鲜艳、感知均匀的结果，而 RGB 和 HSL 却力有不逮。
已更新 十月 12, 2025
网页开发者的色彩无障碍检查清单
一份完整的网页开发者色彩无障碍检查清单，涵盖 WCAG 对比度比率、单纯依赖色彩、焦点指示器、测试工具和自动化检查。
已更新 十月 07, 2025
JavaScript 颜色操作：库与技术
掌握 JavaScript 颜色操作，使用 chroma.js、culori 和 tinycolor2。以编程方式解析、转换和生成颜色，构建优秀的 Web 应用。
已更新 十月 02, 2025
Web 动画中的颜色：GSAP、Framer Motion 与 CSS
掌握 CSS 过渡、GSAP 和 Framer Motion 中的颜色动画技术。学习 OKLCH 插值、关键帧技巧与性能优化方法。
已更新 九月 29, 2025
专色与印刷色：印刷色彩指南
了解专色与 CMYK 印刷色的区别、各自适用的场景、对印刷成本的影响，以及如何为每种印刷方式正确准备文件。
已更新 九月 27, 2025
颜色对比度算法：WCAG 2 与 APCA 对比
深入了解 WCAG 2 相对亮度算法和 APCA（高级感知对比度算法）的计算原理。对比两者的结果差异，学习如何为无障碍设计选择合适的标准。
已更新 九月 25, 2025
SwiftUI 颜色系统：构建自适应调色板
在 SwiftUI 中构建自适应调色板。学习 Color 与 UIColor 的区别、资产目录颜色、动态深色模式颜色，以及无障碍颜色模式。
已更新 九月 19, 2025
颜色设计令牌：从 Figma 到代码
使用 Style Dictionary 将颜色设计令牌从 Figma 实现到生产代码。学习令牌命名、转换及多平台输出。
已更新 九月 12, 2025
CSS 与设计系统中的颜色命名规范
探索 CSS 命名颜色、使用自定义属性的语义命名、Tailwind 风格的刻度命名，以及在团队设计系统中管理颜色名称的最佳实践。
已更新 九月 06, 2025
电子邮件设计中的色彩：跨客户端的最佳实践
掌握跨 Outlook、Gmail 和 Apple Mail 的邮件色彩设计。学习安全策略、深色模式适配和内联样式要求，实现一致的视觉效果。
已更新 九月 05, 2025
React中的色彩主题：CSS变量与Context
使用CSS自定义属性和Context API在React中构建可扩展的色彩主题系统，涵盖主题架构、Tailwind CSS主题及多品牌策略。
已更新 九月 03, 2025
网页色彩性能：渐变、阴影与滤镜
优化网页色彩性能。了解渐变、box-shadow、CSS 滤镜和 backdrop-filter 如何影响渲染性能，以及如何进行 GPU 加速。
已更新 九月 01, 2025
响应式颜色：为不同屏幕适配颜色
了解颜色如何在不同显示器、色域和深色模式下呈现差异。使用 CSS 媒体查询和自定义属性构建适配任何屏幕的响应式颜色系统。
已更新 八月 31, 2025
标识色彩搭配：实现最佳可视性
了解最具可视性的标识色彩搭配、远距离可读性研究、ADA标识要求、LED显示屏注意事项，以及材质和光照如何影响标识色彩感知。
已更新 八月 30, 2025
如何选择品牌色彩：分步骤指南
一份帮助你选择能与受众产生共鸣的品牌色彩的分步骤指南。涵盖调研、行业分析、色彩心理学、组合测试与品牌规范文档化。
已更新 八月 29, 2025