无需登录 数据私有 本地保存

在线颜色选择器 - 拾色器与调色板工具

前端设计 开发工具 拾色器 调色板 颜色
51
0
0
0
#4A90D9
rgb(74, 144, 217)
HEX #4A90D9
RGB rgb(74, 144, 217)
HSL hsl(210, 65%, 57%)
🎨 预设调色板
🕐 最近使用
暂无历史颜色，点击任意颜色即可记录

📖 常见问题与知识点

颜色选择器是一种工具，帮助用户在视觉上选择、调整和复制颜色值。它通常支持多种颜色格式（HEX、RGB、HSL等），并提供色相、饱和度、明度（HSB/HSV）的调节功能。设计师和开发者常用它来精确获取网页、UI设计或图像中的颜色代码。本工具还支持屏幕取色功能（需浏览器支持 EyeDropper API），可以直接从屏幕上任意位置拾取颜色。

  • HEX（十六进制）：如 #4A90D9，用6位十六进制数表示红、绿、蓝通道，简洁高效，是网页设计中最常用的格式。支持3位简写（如#FFF）和8位含透明度（如#4A90D9FF）。
  • RGB：如 rgb(74, 144, 217)，直接使用红、绿、蓝三通道的数值（0-255）。RGBA格式增加Alpha透明度通道，如rgba(74, 144, 217, 0.5)。
  • HSL：如 hsl(210, 65%, 57%)，使用色相（Hue 0-360）、饱和度（Saturation 0-100%）、亮度（Lightness 0-100%）描述颜色，更符合人类对颜色的直观理解。HSLA同样支持透明度。

  • 色相（Hue）：颜色的基本属性，表示颜色在色环上的位置，范围0°-360°。0°为红色，120°为绿色，240°为蓝色。
  • 饱和度（Saturation）：颜色的纯度或鲜艳程度。0%为灰色（无色彩），100%为最鲜艳的纯色。
  • 明度（Brightness/Value）：颜色的明亮程度。0%为纯黑，100%为最亮。在HSL中对应的是亮度（Lightness），概念略有不同——HSL的50%亮度对应最纯的颜色。

本工具的拾色面板采用HSV模型：水平轴为饱和度，垂直轴为明度，色相通过下方的色相条调节。

点击"屏幕取色"按钮（吸管图标），浏览器会弹出取色器，您可以在屏幕任意位置点击来拾取颜色。该功能基于 EyeDropper API，目前主要在 Chromium 内核浏览器（Chrome 95+、Edge 95+）中可用。如果您的浏览器不支持此功能，按钮将自动隐藏。取色成功后，拾取的颜色会自动填入工具并添加到历史记录中。

Alpha通道表示颜色的透明度，取值范围0（完全透明）到1（完全不透明）。在CSS中，可通过rgba()、hsla()或8位HEX（如#4A90D980表示50%透明度）来设置。透明色在网页设计中非常重要，常用于叠加效果、阴影、渐变等场景。本工具的Alpha条支持0-1的连续调节，预览区域使用棋盘格背景直观展示透明度效果。

本工具会自动进行颜色格式转换。当您通过拾色面板选择颜色或修改任意格式的数值时，所有其他格式（HEX、RGB、HSL、RGBA、HSLA）都会实时同步更新。您可以直接复制任意格式的颜色代码用于CSS、设计工具或编程项目中。常见的转换规则：RGB通过除以255归一化后进行色彩空间计算；HSL则通过色相角度和饱和度、亮度的百分比来描述同一颜色。

颜色显示受多种因素影响：屏幕类型（IPS、OLED、TN面板各有不同的色彩表现）、色域覆盖（sRGB、DCI-P3、Adobe RGB等）、屏幕校准状态、亮度设置以及环境光线。同一HEX颜色值在不同设备上可能呈现不同的视觉效果。对于专业设计工作，建议使用经过校色的显示器，并了解目标用户的常见设备类型。网页设计通常以sRGB色彩空间为基准。
🔧 相关工具