ToolLab
取色

已保存颜色

点击 + Save 将颜色添加到调色板

颜色值
HEX#3B82F6
RGBrgb(59, 130, 246)
HSLhsl(217, 91%, 60%)
HSBhsb(217, 76%, 96%)
CSScolor: #3B82F6;
background-color: rgb(59, 130, 246);

颜色选择器 & 转换器

选取任意颜色并即时转换 HEX、RGB、HSL、HSB 格式。支持屏幕吸管取色，保存调色板，一键复制 CSS 值。

什么是颜色选择器？

颜色选择器是一种用于选择、可视化和转换不同格式颜色的工具。Web 开发者、设计师和数字艺术家每天都要和颜色打交道，不同场景需要不同格式：CSS 使用 HEX 和 RGB，设计工具使用 HSL 和 HSB，印刷流程使用 CMYK。一个可靠的颜色转换工具能消除手动计算和猜测的麻烦。

这款免费在线颜色选择器提供 HEX、RGB、HSL 和 HSB 之间的实时转换。它具有交互式颜色输入、RGB 滑块微调、屏幕吸管取色和调色板保存功能。所有处理在浏览器端完成，不发送任何数据到服务器。

核心功能

  • 实时转换 HEX、RGB、HSL 和 HSB 颜色格式
  • 交互式颜色选择器，使用浏览器原生取色组件
  • RGB 滑块精确调整颜色
  • 支持屏幕吸管取色 API，可从屏幕任意位置采样颜色
  • 保存颜色到本地调色板，方便快速复用
  • 一键复制任意颜色格式的值
  • 输出 CSS 可用的 color 和 background-color 属性
  • 支持简写 HEX 输入以及多种输入格式
  • 大尺寸颜色预览面板，准确验证颜色效果
  • 100% 浏览器端处理，数据不离开你的设备

如何使用

  1. 在文本框中输入任意格式的颜色值，或使用颜色选择器直观选取。
  2. 使用吸管按钮从屏幕任意位置采样颜色。
  3. 通过 R、G、B 滑块精确调整颜色。
  4. 在右侧面板即时查看 HEX、RGB、HSL 和 HSB 的转换结果。
  5. 点击任意格式旁边的复制图标将值复制到剪贴板。
  6. 点击 + Save 将当前颜色保存到调色板中，方便以后复用。

颜色格式说明

HEX 是最常见的 Web 颜色格式，用两位十六进制数表示红、绿、蓝三个通道。RGB 通过指定红、绿、蓝通道 0-255 的强度来定义颜色。HSL 用色相、饱和度和亮度来描述颜色，许多设计师认为这种方式更直观。HSB 类似于 HSL，但使用明度代替亮度，这是 Adobe Photoshop 和 Figma 等设计工具使用的模型。

每种格式各有优势：HEX 在 CSS 中简洁紧凑，RGB 直接映射到屏幕像素，HSL 在调整颜色明暗和饱和度时更直观，HSB 与设计工具的颜色表示方式一致。此工具能在四种格式间无缝转换，让你在任何场景下都能选用最合适的格式。

常见使用场景

  • Web 开发：将设计稿中的颜色转换为 CSS HEX 或 RGB 值
  • UI 设计：获取精确的 HSL 值以构建一致的色彩系统
  • 品牌管理：确保颜色在 Web、印刷和社交媒体中的一致性
  • 无障碍设计：调整亮度和饱和度以满足对比度要求
  • 数字艺术：使用吸管从参考图片中采样颜色
  • 演示文稿：快速生成协调的配色方案

使用技巧

  • 需要创建颜色变体时使用 HSL，通过调整饱和度或亮度而保持色相不变
  • 确保文本和背景颜色之间至少有 4.5:1 的对比度，以满足无障碍要求
  • 吸管工具可以在整个屏幕范围内取色，不仅限于浏览器窗口
  • 将品牌颜色保存到调色板中，开发时快速调用
  • 处理透明度时，HEX 支持 8 位表示法，RGB 支持 rgba 语法

常见问题

颜色选择器 & 转换器 — 免费在线工具 | ToolLab