颜色转换器
在 HEX, RGB, 和 HSL .
格式之间即时转换，可视化颜色并获取项目的CSS代码。
#3B82F6
Click to pick color
CSS Usage
color: #3B82F6;COPY
rgb(59, 130, 246);COPY
hsl(217, 91%, 60%);COPY
#
Red
Green
Blue
Hue (°)
Sat (%)
Light (%)
常见用例
🎨
网页设计
将找到的随机HEX代码转换为HSL值，以便轻松创建用于悬停状态的更亮或更暗的变体。
🖨️
印刷准备
检查品牌颜色的CMYK等效值，看看它们在名片上会是什么样子。
💻
开发
通过将不透明HEX代码（例如#RRGGBBAA）转换为更易读的RGBA格式来调试颜色问题。
🖌️
主题创建
通过将所有旧版RGB值转换为CSS变量的HEX来标准化您的调色板。
使用说明
此工具旨在成为网页开发中颜色格式的瑞士军刀。
输入和转换
- 任意位置输入: 在任何字段（HEX、R/G/B、H/S/L）中输入值。其他字段会自动更新。
- 颜色选择器: 点击大颜色预览框打开浏览器的原生颜色选择器（吸管工具）。
复制到剪贴板
- 一键复制: 点击HEX字段旁边的复制图标。
- CSS代码片段: 在预览下方的框中，点击任意行（例如rgb(0,0,0)）以复制有效的CSS代码。
代码中的颜色转换
以编程方式将HEX转换为RGB是常见任务。以下是在JavaScript和Python中的实现方法。
JavaScriptHex to RGB
function hexToRgb(hex) {
// Remove hash
hex = hex.replace(/^#/, '');
// Parse components
const bigint = parseInt(hex, 16);
const r = (bigint >> 16) & 255;
const g = (bigint >> 8) & 255;
const b = bigint & 255;
return `rgb(${r}, ${g}, ${b})`;
}
console.log(hexToRgb("#ff0000"));
// Output: "rgb(255, 0, 0)"PythonPillow / Native
def hex_to_rgb(hex_val):
hex_val = hex_val.lstrip('#')
return tuple(int(hex_val[i:i+2], 16) for i in (0, 2, 4))
print(hex_to_rgb("#3B82F6"))
# Output: (59, 130, 246)CSSModern Colors
/* Classic */
.color { color: #ff0000; }
.color { color: rgb(255, 0, 0); }
/* Modern (Level 4) - Space separated */
.color { color: rgb(255 0 0); }
.color { color: rgb(255 0 0 / 50%); } /* with alpha */常见问题
什么是HEX？
HEX是RGB值的十六进制表示。它以#开头，后跟6个字符（0-9，A-F）。第一对代表红色，第二对代表绿色，第三对代表蓝色。
什么时候应该使用HSL？
HSL（色相、饱和度、亮度）对人类更直观。通过简单调整亮度创建深浅变化或调整色相创建互补色更容易。
什么是不透明度（Alpha）？
不透明度控制颜色的透明度。在RGBA中，它是0（完全透明）到1（完全不透明）之间的数字。
色盲有多常见？
大约1/12的男性和1/200的女性有某种形式的色盲。使用高对比度并且不要仅依靠颜色传达关键信息很重要。