#优质博文 #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 - Shift hue, saturation, lightness, and more!

Generate color palettes from a hex. Shift 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