Color Picker

Pick a color and get all format codes. Perfect for web development and design work.

Color Picker

HEX
#3B82F6
RGB
rgb(59, 130, 246)
HSL
hsl(217, 91%, 60%)

Conversion Guide

Conversion

H

HEX to RGB

RGB = Convert hex pairs to decimal

Each hex pair (RR, GG, BB) converts to 0-255

R

RGB to HSL

HSL = Calculate hue, saturation, lightness

HSL provides intuitive color manipulation

Step-by-Step Scenario

Example Scenario

HEX

#3B82F6

1

Convert to RGB

  • R: 3B = 59
  • G: 82 = 130
  • B: F6 = 246

Convert each hex pair to decimal

2

Calculate HSL

  • H: 217°
  • S: 90%
  • L: 60%
hsl(217, 90%, 60%)

Additional Examples

Red Color

HEX: #FF0000

RGB

rgb(255, 0, 0)

HSL

hsl(0, 100%, 50%)

Green Color

HEX: #00FF00

RGB

rgb(0, 255, 0)

HSL

hsl(120, 100%, 50%)

Characteristics of Color Picker

Multiple Formats

Get HEX, RGB, and HSL formats simultaneously. All formats are calculated from the selected color.

Copy to Clipboard

One-click copy for any color format. Perfect for quickly using colors in your code or design tools.

Visual Preview

See the selected color in real-time. Large preview area helps verify color selection.

CSS Ready

All formats work directly in CSS. Copy and paste into your stylesheet without modification.

Important Notes

  • The color picker uses your browser's native color picker interface. The appearance may vary by browser.
  • All color formats (HEX, RGB, HSL) are calculated from the selected color. They represent the same color in different notations.
  • HEX format is most compact (#RRGGBB). RGB is more readable (rgb(r, g, b)). HSL is intuitive for color manipulation (hsl(h, s%, l%)).
  • Click the copy button to copy any format to clipboard. The button shows a checkmark when successfully copied.
  • For web development, HEX is commonly used. For design tools, RGB or HSL may be preferred depending on the tool.

Frequently Asked Questions

Find answers to common questions about the color picker.