分类
颜色
面向网页的取色、转换与检测工具:在 HEX、RGB、HSL 之间互转,制作调色板和渐变,模拟色觉障碍,并按 WCAG 无障碍标准检查文字与背景的对比度。设计师核对品牌色、开发者查找 CSS 值都用得上,调整任一通道时预览即时更新。
颜色对比度检查器
按 WCAG AA 和 AAA 级别检查文字/背景对比度。
调色板生成器
选择基色，得到经典色环和谐配色 —— 互补、分裂互补、三色、四色、正方、类似、单色。
CSS 渐变生成器
用多色停靠点设计线性或径向 CSS 渐变并复制代码。
颜色格式转换器
在 HEX、RGB、HSL、HSV、OKLCH 与 CSS 变量之间互转任何颜色。
CSS Box Shadow 生成器
可视化设计 CSS box-shadow——多图层、实时预览、CSS / Tailwind 代码一键复制。
色盲模拟器
查看你的图片对 8 种色觉异常（CVD）人群分别如何呈现。
从图片提取调色板
拖入图片，工具通过 Canvas 分析主色并提取调色板——复制 HEX 或一键复制全部。
CSS 滤镜演练场
可视化组合 blur、brightness、contrast、hue、sepia、invert 等 9 项——复制 CSS 滤镜或 Tailwind 任意值。
CSS clamp() 计算器（流体排版）
在两个视口宽度间平滑缩放的 `font-size: clamp(...)` 一行——直接复制。
Border Radius 生成器
独立拖拽四角、尝试椭圆半径、复制 CSS——内置 chat-bubble、pill、blob、tab 等预设。
CSS 三角形生成器
用 border 或 clip-path 生成 8 方向纯 CSS 三角形——复制规则即可用。
CSS Cubic-Bezier 曲线生成器
拖动控制点设计 CSS 缓动曲线——实时预览运动，复制 cubic-bezier()。
颜色混合器
在 RGB、HSL 或 CIELAB 空间中插值两种颜色。查看中间过渡的 11 步渐变条。
颜色明暗变体生成器
从基础色生成 tint（更亮）、shade（更暗）、tone（与灰混合）——2 到 20 档，HEX、RGB、HSL 输出。
CSS 命名颜色
全部 147 个 CSS / X11 命名颜色，含 HEX、RGB 与实时色块 — 可搜索、按色相分组。
HSL 颜色选择器
拖动色相、饱和度、亮度、alpha 滑块选色 — 复制 HEX、RGB、HSL 或 Tailwind 任意值。
Tailwind 调色板
完整 Tailwind CSS 默认调色板 — 22 色相 × 11 色阶（50 至 950）— 点击复制为 Tailwind 类、HEX 或 rgb()。
色温
滑动 Kelvin 值，观察黑体颜色从温暖琥珀到中性白再到冷蓝的变化 — 还有几个常见光源预设。
颜色距离 (ΔE)
选两种颜色，看它们在感知上有多不同 — CIE76 ΔE、CIEDE2000 ΔE 和纯 RGB 距离，附并排色块。
颜色排序
粘贴 hex 颜色列表，按色相、饱和度、明度或感知亮度排序 — 适用于整理设计令牌调色板。
OKLCH 颜色选择器
在感知均匀的 OKLCH 空间（明度 · 色度 · 色相）中选色 —— 并查看每个选择是否落在 sRGB 显示色域内。
颜色插值 / 渐变步进
选择两个 hex 颜色，获取 N 个离散中间步进 —— 在 sRGB、linear RGB、OKLab 或 HSL 中 —— 带可选缓动。
颜色令牌导出器
定义一次颜色调色板，导出到 CSS 自定义属性、Tailwind 配置、SCSS、LESS、设计令牌 JSON、SwiftUI Color 或 Android `colors.xml`。实时预览色样。
Conic Gradient 生成器
CSS `conic-gradient()` 的可视化构建器 — 旋转角度、中心位置、颜色停止、形状预览。适用于饼图、环形图、棋盘格图案、色轮。
颜色名称查找
为任意 hex/RGB 颜色查找最接近的 CSS、Tailwind 或 XKCD 调查色名 — 按 OKLab 空间感知距离排序。
Material Design 3 色调（Tonal）调色板
从任意源色生成 Material You / Material Design 3 色调调色板（色调 0–100），含与黑白的对比度，以及 CSS / Tailwind / JSON / SCSS 导出。
波长转颜色（nm → sRGB）
把光的波长（380–780 nm，可见光）转换为近似的 sRGB 颜色，附可点击的彩虹渐变条，以及来自真实太阳光谱的 Fraunhofer 吸收线参考表。
CMYK ↔ RGB 颜色转换器（印刷色空间）
在屏幕用 RGB/hex 与印刷用 CMYK 百分比之间相互转换，支持 Simple、GCR（灰成分替换）和 UCR（底色去除）三种黑版生成策略，提供分色通道预览和总墨量读数。
颜色亮度对比 (HSL vs Lab L* vs WCAG vs HSP)
对一种或两种颜色并行比较 HSL 亮度、HSV 值、WCAG 相对亮度(LRV)、CIE Lab L*(感知亮度)、Rec. 709 Luma、HSP 感知亮度与朴素 (R+G+B)/3 共七种亮度指标,通过差值揭示为何「更亮」的颜色反而显得更暗。
CSS 混合模式模拟器
把 W3C 合成规范的 16 种 mix-blend-mode(multiply·screen·overlay·soft-light·hue·color·luminosity 等)应用到两种颜色上,一览查看每种模式的混合结果与可复制的 CSS 片段。
CSS color-mix() 预览 (插值空间对比)
对比现代 CSS color-mix() 函数在不同插值空间 (srgb, hsl, oklch, lab, lch, hwb, oklab, srgb-linear) 下如何混合两种颜色 — 实时色卡、计算 hex、每个空间的完整渐变条以及可复制的 CSS。
CSS clip-path 构建器 (圆、椭圆、多边形、Inset)
CSS `clip-path` 属性可视构建器 — 选择形状 (圆、椭圆、inset、多边形)、用滑块调整数值或点击预览添加多边形顶点、复制即用 CSS 声明。内置 10 种形状预设 (三角形、六边形、星形、箭头、对话气泡、十字等)。
CSS 文字阴影生成器（多图层）
随意叠加多层 text-shadow — 霓虹发光、3D、描边、长阴影 — 实时预览，CSS 可直接复制。