Color Picker 颜色选择器
Color Picker 可在浏览器中实现 HEX、RGB 和 HSL 颜色格式的相互转换，支持3位和6位HEX格式，完全基于客户端纯数学算法，无需上传数据，保障隐私安全。
Color Picker 是一款强大的颜色转换工具，支持HEX（#rrggbb）、RGB（0-255每通道）和HSL（色相0-360度，饱和度与亮度0-100%）三种格式的快速转换。该工具完全在浏览器端运行，不上传任何数据，确保您的颜色信息安全隐私。它还能生成适用于CSS自定义属性和Tailwind CSS任意值语法的输出格式，方便前端开发者和设计师使用。此外，您也可以使用相关工具如 Hash Generator 和 Css Minifier 来辅助您的网页开发流程。
如何使用 Color Picker
- 输入您已有的颜色代码，支持HEX（包括3位缩写和6位完整格式）、RGB或HSL格式。
- 工具自动计算并显示对应的其他两种颜色格式，确保转换精度达到100%。
- 可复制生成的CSS自定义属性代码，例如：
--my-color: #ff5733;，或Tailwind CSS任意值语法：bg-[#ff5733]。 - 调整颜色数值后，实时查看结果，便于快速设计和调试。
- 无需网络连接，所有计算均在浏览器端完成，确保数据不外泄。
工作原理
Color Picker 利用纯数学公式实现颜色空间转换。HEX转RGB时，将16进制分解为红绿蓝三通道，每通道8位（0-255）数值。RGB转HSL采用经典算法，计算色相（0-360度）、饱和度和亮度（0-100%）。该工具支持3位HEX缩写自动扩展为6位格式，保证颜色准确还原。所有转换均无外部依赖，提升响应速度与隐私安全。
示例
输入: #3a9 (3位HEX缩写)
输出:
HEX: #33aa99
RGB: rgb(51, 170, 153)
HSL: hsl(162, 50%, 44%)
CSS变量: --color: #33aa99;
Tailwind: bg-[#33aa99]适用场景
- 前端开发者在编写CSS时，快速转换和验证颜色格式。
- 设计师在网页配色时，精准控制颜色的色相、饱和度和亮度。
- SEO专家通过生成规范的CSS代码，提高网页样式加载效率。
- 学生学习颜色空间转换原理和CSS自定义属性应用。
- 需要快速生成Tailwind CSS任意值语法的开发者。
您还可以结合 Base64 Encode 工具，为带颜色的图像或样式生成Base64编码，方便嵌入。
常见问题
Color Picker 支持哪些颜色格式转换？
Color Picker 支持HEX（包括3位缩写和6位完整格式）、RGB（每通道0-255）及HSL（色相0-360度，饱和度和亮度0-100%）三种颜色格式的相互转换。
转换过程中是否会上传我的颜色数据？
不会。所有转换均在浏览器客户端完成，代码基于纯数学算法，无需任何数据上传，确保您的颜色信息隐私安全。
如何使用生成的颜色代码在CSS中应用？
工具会输出CSS自定义属性格式，例如 --my-color: #ff5733;，以及Tailwind CSS任意值语法，如 bg-[#ff5733]，方便直接复制使用。
3位HEX颜色代码如何转换为6位？
3位HEX如 #3a9 会自动扩展为6位格式 #33aa99，即每个字符重复两次，确保颜色准确无误。
Color Picker 是否支持批量处理颜色？
当前版本主要面向单个颜色转换，专注于精确和快速的单色处理，批量功能暂未集成。