AIStacker
媒体

概览

颜色转换器

在 HEX、RGB 和 HSL 格式之间即时转换颜色,支持实时预览和对比度检测。

分类 hub

媒体

问题

2

FAQ

3

Color Inspector

OKLCH

oklch(43.7% 0.120 269)

RGB

rgb(99, 102, 241)

Preview Mode

#6366F1

Contrast

White Text

Safe for accessibility

This color works best for primary brand elements.
Tailwind Shades (50-900)
Click shade to copy hex

可以解决的问题

如何在线将 HEX 转换为 RGB?

只需在工具中输入 HEX 代码,它会立即计算并显示对应的 RGB 和 HSL 值,方便在代码中直接使用。

如何在线检查颜色对比度?

工具会自动根据您选取的颜色提示最佳文本颜色(深色或浅色),帮助您确保 UI 的可读性。

该工作流相关指南

Supporting guides that connect this tool to the broader category workflow.

打开分类 hub

是什么

颜色转换器 是什么

网页上的颜色通常以三种主要格式表示:HEX(十六进制)、RGB(红、绿、蓝)和 HSL(色相、饱和度、亮度)。本工具提供了一种在这些格式之间无缝切换的方法,同时保持视觉精确度。

如何使用

如何使用颜色转换器

在输入框中输入十六进制颜色代码(例如 #6366f1),或使用颜色选择器选取自定义色调。RGB 和 HSL 数值将实时更新。点击每个数值旁的复制按钮,即可在您的 CSS 或设计软件中使用。

使用示例

使用示例

输入: #6366f1

RGB: rgb(99, 102, 241)
HSL: hsl(239°, 84%, 67%)
预览: 一种充满活力的靛蓝色,非常适合作为主按钮颜色。

常见使用场景

常见使用场景

1. 将设计稿(Figma/Sketch)中的颜色转换为 CSS 可用的 RGB 或 HSL 值。

2. 检测颜色是“深色”还是“浅色”,以优化文本对比度。

3. 使用随机颜色生成器尝试不同的色调搭配。

4. 在前端开发和 UI 原型设计中快速选取颜色。

常见问题

常见问题

支持 3 位十六进制代码吗?v
支持。像 #F00 这样的简写代码在转换过程中会自动扩展为完整的 6 位代码 (#FF0000)。
RGB 和 HSL 有什么区别?v
RGB 基于屏幕发光原理(红、绿、蓝),而 HSL 对人类来说更直观,它通过色相、色彩浓淡(饱和度)和明暗程度(亮度)来描述颜色。
转换精确吗?v
绝对精确。本工具采用标准色空间转换数学公式,确保数值在不同格式之间保持完全一致。