Color Picker Guide: HEX, RGB, and HSL Explained for Beginners
Every color on your screen is a lie. Your monitor has no idea what "red" is — it just blasts different intensities of three LEDs at your retina and lets your visual cortex do the rest. Understanding color formats is understanding that lie, and knowing which notation to use when makes working with color dramatically less frustrating.
Why Color Models Exist
A color model is a mathematical system for representing color as numbers. Monitors are not magic windows — they are grids of pixels, each pixel a cluster of three sub-pixels (one red, one green, one blue). By varying the brightness of each sub-pixel independently, a display can approximate millions of distinct colors. This is why colors on screens are described in terms of red, green, and blue light — not red, yellow, and blue like paint mixing in school.
Different color models exist because different tasks benefit from different abstractions:
- RGB maps directly to how monitors work — each value controls one physical sub-pixel
- HEX is RGB encoded more compactly for use in web code
- HSL maps to how humans think about color — "make it a bit darker" is one axis, not three
- CMYK maps to how physical printing works — cyan, magenta, yellow, and key (black) inks
A color picker tool lets you navigate between these representations, sample colors from a visual spectrum, and convert values between formats — all tasks that are tedious to do by hand.
HEX: The Web Standard
HEX (hexadecimal) color notation was adopted as the standard for web colors in the 1990s because it is compact and unambiguous in CSS and HTML. A HEX color looks like #FF5733.
The format is #RRGGBB where RR, GG, and BB are two-character hexadecimal numbers representing the intensity of red, green, and blue respectively. Hexadecimal (base-16) uses digits 0–9 plus letters A–F, so each two-character pair can represent values from 00 (0 in decimal) to FF (255 in decimal).
Reading a HEX code: #FF5733 → Red = FF (255), Green = 57 (87), Blue = 33 (51) → a bright orange-red. #000000 = black (all channels off). #FFFFFF = white (all channels at maximum). #FF0000 = pure red.
Shorthand HEX notation exists for colors where each channel's two digits are identical: #RGB expands to #RRGGBB. So #F30 is equivalent to #FF3300. This only works when both digits of each channel are the same.
HEX codes can also carry an alpha (opacity) channel: #RRGGBBAA, where AA is the opacity from 00 (transparent) to FF (opaque). This 8-character form is supported in all modern browsers.
RGB: Additive Color
RGB notation writes the same three channel values in decimal, making them easier to read and edit manually. The format is rgb(red, green, blue) with each channel ranging from 0 to 255.
With 256 possible values per channel and three channels, RGB can represent 256 × 256 × 256 = 16,777,216 distinct colors — over 16 million. In practice, the human eye can distinguish far fewer, but the range ensures smooth gradients without visible banding.
The additive model means adding more light produces lighter colors: rgb(0, 0, 0) is black (no light), rgb(255, 255, 255) is white (all light at full intensity). This is the opposite of subtractive color mixing with paint or ink, where adding more pigment produces darker results.
RGB also supports opacity through a fourth parameter: rgba(red, green, blue, alpha) where alpha runs from 0 (transparent) to 1 (opaque). For example, rgba(255, 87, 51, 0.5) is that same orange at 50% opacity.
RGB is the best format when you need to:
- Pass color values to JavaScript or canvas APIs
- Perform mathematical color operations (averaging, blending)
- Read color values from a screen sampler and use them directly
HSL: The Designer's Model
HSL was designed to make color manipulation intuitive. Instead of describing color as a mixture of light primaries, it describes it the way a human would: by the color itself, how vivid it is, and how bright it is.
H — Hue (0–360°): The color's position on a color wheel. 0° and 360° are red, 120° is green, 240° is blue. Every color of the rainbow is somewhere on this spectrum.
S — Saturation (0–100%): How vivid or grey the color is. At 0%, any hue becomes a neutral grey. At 100%, the color is as vivid as possible.
L — Lightness (0–100%): How dark or bright the color is. 0% is always black, 100% is always white, and 50% gives the full color at its natural brightness.
Why designers prefer HSL: To create a lighter version of a blue button, change L from 45% to 65%. To desaturate it for a disabled state, change S from 80% to 20%. In RGB, both operations require changing all three channel values simultaneously with no obvious pattern.
HSL is the most useful format for:
- Creating color scales (light to dark variants of one hue)
- Generating accessible color pairs (consistent hue, predictable contrast)
- Building design systems where color relationships matter
- CSS animations that smoothly transition between hue, saturation, or lightness independently
Modern CSS also supports HSLA with an alpha channel: hsla(220, 90%, 60%, 0.8).
Picking Accessible Colors
Color accessibility is not optional for professional web work — it is required by WCAG 2.1 (Web Content Accessibility Guidelines), which is incorporated into legal accessibility requirements in the US, EU, UK, and many other jurisdictions.
The key metric is contrast ratio: the luminance difference between text and background. It ranges from 1:1 (no contrast, invisible) to 21:1 (black on white, maximum contrast).
WCAG 2.1 minimum requirements:
- Normal text: minimum 4.5:1 contrast ratio (AA level)
- Large text (18pt+ or 14pt+ bold): minimum 3:1 contrast ratio
- AAA level (enhanced): 7:1 for normal text, 4.5:1 for large text
- Non-text UI components (icons, borders): minimum 3:1
Common failures: light grey text on white backgrounds, yellow text on white, light blue text on a pale background. Tools like GlintKit's Contrast Checker calculate the ratio between any two colors and report pass/fail status against both AA and AAA levels.
Approximately 8% of men and 0.5% of women have some form of color vision deficiency — most commonly red-green (deuteranopia or protanopia). Never rely on color alone to convey critical information; pair it with shape, pattern, or text labels.
Common Named Colors Reference
These are frequently referenced colors with their exact HEX and RGB values:
| Color Name | HEX | RGB |
|---|---|---|
| Pure Red | #FF0000 | rgb(255, 0, 0) |
| Pure Green | #00FF00 | rgb(0, 255, 0) |
| Pure Blue | #0000FF | rgb(0, 0, 255) |
| White | #FFFFFF | rgb(255, 255, 255) |
| Black | #000000 | rgb(0, 0, 0) |
| Orange | #FF5733 | rgb(255, 87, 51) |
| Purple | #8B5CF6 | rgb(139, 92, 246) |
| Amber | #F59E0B | rgb(245, 158, 11) |
| Teal | #14B8A6 | rgb(20, 184, 166) |
| Slate | #64748B | rgb(100, 116, 139) |
When to Use Which Format
There is no single correct format — the right choice depends on context:
| Format | Best Context | Avoid When |
|---|---|---|
| HEX | Static CSS color values, design tokens, brand color palettes | You need transparency (use rgba or hsla instead) |
| RGB / RGBA | JavaScript canvas, color math, opacity animations | You need to read or edit the color intuitively |
| HSL / HSLA | Design systems, dynamic theming, CSS custom properties with variations | Working directly with a legacy codebase using HEX throughout |
| Named colors | Quick prototypes, readable code comments, educational examples | Precise design work — there are only ~147 CSS named colors |
A practical rule: use HEX for storing colors in design files and tokens, use HSL in CSS when building dark/light mode systems or color scales, and use RGB when doing programmatic color manipulation.
Pick, Sample, and Convert Colors Instantly
GlintKit's Color Picker gives you a full visual spectrum, HEX/RGB/HSL output, and one-click copying. Free, no account needed.
Frequently Asked Questions
What is the difference between HEX and RGB?
HEX and RGB describe exactly the same color information in different encodings. RGB uses three decimal numbers (0–255) for red, green, and blue: rgb(255, 87, 51). HEX converts each to base-16 and writes them together: the same color becomes #FF5733. They are fully interchangeable; HEX is more compact in CSS code, RGB is easier to edit by hand.
How do I find the color code of something on my screen?
On Windows, PowerToys Color Picker (Win+Shift+C) samples any pixel on screen. On macOS, the Digital Color Meter app in Applications/Utilities shows the color under your cursor in real time. In any browser, the developer tools (F12) color picker inspects element colors directly. GlintKit's Color Picker and Color Converter tools let you input and convert any value instantly.
What is HSL and why should I care?
HSL stands for Hue, Saturation, Lightness. Hue is position on a 0–360° color wheel. Saturation is vividness (0% = grey, 100% = full color). Lightness is brightness (0% = black, 100% = white). Designers prefer HSL because adjusting one axis produces predictable results — changing lightness from 40% to 60% makes any color consistently lighter without recalculating all three RGB channels.
How do I make sure my colors are accessible?
Check the contrast ratio between your text and background colors. WCAG 2.1 requires a minimum 4.5:1 ratio for normal text and 3:1 for large text. GlintKit's Contrast Checker calculates this instantly. As a rough guide: dark text on light backgrounds almost always passes; medium grey on white often fails. Never use color as the only way to communicate critical information, since about 8% of men have some form of color vision deficiency.
Can I convert between HEX, RGB, and HSL?
Yes — all three formats are mathematically interconvertible. HEX to RGB is a direct base-16 to base-10 conversion per channel. RGB to HSL requires normalizing values to 0–1 and computing the relationships between maximum and minimum channel values. GlintKit's Color Converter handles all conversions instantly — paste any format and get the others.
Convert Between HEX, RGB, and HSL
Paste any color format and get all the others in one click. Also converts to CMYK, HSV, and CSS color names.