ColorPickerTools

Hex Color Picker

Pick a color or type a hex code and get a live preview with shades, tints and copy buttons.

Quick answer: Type or pick a hex code, preview it live, and copy the exact HEX along with RGB, HSL and CMYK. A tint-and-shade ramp gives you hover and border variants of the same color.

#3B82F6
Hue217.2°
Saturation91.2%
Lightness59.8%
HEX
#3B82F6
RGB
rgb(59, 130, 246)
HSL
hsl(217.2, 91.2%, 59.8%)
CMYK
cmyk(76%, 47%, 0%, 4%)
Shades & tints
Core facts
Notation#RRGGBB (accepts #RGB and #RRGGBBAA)
ExtrasLive preview, shades & tints
Privacy100% client-side
CostFree

What is a Hex Color Picker?

A hex color picker is a color tool focused on the six-digit hexadecimal notation used across the web (#RRGGBB). It lets you choose or paste a hex value, preview the result and generate tints and shades — the practical workflow when a stylesheet, invoice or brand sheet gives you a hex code and you need to see and extend it.

Common Uses for Hex Color Picker

  • Preview a hex code from a brand sheet before adding it to a stylesheet
  • Generate lighter and darker variants of a hex for hover and disabled states
  • Check that a hex is valid and see its RGB, HSL and CMYK equivalents

Frequently Asked Questions

What does a hex color look like?
A hash followed by six hexadecimal digits in pairs: #RRGGBB, where each pair is the red, green and blue channel from 00 to FF. #FF0000 is pure red, #FFFFFF is white.
What about three-digit hex?
A shorthand like #F00 is expanded to #FF0000. The tool accepts both forms.
Can a hex include transparency?
Yes, an eight-digit hex (#RRGGBBAA) exists; this tool reads the six colour digits and ignores the alpha channel.

More color pickers

More Color Tools