Tailwind 调色板可视化浏览器 - 所有色阶一览
可视化浏览 Tailwind CSS 所有内置颜色的 50-950 色阶,点击复制类名或色值。
UD5工具箱
为定性数据可视化提供对色盲友好的配色方案推荐。支持红色盲、绿色盲、蓝色盲及全色盲模拟预览。
基于 Okabe-Ito、Wong、Tol 等学术研究的配色方案 | 4种色盲类型实时模拟
| 颜色编号 | 正常视觉 Normal |
红色盲 Protanopia |
绿色盲 Deuteranopia |
蓝色盲 Tritanopia |
全色盲 Achromatopsia |
|---|
点击色块复制颜色代码 | 悬停查看色盲模拟 | 点击 移除颜色
色盲友好调色板是一组经过特别设计的颜色组合,确保在各类色觉障碍(如红绿色盲、蓝色盲等)下仍能被有效区分。全球约有8%的男性和0.5%的女性患有某种形式的色觉障碍。在数据可视化中使用色盲友好配色,可以确保信息对所有用户都公平可及,这也是WCAG无障碍标准的重要组成部分。
定性数据(分类数据)需要颜色之间有明显的视觉差异,以便区分不同类别。而连续数据(如温度、密度)通常使用渐变色(如浅蓝到深蓝)。对于定性数据的色盲友好配色,关键是选择在色盲模拟下仍能保持足够区分度的颜色组合,避免仅依赖红绿对比,推荐使用蓝-橙、蓝-黄等高对比度组合。
Okabe-Ito调色板是由Masataka Okabe和Kei Ito在2002年提出的8色调色板,专门为色盲友好设计。它包含黑色、橙色、天蓝色、蓝绿色、黄色、蓝色、朱红色和粉色。这组颜色在红色盲、绿色盲模拟下仍保持高度可区分性,被Nature等顶级学术期刊推荐使用,是科学数据可视化中引用最多的色盲友好调色板之一。
您可以使用本工具的色盲模拟功能来预览调色板在不同色觉类型下的效果。此外,还可以:
对于连续数据热力图,推荐使用单色渐变(如浅蓝→深蓝)或双色渐变(如蓝→白→橙),而不是彩虹色映射(rainbow colormap)。单色渐变在全色盲模拟下表现为灰度渐变,仍然可读。而传统的彩虹色映射(jet/rainbow)在色盲视角下会产生严重的感知偏差。推荐使用viridis、cividis、magma等感知均匀的colormap。
本工具使用基于Viénot-Brettel-Mollon (1999)方法的LMS色彩空间变换算法。具体流程为:sRGB → 线性RGB → XYZ → LMS色彩空间 → 应用色盲混淆线投影 → 逆变换回sRGB。该方法在学术研究中被广泛使用,能够较好地模拟二色视(dichromacy)的视觉效果。需要注意的是,实际色觉障碍的体验因人而异,模拟结果提供了近似参考,但不能完全等同于真实色盲感知。
可视化浏览 Tailwind CSS 所有内置颜色的 50-950 色阶,点击复制类名或色值。
在Oklch色彩空间中生成均匀色阶、类比色和互补色方案,确保视觉一致性。
从一个基色或图片提取的颜色,自动生成 50-950 的色阶并导出为 Tailwind CSS 配置。
选择任意基色,自动计算互补色、分裂互补及三分色,提供十六进制代码,一键复制。
拖拽基色指针,自动计算互补、近似、三等分等七种和谐配色方案,复制十六进制值。
编写正则表达式,在文本中用不同颜色高亮整个匹配和每个捕获组。
可视化Flexbox容器和子项的所有属性及选项,鼠标悬停预览效果。
在线颜色选择器,支持从色盘取色、HEX/RGB/HSL颜色值转换,提供调色板功能,方便前端设计取色。
拖拽两控制点精细微调CSS `cubic-bezier()` 曲线并对比预设函数效果。
支持任意格式颜色输入,计算对比度并显示WCAG 2.1各级别通过情况,含颜色建议。
展示Material Design全部色阶,点击复制HEX代码,提供主色和强调色搭配参考。
应用 contain 的各种值(layout, paint, size),直观对比开启前后渲染和布局的变化。
编写Brainfuck代码,以可视化的方式步进执行,观察活动纸带和指针。
在页面上叠加可拖拽的半透明网格线,辅助网格布局对齐。
输入HEX,从内置的Pantone色库中寻找最接近的彩通色号及名称。
回答关于再发布、开源、专利等要求,工具推荐最合适的开源许可证。
为图片添加类似胶片漏光的红黄色调渐变或光晕效果,营造怀旧氛围。
在可缩放网格上选区颜色绘制像素图,支持多帧预览简单动画。
通过Web MIDI API连接键盘,实时显示收到的音符开/关与控制器变化。
通过Service Worker或本地fetch模拟拦截和转发请求,查看修改后的请求响应。
创建带有复选框或标签的多选下拉列表,支持删除已选项,键盘可全控。
在网页顶部添加半透明暖色或暗色覆盖层,调节不透明度,降低屏幕刺眼感。
输入网址,尝试拉取该站favicon并提取其主要颜色,用于品牌配色参考。
在线正则表达式测试工具,支持JavaScript正则匹配、替换、提取等操作,即时显示匹配结果和高亮。
拖放 lcov.info 文件,以颜色标示每行代码的覆盖状态。
选择一种颜色,图片仅保留该色相区域,其余转换为黑白,突出主体。
上传 webpack 的 stats.json,生成交互式树状图、模块大小排名,辅助优化构建体积。
在任意网页上投射可拖拽调整的栅格覆盖线,用来测量和对齐设计稿。
输入 HTML 或网址,提取所有标题标签,生成文档大纲树,检测跳跃和缺失。
上传两张图片,实时切换并预览正片叠底、滤色、叠加等多种混合模式效果。