Guide

Color Picker Guide: HEX, RGB, HSL, and HSV Color Formats Explained

Bill Crawford — Guide — February 2026 — 7 min read · Last updated September 18, 2025

Contents

Color models explained
HEX colors
RGB and RGBA
HSL
How to use the tool
Practical color tips

Pick any color and get HEX, RGB, and HSL values.

Color Models Explained

The same color can be expressed in multiple formats, each optimized for a different use case. Web design primarily uses four: HEX, RGB, RGBA, and HSL.

HEX Colors

HEX (hexadecimal) colors express a color as a 6-digit code: #RRGGBB. Each pair of digits is a hexadecimal number (00–FF) representing the intensity of red, green, and blue channels from 0 to 255.

#FF0000  →  pure red   (R=255, G=0, B=0)
#00FF00  →  pure green (R=0, G=255, B=0)
#0000FF  →  pure blue  (R=0, G=0, B=255)
#FFFFFF  →  white
#000000  →  black
#808080  →  medium gray

HEX can be shortened to 3 digits when each pair is doubled: #FF6600 = #F60. HEX is the most common format in CSS and design tools.

RGB and RGBA

RGB expresses color as three integer values 0–255: rgb(255, 0, 0). RGBA adds a fourth channel — alpha — for opacity, ranging from 0.0 (fully transparent) to 1.0 (fully opaque): rgba(255, 0, 0, 0.5) is a semi-transparent red.

RGB is useful when you need to manipulate individual channels in code or apply opacity. In CSS, it works identically to HEX — most tools accept both.

HSL

HSL (Hue, Saturation, Lightness) is the most human-readable color format. Hue is the color wheel angle (0–360°), saturation is color intensity (0%=gray, 100%=full color), lightness is brightness (0%=black, 50%=normal, 100%=white).

hsl(0, 100%, 50%)    →  pure red
hsl(240, 100%, 50%)  →  pure blue
hsl(0, 0%, 50%)      →  medium gray
hsl(120, 60%, 40%)   →  muted green

HSL is excellent for creating color variations programmatically — darken a color by decreasing lightness, mute it by decreasing saturation, create a complementary color by adding 180 to the hue.

How to Use the Tool

Click anywhere in the color canvas

The large gradient canvas lets you choose a color by clicking. Move horizontally to change saturation; move vertically to change lightness.

Use the hue slider

The rainbow slider at the bottom selects the base hue (0–360°). Drag it to pick a color family.

Use the opacity slider (RGBA)

The checkerboard slider controls the alpha channel for transparency.

Type a value directly

Click any color format input (HEX, RGB, HSL) and type a value to jump directly to that color.

Copy the values you need

Click Copy next to any format to copy that color value to your clipboard.

Practical Color Tips

Creating a darker/lighter version of a color

Use HSL: copy the hue and saturation values, then adjust only the lightness. Keeping hue and saturation fixed ensures the variations look like the same color family:

hsl(210, 80%, 55%)   ← base blue
hsl(210, 80%, 40%)   ← darker version
hsl(210, 80%, 70%)   ← lighter version

Checking contrast for accessibility

WCAG AA accessibility requires a 4.5:1 contrast ratio for normal text, 3:1 for large text. Dark text on light backgrounds generally passes; low-contrast gray-on-white combinations often fail. Use a contrast checker alongside the color picker to verify.

Finding complementary colors

Add or subtract 180° from the hue to get the complementary color. Add 120° and 240° for a triadic palette. Analogous colors (±30°) create harmonious, less contrasting combinations.

Frequently Asked Questions

What's the difference between HSL and HSV?▼

HSL (Hue, Saturation, Lightness) and HSV (Hue, Saturation, Value/Brightness) are similar but not identical. In HSL, 50% lightness is the pure color and 100% lightness is white. In HSV, 100% value is the pure color and 0% value is black. CSS uses HSL; many design tools use HSV/HSB internally.

Why does my color look different on screen vs print?▼

Screens use RGB (additive color — starts black, adds light), while print uses CMYK (subtractive color — starts white, adds ink). RGB colors outside the CMYK gamut can't be accurately reproduced in print. For print design, work in CMYK-aware tools like Adobe Illustrator or InDesign.

What does the # mean in HEX colors?▼

The # is simply a prefix that identifies the following characters as a hexadecimal color code. It's required in CSS but sometimes omitted in contexts where the format is clear (like some color picker APIs). The actual color data is the 6 (or 3) digits after the #.

How do I convert a Pantone color to HEX?▼

Pantone provides official RGB/HEX values for each Pantone color on their website. Note that Pantone colors are print-focused and the RGB conversion is an approximation — screen display will differ from the printed Pantone chip.