Color Picker

What is Color Picker?

Use the color swatch to pick visually, or type a hex value directly, and see the equivalent HEX, RGB, and HSL values live. Copy whichever format you need for your CSS, design tool, or code. Everything runs in your browser; no color values are sent anywhere.

How to Use the Color Picker

1. 1

   Pick a Color or Type Hex: Use the visual swatch picker, or type a hex value directly.

2. 2

   Read HEX, RGB, and HSL Instantly: All three formats update together automatically.

3. 3

   Copy Any Format: Use the copy button next to whichever format you need.

How HEX, RGB, and HSL Relate to Each Other

All three describe the same color, just structured differently. HEX and RGB are the same numbers in different bases: hex packs each of the red, green, and blue channels (0–255) into a two-digit base-16 pair, e.g. #4287F5 is red=66, green=135, blue=245 in decimal. HSL re-expresses that same RGB color around hue (0–360° position on the color wheel), saturation (0–100%, how far from gray), and lightness (0–100%, how far from black or white). Useful when you want to adjust a color's brightness or intensity without hunting for the right RGB combination by hand.

Worked Example

Picking #4287F5 shows: HEX: #4287F5 RGB: 66, 135, 245 HSL: 217°, 90%, 61% All three values update together the moment you change any one of them. Pick a new color, type a new hex code, or adjust the swatch, and HEX, RGB, and HSL stay in sync.