Color Picker & Converter

One input per line. Output is numbered to match the input order.
Pinned tools are listed in your favourites on the home page.Copies a link to this tool that carries your current input, so it opens ready to run.Gives you an iframe snippet for putting this tool on your own site.
Ctrl+Enter Run  · Ctrl+Shift+C Copy  · Esc Clear

Understand Color Picker & Converter

在 hex、RGB、HSL、HWB 和 OKLch 之间转换颜色，并提供可视化取色器和实时预览。

How it works

hex 和 RGB 用两种记法描述同一件事：每两位十六进制是一个 0 到 255 的通道，因此 #FF5733 就是 rgb(255, 87, 51)。HSL 是把同样这些 sRGB 数值按圆柱坐标重新排布——色相是色轮上的角度，饱和度和亮度是百分比——这让推导浅色调和深色调很方便，但并没有改变色彩空间。OKLch 则属于另一类：它是感知均匀空间，其亮度通道上相等的步长在眼中看起来也相等，这就是为什么 OKLch 色阶产生的调色板是均匀的，而 HSL 色阶会在黄色区域挤作一团。

When to use it

  • 把设计文件里的十六进制值转成样式表或 canvas API 所期望的 rgb() 或 hsl() 形式
  • 固定色相和饱和度、只改变亮度，从品牌色构建一套浅色与深色的色阶
  • 从截图或已渲染页面中取出一种颜色，并一次得到它的全部记法
  • 用数值而不是靠肉眼来比较两种看起来相近的颜色

Watch out for

  • 这里没有 alpha 通道。八位十六进制（#RRGGBBAA）、rgba() 和 hsla() 不会被解析，透明度会被丢弃而不是传递下去。
  • 往返转换可能让数值偏移 1。HSL 输出会四舍五入到整数度和整数百分比，因此 hex → HSL → hex 并不总能返回你最初的那个字节值。
  • HSL 的亮度不是感知亮度。hsl(60, 100%, 50%) 是鲜亮的黄色，hsl(240, 100%, 50%) 是深蓝色，尽管两者都声称亮度为 50%——当比较必须与肉眼所见一致时，请使用 OKLch。
  • 不接受 CSS 颜色名称。请输入 `#FF0000` 而不是 `red`。

Frequently Asked Questions

如何把十六进制颜色转换成 RGB？

把 6 位十六进制码拆成三组：#FF5733 → R=0xFF=255、G=0x57=87、B=0x33=51，即 rgb(255, 87, 51)。对于 #F73 这样的简写形式，先把每位翻倍（#FF7733）。在这里粘贴任意十六进制码，RGB、HSL 和 HWB 值会立即显示。

如何把 RGB 转换成十六进制？

把每个通道（0–255）转成两位十六进制：R=255 → FF、G=87 → 57、B=51 → 33，即 #FF5733。在 JavaScript 中："#" + [r, g, b].map(v => v.toString(16).padStart(2, "0")).join("")。在这里粘贴 rgb() 值即可自动得到十六进制码。

RGB 和 HSL 有什么区别？

RGB 用红、绿、蓝三种光的强度（各 0–255）定义颜色——它对应屏幕的工作方式。HSL 使用色相（色轮上 0–360°）、饱和度（鲜艳程度 0–100%）和亮度（0–100%）。在制作浅色调、深色调和设计系统色阶时，HSL 更直观。

How to Use Color Picker & Converter

  1. Paste or type your input in the input area above.
  2. The tool processes your input automatically or click Run.
  3. Copy or download the result using the action buttons.
  4. Use Ctrl+Enter to run quickly from the keyboard.