颜色混色器：快速上手指南

第一次使用就能成功所需的全部内容：该粘贴什么、哪个选项真正重要、以及如何读懂结果。

输入 颜色混色器 输出 100% 在浏览器内运行——数据不会离开您的设备。
颜色混色器 — 输入 → 输出. 100% 在浏览器内运行——数据不会离开您的设备。

使用方法

  1. 打开工具，将内容粘贴到左侧输入框。
  2. 只调整任务真正需要的选项——多数情况下默认值就是正确的。
  3. 在右侧查看结果，输入时结果会实时更新。
  4. 用「复制」取走结果，或用「下载」保存为文件。
使用方法 · 颜色混色器 1 将数据粘贴到输入框（或载入示例）。 2 根据目标格式或使用场景调整选项。 3 复制、下载或查看输出——输入时结果实时更新。
使用方法 — 3

示例

Mix against #ffffff at 50% and switch the space to CIE Lab for a perceptually even ramp.

输入

#0ea5b7

输出 — 搜索结果

#0ea5b7 + #ffffff at 50% (mixed in RGB)

Result
  HEX   #87d2db
  RGB   rgb(135, 210, 219)
  HSL   hsl(186.4, 54.0%, 69.3%)

Contrast against white : 1.71:1
Contrast against black : 12.26:1

Ramp (9 steps)
    0%  #0ea5b7
   13%  #2cb0c0
   25%  #4abcc9
   38%  #68c7d2
   50%  #87d2db
   63%  #a5dde4
   75%  #c3e9ed
   88%  #e1f4f6
  100%  #ffffff

CSS
  --mix: #87d2db;
  background: linear-gradient(90deg, #0ea5b7, #ffffff);

运行

说明

Blend two colours in sRGB, HSL or perceptual CIE Lab and generate a ramp with contrast ratios.

颜色混色器 → · 使用方法 → · 颜色工具 →

相关工具

十六进制颜色选择器Interactive picker with HEX, RGB and HSL output.颜色 Code 转换器Convert between HEX, RGB, HSL and named colors.颜色对比度检查器(WCAG)Verify text contrast ratios against WCAG AA/AAA.颜色调色板生成器Shades, tints and complementary schemes from one color.随机颜色生成器Batch random colors with copyable codes.CSS 命名颜色参考表All 148 CSS color names with codes and previews.