在线取色器与颜色代码转换工具

选择颜色或输入 HEX 代码 — 立即显示 HEX、RGB、HSL、CSS 名称和互补色。

即时结果 在浏览器中运行
HEX 代码
#3D7EF7
RGB 值
rgb(61, 126, 247)
HSL 值
hsl(218, 91%, 60%)
CSS 名称
—
互补色
#F7823D

颜色模型

HEX  → #RRGGBB
RGB  → 0–255 per ch.
HSL  → 0–360° / 0–100%
WCAG → min 4.5:1

HEX：网页标准。RGB：屏幕基础模型。HSL：色调-饱和度-亮度，设计师友好。

如何使用？

  1. 1
    选择颜色点击取色器或直接输入 HEX 代码（如 #FF5733）。
  2. 2
    查看数值HEX、RGB 和 HSL 即时计算，CSS 名称和互补色自动显示。
  3. 3
    复制一键将所需颜色代码复制到剪贴板。

常见问题

HEX 颜色代码是什么？
#RRGGBB 格式的 6 位十六进制数。每对字符表示一个颜色通道（红、绿、蓝）的强度，范围 00–FF（0–255），共可表示 16,777,216 种颜色。
RGB 和 HSL，用哪个好？
RGB 与显示硬件对应，在 CSS 中广泛使用。HSL 对设计师更直观：可在不改变色调的情况下调整亮度。现代 CSS 完全支持两者。
互补色有什么用？
互补色在色轮上相差 180°，产生最大对比度 — 非常适合 CTA 按钮、数据可视化和引人注目的设计。

网页颜色代码：HEX、RGB 和 HSL

在网页开发中，颜色主要通过三种格式定义：HEX、RGB 和 HSL。本工具可将任意颜色即时转换为这三种格式，并显示 CSS 名称和互补色。

HEX 颜色代码

HEX 是网页中最常用的颜色格式，写作 #RRGGBB，每对字符表示颜色通道（红、绿、蓝）的强度，范围 00–FF（0–255）。每通道 256 个值，HEX 支持 16,777,216 种颜色。3 位简写 #RGB 同样有效：#F06→#FF0066。CSS（color: #FF5733;）、Figma、Photoshop 等所有设计工具均支持 HEX。

RGB 颜色模型

RGB 反映屏幕的物理结构。每通道取值 0–255。CSS 写法：rgb(255, 87, 51) 或带透明度 rgba(255, 87, 51, 0.8)。

HSL 颜色模型

HSL（色调-饱和度-亮度）对设计师更直观。色调（Hue）：0–360°，色轮上的位置。饱和度（Saturation）：0%=灰色，100%=鲜艳。亮度（Lightness）：0%=黑，50%=正常，100%=白。只需调整亮度，即可轻松创建同色系的浅色或深色变体，非常适合构建配色方案。

互补色

互补色在色轮上相差 180°，产生最大对比度：红↔青、绿↔洋红、蓝↔黄。常用于 CTA 按钮、数据可视化和高对比度 UI 设计。

网页无障碍（WCAG）

约 8% 的男性存在色觉缺陷。WCAG 2.1 AA 要求普通文字对比度至少为 4.5:1，大字至少 3:1。切勿仅凭颜色传递信息。

CSS 命名颜色

CSS 定义了 148 个命名颜色（red、navy、coral、teal 等）。本工具可自动识别并显示 CSS 颜色名称。

隐私保护

所有计算在浏览器本地完成，不向任何服务器发送数据。

评论