#优质博文 #CSS #前端 #color #新特性
学到很多，比如 rgb 可以不加 a。
A pragmatic guide to modern CSS colours - part one

AI 摘要：本文系统介绍了现代 CSS 颜色系统的演变与新特性，重点包括新版 rgb() 与 hsl() 的语法变化、相对颜色（relative colours）的用法、改进的亮暗主题处理方式、颜色空间（colour spaces）的应用，以及应对更广色域设备的新工具。作者旨在帮助不专注设计的开发者高效掌握现代 CSS 色彩特性，从而提高代码一致性与灵活性。

[以下是方便搜索索引的大纲(AI 生成)，请读原文]

1. 现代 CSS 写法演进
• 从传统的十六进制与函数写法过渡到更灵活的空间分隔语法
• 新版 rgb() 与 hsl() 可直接包含透明度通道，无需“a”版本
• / 用于区分主色值与 alpha 通道，提高一致性
• 空格分隔语法引入新规范以支持更多色彩函数，如 oklch()、hwb()、color()

2. 相对颜色（Relative Colours）

• 允许从已有颜色生成新颜色，通过语法 rgb(from #ff0000 r g b) 实现
• 可结合自定义属性（CSS variables）动态调整不透明度或亮度
• 帮助快速生成同系浅色、深色变化，便于主题一致管理
• 可用于构造组件风格如提示框（toast），只需修改基础色

3. 改进的亮暗主题（Theming）
• 传统方法需在媒体查询与主题类中重复定义变量
• light-dark() 函数允许在单条声明中同时定义明亮与暗色配色
• 结合 color-scheme 可根据用户系统偏好自动切换
• 支持组件级别的独立 color-scheme 控制，增强设计灵活度

4. 颜色空间（Colour Spaces）
• 颜色空间决定浏览器如何计算与过渡颜色
• 支持在 linear-gradient() 中指定颜色空间，如 oklch、lab、hwb
• 新空间可避免传统 sRGB 中的颜色过渡失真
• “longer hue” 参数用于控制渐变方向，生成更自然或彩虹式渐变

5. 扩展色域与精准配色
• 介绍 color() 函数与广色域（wide gamut）空间 display-p3 的使用场景
• 适用于与品牌色或印刷标准（如 Pantone）匹配需求
• 浏览器会自动降级不支持的色域，保证兼容性

6. 展望与总结
• CSS 色彩能力远超以往，包括即将介绍的 color-mix()、oklch() 等函数
• 开发者无需成为设计师，也能直接在代码层面进行色彩管理与调和

author Kevin Powell

Piccalilli

A pragmatic guide to modern CSS colours - part one

Whether you've got a firm grasp on modern CSS colour capabilities, or you're thinking 'I struggle to understand why I should use modern CSS colours at all', then the first part of this article series, by Kevin Powell, is for you.

#优质博文 #前端 #design #色板 #tools #CSS #color
evilmartians/harmonizer

AI 摘要：Harmonizer 是 Evil Martians 推出的色彩工具，可在 Figma 插件或 Web 界面中使用，利用 OKLCH 与 APCA 生成具一致亮度与对比度的配色方案。该工具通过定义光度等级、色相与背景上下文，自动生成可在浅色与深色模式中保持视觉一致的色彩体系。支持导出多种开发格式（Tailwind、CSS 变量、JSON）

[以下是方便搜索索引的大纲(AI 生成)，请读原文]

1. 工具介绍与设计初衷
• Harmonizer 旨在解决现有设计系统中颜色等级不一致、对比度难以统一、浅色/深色模式映射不对称等问题。
• 利用感知一致的亮度（lightness）与对比（contrast），确保 UI 元素间的视觉可靠性与可访问性。

2. 工作原理
• 继承 Figma 文档的色域设置（P3 或 sRGB）。
• 用户可定义色阶（如 100–900）及相应光度步进。
• 支持设定对比度计算方向（前景/背景）及背景上下文（白、黑或自定义）。
• 一键生成 Palette，自动产生色彩预览与变量。

3. 核心特性
• 可调色彩配置文件（P3 或 sRGB）。
• 基于 OKLCH 实现感知一致的色度 (chroma)。
• 使用 APCA 或 WCAG 对比计算公式，提升屏幕可读性。
• 支持自定义背景颜色、自动识别现有调色板、自动更新样式变量。
• 提供可共享的设定文件（Config）与开发导出（Tailwind、CSS、JSON）。

4. 技术背景与实现细节
• 使用 PNPM 管理 monorepo，包含 core、web、figma-plugin 三个子包。
• 主要命令包括安装依赖、构建、预览、格式化及类型检查。
• 借助 Spred 响应式库与 React 实现状态管理。
• 色彩计算逻辑在 Web Worker 中执行，避免阻塞主线程。
• 通过 CSS 变量动态控制外观，实现全局响应式配色。

5. 设计理论与算法基础
• OKLCH：提供感知上平衡的亮度与色度模型。
• APCA：面向自发光显示器的现代对比度算法。
• APCACH：自定义计算器，将上述两种算法融合以生成高度可访问的色彩。

author Evil Martians

GitHub

GitHub - evilmartians/harmonizer

Contribute to evilmartians/harmonizer development by creating an account on GitHub.

#配色 #color #设计
配色仙人

金属渐变研究

https://fixupx.com/n_seitan/status/1972235612473401373

#优质博文 #CSS #动画 #color #前端
Color Shifting in CSS • Josh W. Comeau

AI 摘要：本文通过构建粒子效果的案例，揭示了在 CSS 中实现颜色动态变化时会遇到的限制（如 RGB 插值导致灰色过渡），并提出利用 CSS filter 中的 hue-rotate() 作为更佳的解决方案。同时，作者还演示了如何使用随机性和闪烁效果（twinkling）增强动画的自然感受，最后预告了即将上线的动画课程。

[以下是方便搜索索引的大纲(AI 生成)，请读原文]

1. 引言：粒子特效与颜色变化的重要性
• 粒子从随机颜色开始，逐渐淡出时改变色相 (hue)
• 动画核心在于“颜色渐变”而非单一随机取色

2. 颜色生成的方式
• 使用 RGB 随机值生成色彩 → 结果缺乏统一风格
• 使用 HSL 固定饱和度和亮度，只在色相上变化 → 形成更加统一的色调效果

3. 从单一颜色到颜色过渡
• 初步尝试利用 HSL 渐变 → 浏览器实际以 RGB 插值，导致过渡中间产生灰度色
• HSL 的 0° 与 360° 等效，无法实现完整色相轮动画

4. CSS 渲染限制：RGB 插值问题
• color-transition 过程中浏览器默认以 RGB 渠道计算
• 中间值往往失真，无法表现我们感知的平滑色相变化

5. CSS filter 的解决方案
• 使用 filter: hue-rotate() 实现真实的色相旋转
• 可实现超过 180° 的平滑过渡
• 注意：该方法常使颜色显得更暗，需要选择更亮或低饱和度的初始色

6. 增强动画的细节：Twinkling 闪烁效果
• 使用 keyframes + 随机参数产生轻微闪烁，避免所有粒子同步
• 过渡不再是死板的线性透明度衰减，而是更自然的消隐效果

author Josh W. Comeau

Joshwcomeau

Color Shifting in CSS • Josh W. Comeau

A little while ago, I was trying to animate an element’s background color, so that it cycled through the rainbow. Seems easy, but it turns out, browsers have a surprisingly big limitation when it comes to color processing! In this tutorial, we’ll dig into…

#优质博文 #css #前端 #设计 #color
What You Need to Know About CSS Color Interpolation | CSS-Tricks

AI 摘要：这篇文章系统介绍了 CSS 中的颜色插值 (color interpolation) 概念，解释了其在渐变 (gradient)、过渡 (transition)、动画 (animation)、颜色混合 (color-mix) 等场景中的应用。文章重点区分了矩形色彩空间 (rectangular color space) 与极坐标色彩空间 (polar color space)，并详细阐述了色相插值 (hue interpolation) 的四种方法（shorter / longer / increasing / decreasing），展示了如何通过不同插值策略影响渐变、颜色过渡以及动画效果，从而为网页设计实现更自然、更富表现力的色彩体验。

[以下是方便搜索索引的大纲(AI 生成)，请读原文]
1. 颜色插值的基础概念
• 定义：在两个颜色点之间计算中间颜色的过程。
• 作用：生成独特色彩、改进渐变、增强动画与过渡效果。
• 典型示例：利用 oklch() 在 CSS 动画中平滑过渡。

2. 应用场景与支持插值的 CSS 功能
• 所有渐变函数 (linear-gradient, conic-gradient 等)。
• color-mix() 函数：可指定色彩空间和插值方法。
• 动画 (animation) 和过渡 (transition)。
• 图像滤镜 (filter)。
• 相对颜色语法 (relative color syntax)。

3. 插值语法与规则
• 一般形式：
color-mix(in <color-space> <hue-interpolation-method>, color1, color2)。
• in 关键字：用于指明插值的色彩空间。
• <color-space>：包括矩形与极坐标空间。
• <hue-interpolation-method>：定义色相插值方式 (shorter / longer / increasing / decreasing)。

4. 色彩空间分类
• 矩形色彩空间 (Rectangular color space)：
• 以直角坐标 (XYZ 轴) 形式描述，如 srgb, lab, display-p3。
• 极坐标色彩空间 (Polar color space)：
• 以圆柱坐标形式表示，三个值分别是明度 (lightness)、彩度 (chroma)、色相 (hue)。
• 插值时色相是角度，因而需定义旋转方向。

5. 色相插值 (Hue Interpolation) 四种方式
• shorter：沿最短路径过渡（默认）。
• longer：沿最长路径过渡。
• increasing：始终顺时针方向过渡。
• decreasing：始终逆时针方向过渡。
• 类比时钟：类似指针从一个刻度旋转到另一个刻度，可以走近路或远路，也可强制顺/逆时针。

6. 实际应用场景
• 渐变 (gradient)：利用色相插值生成更自然的平滑过渡。
• 颜色混合 (color-mix)：可指定色彩空间并控制过渡方向，获得更独特的混色效果。
• 动画 (animation)：通过关键帧在不同色值之间平滑过渡，展现动态的色彩体验。

author Sunkanmi Fafowora

CSS-Tricks

What You Need to Know About CSS Color Interpolation | CSS-Tricks

Color what? Sunkanmi Fafowora explains how an everyday task for CSS can be used to create better colors experiences.

#设计 #配色 #渐变 #color
好看的绿色配色喵
https://fixupx.com/n_seitan/status/1961636639488585731

#优质博文 #CSS #前端 #主题化 #color #设计
Thinking Deeply About Theming and Color Naming | CSS-Tricks

AI 摘要：本文深入探讨了前端开发中主题和颜色命名的设计实践及困惑，从流行 CSS 框架的色板设计现状、手动与程序化生成色板的方法谈起，剖析了颜色变量定义中的“语义命名”混乱，并提出了更灵活与语义化兼容的命名及管理方式，以支持更加多变且有辨识度的 Web 设计系统。

author Zell Liew

CSS-Tricks

Thinking Deeply About Theming and Color Naming | CSS-Tricks

Today, I want to discuss a couple of patterns for naming color palettes that the community is using, and how I propose we can improve, so we achieve both flexibility and beauty.

#新动态 #前端 #javascript
JavaScript Weekly #743

AI 摘要：本期 JavaScript Weekly（#743，2025年7月4日）内容涵盖了 JavaScript 生态系统的最新动态，包括 Deno 2.4 的重大更新、ECMAScript 2025 新特性解析、以及多个工具和库的发布。尽管受到热浪和假期的影响，内容略显精简，但仍包含了丰富的文章、工具和行业新闻，适合对 JavaScript 及相关技术感兴趣的开发者深入了解最新趋势和技术进展。

1. 技术更新
• Deno 2.4 更新：重新引入 deno bundle 命令，支持服务器和客户端单文件打包，兼容 npm 和 JSR 依赖，具备自动树摇功能；新增 import 导入任意文件功能，OpenTelemetry 支持稳定，标志着一次重要的版本更新。
• Bun v1.2.18 发布：作为 Deno 的竞争者，Bun 也推出了新版本，具体细节未展开，但值得关注。
• ECMAScript 2025 新特性：Paweł Grzybek 提供了以示例为主的视角，介绍 ES2025 的新特性，与之前 Dr. Axel 的解读形成补充。
• 其他工具发布：包括 Rspack 1.4（基于 Rust 的快速打包工具，支持 WebAssembly）、Electron 37.0、ESLint 9.30.0/9.30.1、Astro 5.11、Babel 7.28.0 和 Three.js r178 等。

2. 行业简讯
• JavaScript 商标纠纷：Ryan Dahl 更新了与 Oracle 关于 JavaScript™ 商标的纠纷进展，Oracle 有一个月时间回应 Deno 的取消请愿。
• JS1024 代码高尔夫比赛：一项年度 JavaScript 代码高尔夫比赛，主题为“Creepy”，参赛者需在 1024 字节内完成程序，截止日期为 7 月 19 日。
• 微软开源：GitHub Copilot Chat 扩展在 VS Code 上开源，展示微软扩展开发方式。

3. 文章与教程
• 如何构建 AI 驱动的颜色搜索引擎：Lúí Smyth 介绍如何结合多种技术打造 AI 驱动的颜色建议工具，技术应用具有广泛实用性。 #AI #color
• 轻量级响应式状态管理：Loren Stewart 探讨使用 JavaScript 原生代理（Proxies）构建响应式状态管理系统，避免依赖外部库。
• Next.js 全栈开发：Robin Wieruch 指导如何使用 Next.js 15 和 React 19 进行全栈开发，适合希望扩展技能的前端开发者。
• JavaScript 解析谜题：Hillel Wayne 分享一个简单的 14 字符 JS 问题，挑战开发者解析能力，是今年最受欢迎的内容之一。
• 2025 Node.js 模式：Ashwin 反思 Node.js 当前潜力，涵盖 ES 模块、内置 Web API、测试运行器等新特性。
• 其他专题：包括通过超声波传输数据（Lorenz Diener）、React 信号知识（Ryan Carniato）、Mapbox 3D 模型指南（Mykola Chernyshevskyi）、JSDoc 优化开发流程（Jordan Booker）。

4. 代码与工具
• Milkdown：一个插件驱动的 WYSIWYG Markdown 编辑器框架，支持高度定制化。
• Repomix 1.0：将代码库打包为 AI 友好格式，适合用 LLM 分析代码。
• snapDOM 1.8：快速准确地将 DOM 节点捕获为 SVG 图像，保留样式和字体。 【这个看着挺不错的 相比 html2canvas 等】
• Time Picker：基于 shadcn/ui 的日期时间选择组件，简洁优雅。
• 其他工具：包括 Protobuf-ES 2.6、React Chessboard 5.0、Faker 9.9、Pixi.js 8.11 等。

5. 其他生态系统动态
• Patreon 国际化重构：涉及超 10,000 个 JavaScript 调用点的国际化重构故事。
• Cloudflare Containers：Cloudflare 推出新容器服务，扩展 Workers 功能。
• One Million Chessboards：在线 1000x1000 棋盘项目的工程和扩展故事。
• GitHub 漏洞赏金：Sharon Brizinov 分享通过追踪 GitHub 强制推送的提交发现价值 25k 美元的秘密。
• PlanetScale 进军 Postgres：MySQL 云服务提供商进入 Postgres 领域，处于私有预览阶段。
• Strudel：浏览器内编码音乐的工具，提供实时示例。

author Peter Cooper

Deno

Deno 2.4: deno bundle is back | Deno

Deno bundle is back, alongside the addition of bytes and text imports, stabilized built-in OpenTelemetry, a new --preload flag, simplified dependency management with deno update, and more.

#优质博文 #前端 #css #color #course
巨详细巨详细的一篇关于颜色的博文。
CSS Color Functions | CSS-Tricks

AI 摘要：本文全面探讨了 CSS 中颜色设置的多种方法和相关属性，强调了颜色在网页设计中的核心作用。作者从颜色的基础概念和颜色空间入手，详细介绍了 sRGB、CIELAB 和 OkLab 等颜色空间下的各种颜色函数（如 rgb()、hsl()、hwb()、lab() 等），以及十六进制表示法和命名颜色等传统方法。同时，文章还涵盖了现代 CSS 颜色功能（如 color() 和 color-mix()），并讨论了支持颜色值的 CSS 属性和渐变效果。通过丰富的示例和说明，读者可以深入理解 CSS 颜色的技术细节和应用场景。

author Sunkanmi Fafowora

CSS-Tricks

CSS Color Functions | CSS-Tricks

CSS has a number of functions that can be used to set, translate, and manipulate colors. Learn what they are and how they are used with a bunch of examples to get you started.

#优质博文 #前端 #css #svg #safari #新动态
Frontend Focus #696

AI 摘要： 本期 Frontend Focus 第 696 期（2025年6月11日）聚焦于苹果 WWDC 2025 开发者大会的最新动态，特别介绍了 Safari 26 Beta 版本的新功能与改进，同时涵盖了 CSS 领域的最新技术和工具。此外，文章还提供了丰富的教程、工具和资源，内容涉及 CSS 新特性、网页打印优化、UI 组件开发等多个前端开发热点话题，旨在帮助开发者紧跟技术趋势并提升实践能力。

WWDC 2025 更新
• 主题演讲：WWDC 2025 主题演讲时长约一个半小时，内容偏向概述，开发者细节较少，可通过 The Verge 的 10 分钟精剪版快速了解，或观看更深入的 State of the Union 更新。
• Safari 26 Beta 与 WebKit 新功能：Safari 版本号从 18 跳跃至 26，与苹果操作系统版本号一致，带来了 60 多项新功能和 100 多项改进，包括 WebGPU 支持、锚点定位、滚动驱动动画等；同时提供近 40 分钟视频，详细讲解 CSS 新特性及音视频、图像、图标等媒体支持。
• 声明式 Web Push：通过 20 分钟视频讲解声明式 Web Push 的工作原理，如何基于现有标准构建通知功能，并保持向后兼容性。

文章、观点与教程
• 部分关键帧动画技巧：Josh W. Comeau 分享了创建动态、可组合关键帧动画的技巧，讲解清晰且注重可访问性。
• CSS contrast-color() 函数探讨：Daniel Schwarz 分析该函数在 Web 可访问性方面的现状、局限性及未来改进方向。
• Scroll-Driven Letter Grid：Chris Coyier 介绍一种利用可变字体随滚动变化的技术，但受限于浏览器支持，Safari 和 Firefox 暂不支持。
• Jen Simmons 谈新 CSS 特性：WebKit 团队的 Jen Simmons 讨论声明式 Web Push、表单控件样式、排版及 contrast-color() 等新特性。
• SVG path 元素解析：Myriam Frisano 讲解 SVG <path> 元素基础及其复杂命令，附带示例和可视化内容。
• Printing the web: making webpages look good on paper：Declan Chidlow 探讨如何通过 CSS 优化网页打印效果，打造整洁易读的文档。
• 其他教程：包括快速部署个人作品集网站、HTML 弹出通知自动关闭、CSS 与 JavaScript 粘性元素代码片段等内容。

工具、代码与资源
• SF Symbols 7：苹果图标库更新至 Beta 版，新增数百符号，总数接近 7000 个。
• Astro 5.9 发布：新增内容安全策略实验支持及 Markdown 渲染辅助函数。
• Storybook 9 更新：UI 组件工具新增交互、视觉和可访问性测试功能，支持 React、Svelte 等多种框架。
• Spectral.js 颜色混合库：基于 Kubelka-Munk 理论实现更接近颜料混合的颜色过渡效果。 #color
• 其他工具：包括 Smooothy 滑块组件、Fulldev UI 内容驱动网站组件库、SmoothUI 动画组件等。

Apple Developer

What’s new in Safari and WebKit - WWDC25 - Videos - Apple Developer

Learn how the latest web technologies in Safari and WebKit can help you create incredible experiences. We'll highlight different CSS...

#优质博文 #前端 #design #color #oklch #色彩空间
蛮有意思，在文章的网页里我 mac 上能看出来差别（）手机上不行。
这里的图仅供参考色差
Design systems need a colour space

AI 摘要：本文探讨设计系统中色彩空间的重要性，分析 sRGB 与 Display P3 的差异，介绍 OKLCH 的优势与局限，并强调未来色彩空间规范化的必要性。

本文通过类比鞋码系统的复杂性，引出设计系统中色彩空间的重要性。传统使用十六进制值（如 #ff0000 ）或 RGB 值的色彩定义方式缺乏对色彩空间的明确标注，可能导致显示偏差。sRGB 是当前 CSS 和 Figma 的默认色彩空间，但 Display P3 因其更广的色域（尤其是更鲜艳的红、绿色）正成为未来趋势。

Tailwind CSS 4 和 Radix 3 已转向 Display P3，并采用 OKLCH 色彩空间。OKLCH 通过亮度（Lightness）、色度（Chroma）和色相（Hue）实现感知一致性，但需注意其超广色域可能导致部分颜色无法在现有设备上准确显示。此外，OKLCH 在颜色混合时可能因色相差异产生意外结果，需结合 OKLAB 等其他空间优化。

文章建议将色彩创建与部署分离：创作阶段可利用 OKLCH 等高级空间，而部署时需兼顾代码紧凑性与兼容性。最后提到工具 Pinwheel 可辅助色彩编辑、混合及代码生成。

author bjango
via Frontend Focus ​684

#前端 #color #tools
喜欢这个！
Super Color Palette

用于改变色调、饱和度、亮度等的调色板生成器 —— 这里有很多东西可以摆弄，但主要功能是一组滑块，可让您使用 HSL 轻松“调整”调色板。还包括用于生成调色板、辅助功能等的工具。

via FrontEnd Focus 683

Supercolorpalette

Super Color Palette - 100% Free Color Palette Generator

Generate super awesome color palettes by shifting hue, saturation, lightness, and more. 100% free without ads.

#优质博文 #前端
CSS Relative Colors
https://ishadeed.com/article/css-relative-colors/

AI 摘要：探讨 CSS 相对颜色语法（Relative Colors）如何通过调整颜色亮度实现动态主题切换的实用案例。

本文通过实际案例展示了 CSS 相对颜色语法（ from 关键字）的灵活性与应用场景。传统 CSS 变量需预定义多个颜色值，而相对颜色语法允许开发者基于现有颜色动态调整 HSL 通道值（如亮度、饱和度），从而实现更简洁的动态主题适配。作者以按钮悬停效果为例，对比传统方法和相对颜色语法的差异：传统方法需为不同状态定义多个变量，而相对颜色通过 hsl(from var(--color) h s calc(l - 10%)) 直接基于原色降低亮度，减少代码冗余。文章进一步扩展至动态主题切换场景，展示如何通过调整基准色实现全局颜色适配。此外，文章讨论了兼容性问题（仅 Safari 16+ 和 Chrome 119+ 支持）及回退方案（如 @supports 检测和 PostCSS 插件），并强调相对颜色语法对现代 CSS 设计系统灵活性的提升价值。

#css #color
via Ahmad Shadeed

Ishadeed

CSS Relative Colors

An interactive guide to learn CSS Relative Colors.

#优质博文 #跨端 #tailwind #rn #css #color #follow
React Native 实践：Colors

AI 摘要：这篇文章讲述了 Follow Mobile 的颜色体系。Follow Mobile 使用 React Native 和 Expo 开发，并通过 NativeWind 工具来实现类似 TailwindCSS 的样式系统。文中详细介绍了准备工作，包括安装 NativeWindCSS、配置 Babel 和 Metro、创建 PostCSS 样式入口等。接着介绍了选择颜色体系，搬用了苹果的颜色规范，并提供了相应的颜色值参考。然后讲解了如何使用 NativeWind 的变量注入功能，将颜色定义从顶层传入且在 TailwindCSS 中配置使用。这些方法被用于组件中设置颜色和颜色过渡动画。最后文章提到，这个方案已被抽取为通用库，供大家使用。

via innei

静かな森

致虚极，守静笃。

#前端 #css #tailwind #color #配色
Flexoki

AI 摘要：Flexoki 是一款专为数字屏幕阅读和书写设计的开源墨水风格配色方案，灵感来自纸张和传统墨水。它采用高对比度、感知平衡的颜色，适用于多种应用程序和模式（明暗）。该配色基于 Oklab 色彩空间，优化了颜色的感知一致性和可读性，同时保留了艺术和科学的平衡。Flexoki 提供基础颜色、强调颜色和扩展调色板，用于代码高亮和界面设计，旨在营造温暖鲜活的视觉效果。

via Frontend Focus #674

Steph Ango

Flexoki

An inky color scheme for prose and code.

#前端 #工具推荐 #浏览器插件 #tools #tailwind #shadcn #color
CSS Variables Editor —— CSS Variables Editor 是一款浏览器扩展，旨在简化 CSS 变量中颜色的管理。 其主要功能包括：

- AI 生成的色彩方案：通过集成 OpenAI 或 Anthropic API，快速生成并在实际应用中预览色彩方案。

- 无障碍测试：根据 WCAG 指南检查色彩对比度，确保设计的可访问性。

- 实时颜色编辑：直接在浏览器中修改 CSS 变量的颜色值，实时预览更改效果，提升设计与代码的协作效率。

- 支持 daisyUI 和 shadcn/ui：提供官方文档中的颜色描述，确保在应用中正确使用，并避免忽略弹出框、聚焦环等状态的设计。

- 导出更改：支持导出修改后的 CSS 变量，遵循 Tailwind 的推荐实践。

该扩展可从 Chrome 网上应用店安装，适用于设计师和开发者，提升设计系统中颜色管理的效率。

Cssvariables

CSS Variables Editor - AI Browser Extension for managing colors in CSS Variables

CSS Variables Editor is the Browser Extension for managing colors in CSS Variables. AI-generated color palettes. Accessibility testing. Support for shadcn/ui and daisyUI (more coming soon).

#工具推荐 #前端 #css #tools #color #tailwind #nextjs
https://www.v2ex.com/t/1085585
爱色卡（ AISEKA ） - 一个简单的色彩管理工具 （网址：aiseka.com ）

这个页面挺简洁的，技术栈是 nextjs + trpc + tailwind + react-query 跟我高度重合，mark 一下看看

想学的应该也可以看看，这种小网站应该算挺适合学习的入门实例？ https://github.com/meetqy/aiseka