Color Picker

颜色选择器

在线颜色选择和转换工具,支持 HEX、RGB、HSL、HSV 等格式

青色
透明 100%
图片取色
对比度检查
3.68
对白色 ✗
5.71
对黑色 ✓ AA
颜色混合
50%
色阶
配色方案
互补色
类似色
三色组
分裂互补
四色组
颜色格式
HEX
#3B82F6
RGB
rgb(59, 130, 246)
RGBA
rgba(59, 130, 246, 1.00)
HSL
hsl(217, 91%, 60%)
CMYK
cmyk(76%, 47%, 0%, 4%)
预设
最近使用 (0)
拾取颜色后会显示在这里

Color Picker

Online color picking and conversion tool

Runs locally · Nothing uploaded

Overview

An intuitive online color picker with real-time conversion between HEX, RGB, HSL, and HSB color formats. Select colors interactively via the color wheel or enter values directly, and copy any color format with one click.

Features

  • HEX color value selection
  • RGB color value conversion
  • HSL color value conversion
  • HSB/HSV color value conversion
  • Real-time color preview
  • Common color palettes
  • One-click copy in any format

How It Works

  1. 1 Click or drag on the color wheel to select a color
  2. 2 View HEX, RGB, HSL, and HSB values simultaneously
  3. 3 Or enter a known color value directly in the input field
  4. 4 The tool automatically syncs all format conversions
  5. 5 Click copy to get the color code in your preferred format

Tips

  • When designing UIs, adjusting brightness and saturation in HSL is more intuitive than editing HEX directly
  • Save brand colors in both HEX and RGB formats for different use cases
  • Check contrast ratios to ensure text remains readable on background colors

Related tools

Tags ColorHEXRGBHSL

FAQ

What is the difference between HEX and RGB?

HEX represents color in hexadecimal (e.g., #FF5733), while RGB uses red, green, and blue values. They are equivalent, just different notations.

What does HSL stand for?

HSL stands for Hue, Saturation, and Lightness. It is closer to how humans perceive color and is ideal for adjusting color styles.

How do I get a color from a webpage element?

Use the browser developer tools element inspector to view the computed color of any element, then paste it into the color picker.