十六进制 RGB HSL 颜色转换器

免费颜色转换器:HEX 到 RGB、RGB 到 HEX,以及 HSL、HSV、CMYK 和 alpha。实时滑块、颜色选择器、EyeDropper、保存的色板、和谐、WCAG 对比度、色盲预览和代码导出 - 无需注册,本地运行。

在您键入的瞬间,以任一方向在 HEX、RGB、HSL、HSV/HSB 和 CMYK 之间转换任何颜色。它专为设计师和开发人员打造,添加了带有实时渐变轨道的交互式 RGB/HSL/alpha 滑块、颜色选择器、屏幕 EyeDropper、保存的和最近的色板、现成的颜色和谐、色调/阴影渐变、双色混合器、色盲预览、实时 WCAG 对比度检查以及用于 CSS、Tailwind、SCSS、Swift 和 Android 的复制就绪代码片段 - 一切都在您的浏览器中,无需上传任何内容。

Share
类别
开发者工具
包括
9特点
使用权
自由的 · 无需注册
隐私
在您的浏览器中运行
十六进制 RGB HSL 颜色转换器

Calibrating Color Converter......

Please wait a moment

如何使用

如何使用十六进制 RGB HSL 颜色转换器

  1. 01

    选择或输入颜色

    使用颜色选择器、EyeDropper,或键入 HEX、rgb()、hsl()、hsv()/hsb()、cmyk() 值或 CSS 颜色名称(如“青色”)。所有其他格式都会立即更新。

  2. 02

    读取转换

    HEX、RGB、HSL、HSV 和 CMYK 字段均保持同步。编辑其中任何一个,其余的会实时重新计算,因此您可以使用您喜欢的任何表示法。

  3. 03

    探索调色板与和谐

    单击互补色、类似色、三色或四色色板,沿着色调/阴影亮度渐变变化,或使用混合器混合两种颜色以得到您需要的确切阴影。

  4. 04

    复印并检查对比度

    一键复制任何格式,并在发货前阅读 WCAG AA/AAA 徽章,以确认您的颜色在白色或黑色上仍然可读。

使用案例

常见用例

  • 在编写 CSS 或 JSX 时将 HEX 转换为 RGB(或将 RGB 转换为 HEX)。
  • 将品牌 HEX 转换为 HSL/HSV 以进行主题和 Alpha 调整。
  • 将颜色转换为 CMYK 以用于打印和印前工作流程。
  • 利用即时 WCAG 对比度反馈构建可访问的调色板。
  • 为 UI 和插图生成互补和类似的方案。
  • 使用 EyeDropper 直接从屏幕上抓取颜色。
概述

立即转换各个方向的颜色

颜色转换器只有在能够表达您所做的每一种符号时才有用。该工具可将 HEX 与 RGB 相互转换,还可以实时桥接 HSL、HSV(也称为 HSB)和 CMYK。输入像#3b82f6这样的十六进制,你会立即得到它的rgb(59, 130, 246),它的hsl(217, 91%, 60%),它的hsv(217, 97%, 96%)和它的cmyk(76%, 47%, 0%, 4%)。更改任何单个字段,其他字段也会随之变化,这样您就可以在适合工作的模型中进行推理:用于标记的 HEX、用于画布和渐变的 RGB、用于直观的亮度和饱和度调整的 HSL/HSV、以及用于打印设计的 CMYK。

从 HEX 到 RGB、HSL、HSV 和 CMYK,无需数学运算

在底层,转换器将每个输入标准化为单个 RGB 三元组,然后应用标准 sRGB 公式来导出其他空间 - 使用相同的数学浏览器和设计工具,因此数字与您在 Figma、Photoshop 或 Chrome DevTools 中看到的数字相匹配。它还可以理解速记十六进制 (#fff)、带有 alpha 的 8 位十六进制 (#3b82f6aa)、rgb()/rgba()、hsl()/hsla() 以及常见的 CSS 命名颜色,例如深红色、青色和金色,因此您无需记住公式或切换选项卡。每种格式都有一个复制按钮,大型预览样本会在真实背景上显示您的颜色,因此您可以一目了然地检查它的完整性。

通过和声和渐变设计更好的调色板

选择单一颜色很容易;建立一个连贯的调色板是困难的部分。该转换器根据颜色理论规则生成颜色和谐 - 互补(在色轮上相反)、相似(相邻)、三元和四元(均匀间隔) - 作为可点击的色板,您可以直接放入项目中。亮度渐变以相同的色调和饱和度从接近黑色变为接近白色,为您提供设计师在需要悬停、边框和禁用状态时可以达到的色调和阴影。双色混合器可让您以选定的比例混合任意对以创建中间色,而微调行可让您一键变亮、变暗、饱和、去饱和或旋转色调。

内置可访问性和隐私性

好的颜色是可读的颜色。该转换器显示颜色与白色和黑色的 WCAG 对比度,并标记 AA (4.5:1) 和 AAA (7:1) 合规性,因此您可以在发货前捕获低对比度文本 - 专用对比度检查器的天然伴侣。由于一切都在您的浏览器本地运行,因此您的颜色永远不会离开您的设备:无需上传,无需帐户,也无需跟踪,这使品牌和客户的工作保持私密,同时工具保持即时。

特征
01
双向 HEX ↔ RGB ↔ HSL ↔ HSV ↔ CMYK,带​​ alpha
02
带有实时渐变轨道的交互式 RGB、HSL 和 Alpha 滑块
03
原生颜色选择器 + 浏览器 EyeDropper
04
最近的历史记录+保存的样本(保存在您的浏览器中)
05
CSS 命名颜色支持(深红色、青色、金色……)
06
和声、色调/阴影渐变 + 双色混合器
07
色盲预览(红色盲、绿色盲、蓝色盲)
08
实时 WCAG AA/AAA 对比徽章
09
CSS、Tailwind、SCSS、Swift 和 Android 的复制就绪导出
常问问题

常见问题

如何将 HEX 转换为 RGB?+

在十六进制字段中键入或粘贴十六进制值(如 #3b82f6 或 #fff),或使用颜色选择器。 RGB 值立即显示为 rgb(r, g, b),您可以一键复制。转换也以另一种方式进行——输入 rgb() 值,十六进制实时更新。

我可以同时转换为 HSL、HSV 和 CMYK 吗?+

是的。每个字段 - HEX、RGB、HSL、HSV/HSB 和 CMYK - 保持同步。编辑其中任何一个,其他都会立即重新计算,因此您可以读取同一颜色的所有五种符号,而无需运行单独的工具。

HSL 和 HSV 有什么区别?+

两者都通过色调描述颜色,但 HSL(亮度)和 HSV/HSB(值/亮度)对饱和度的建模方式不同。 HSL 将纯色设置为 50% 亮度,而 HSV 将纯色设置为 100% 值,因此相同的百分比在两者之间可能看起来更亮或更暗。该工具显示了两者,因此您可以选择您的框架所需的一个。

如何获取打印的 CMYK 值?+

以任何格式输入颜色并读取 CMYK 字段 - 例如 #3b82f6 变为 cmyk(76%, 47%, 0%, 4%)。 CMYK 是打印机使用的减色模型,因此当需要在小册子或包装中匹配网页颜色时,这非常方便。

我可以从屏幕上选择颜色吗?+

是的,在受支持的浏览器(Chrome、Edge 和其他具有 EyeDropper API 的浏览器)上,“选取”按钮会打开屏幕吸管,以便您可以对任何像素(图像、网站或桌面上的颜色)进行采样,并将其直接加载到转换器中。

我可以使用滑块调整颜色并添加透明度吗?+

是的。交互式 R、G、B、H、S、L 和 Alpha 滑块均显示实时渐变轨道,因此您可以通过拖动或键入精确值来微调阴影。 alpha 滑块生成 8 位十六进制和 rgba()/hsla() 输出以实现透明度。

它是否显示了色盲用户看到的颜色?+

是的。色盲预览模拟您的颜色在红色盲、绿色盲、蓝色盲和全色盲下的显示效果,因此您可以检查调色板是否仍然可以与大约十二分之一的男性和二百分​​之一的女性进行色觉缺陷的沟通。

我可以将颜色导出为 CSS、Tailwind 或应用程序代码吗?+

是的。导出面板提供 CSS 变量、rgb()、SCSS、Tailwind 配置条目、Swift UIColor、Android Color.parseColor 和 JSON 的复制就绪片段,以及本地存储在浏览器中的最近和保存的样本。

颜色转换器是免费且私密的吗?+

是的。它完全免费,无需注册,所有转换都在您的浏览器本地进行。您的颜色永远不会上传到服务器,因此品牌和客户工作保持私密。