好工具啊

颜色转换

HEX、RGB、HSL 颜色互转，取色器，调色板

颜色转换器颜色代码转换HEX转RGBRGB转HSL取色器工具网页颜色工具
最后更新: 2026/4/8
#3b82f6
R59
G130
B246
rgb(59, 130, 246)
H217°
S91%
L60%
hsl(217, 91%, 60%)
常用颜色
分享：

使用说明

  1. 打开工具后，默认显示蓝色作为示例颜色，可直接查看其HEX、RGB、HSL三种格式的数值
  2. 在HEX输入框中输入6位十六进制颜色代码（如#FF5733），工具自动计算并更新RGB和HSL数值
  3. 或拖动RGB滑块调整红绿蓝三色数值（0-255），实时查看颜色变化和格式转换结果
  4. 或拖动HSL滑块调整色相（0-360°）、饱和度（0-100%）、亮度（0-100%）参数精确微调颜色
  5. 点击左上角颜色预览方块激活取色器，从屏幕任意位置选取颜色后自动转换所有格式
  6. 点击任意格式旁的复制按钮即可将颜色值粘贴到剪贴板，直接用于设计软件或代码编辑器
  7. 点击下方常用颜色方块快速选择预设颜色，或从历史记录中回选之前使用的颜色

核心功能

  • 1
    格式互转
    支持HEX、RGB、HSL三种主流颜色格式实时双向转换，输入任意一种格式即可自动计算并同步显示其他两种格式的完整数值
  • 2
    取色器
    集成浏览器原生取色器功能，点击颜色预览区域即可从屏幕任意位置或图片中直接选取颜色，自动转换为所有格式显示
  • 3
    颜色名称
    内置20种常用颜色名称映射表，当颜色值匹配red、blue、gold等标准名称时自动显示对应的英文颜色名，便于理解和使用
  • 4
    历史记录
    自动保存最近使用的12种颜色历史，形成可视化的颜色记录列表，一键即可快速回选之前使用的颜色值，无需重复输入
  • 5
    一键复制
    每种颜色格式旁边都配有复制按钮，点击即可将HEX代码、RGB数值或HSL参数完整复制到剪贴板，直接粘贴到设计软件或代码中使用

适用场景

✓
网页设计
网页设计师在使用不同设计工具时经常遇到颜色格式不统一的问题，此工具可快速将Figma输出的HEX值转换为CSS所需的RGB或HSL格式，确保设计稿与代码实现的颜色完全一致
✓
前端开发
前端工程师在编写CSS样式或JavaScript颜色逻辑时，需要实时调整颜色参数并验证效果，通过滑块微调RGB或HSL数值可精确控制颜色表现，满足开发调试需求
✓
配色探索
通过随机颜色功能快速生成灵感配色方案，配合历史记录保存满意的颜色组合，为海报设计、品牌配色或插画创作提供丰富的色彩参考素材
✓
颜色查询
遇到未知颜色代码时，直接粘贴HEX值即可查看对应的颜色名称和RGB参数，快速识别颜色类型并了解其在不同色彩模式下的具体数值构成

工具优势

纯浏览器端处理
所有颜色转换计算完全在浏览器本地完成，无需将颜色数据上传到服务器，确保设计隐私和颜色参数安全
完全免费使用
无需注册账号、无需付费订阅、无使用次数限制，打开网页即可无限次使用所有颜色转换和取色功能
实时同步转换
输入任意格式数值后其他格式立即同步更新，无需点击转换按钮或等待计算，操作流畅高效

相关工具

关联介绍

什么是色彩模式转换

色彩模式转换改变颜色表示方式。RGB↔HSL：H=atan2(√3(R-G),2B-G)，S=1-min/max/255。RGB↔CMYK：C=1-R/255。转换可能不完美（色域差异），实际颜色略有偏差。

什么是色域

色域是设备能显示的颜色范围。sRGB是互联网标准色域，Adobe RGB覆盖更多绿色，DCI-P3是数字影院标准。色域外颜色无法准确显示，需转换到目标色域。