HEX, RGB, HSL: making sense of color codes
Reviewed July 28, 2026
Boltpic
Each guide describes the current Boltpic tools and links to relevant technical references. Results that depend on the image, browser, or device are identified as variable.
Here's one red, written three ways: #e63946, rgb(230, 57, 70), hsl(355, 78%, 56%). Same pixels on screen, same color to the eye. They're not three colors — they're three notations, and each one is convenient for a different job.
Once you can read all three, a lot of small daily frictions disappear: matching a brand color exactly, darkening a button for its hover state, or explaining to a client why their “light gray on white” text is unreadable.
HEX: compact and copy-paste friendly
A HEX code is three numbers in disguise. After the #, each pair of characters is one channel — red, green, blue — written in base 16, where 00 means 0 and ff means 255. So #e63946 breaks down as e6 (230) red, 39 (57) green, 46 (70) blue. When all three pairs double up, there's a shorthand: #ffffff becomes #fff.
An eight-digit HEX value such as #e6394680 adds a fourth pair for alpha; 80 is about 50% opacity. HEX is also case-insensitive, so #E63946 and #e63946 represent the same color. Its compact form makes it convenient for sharing a color in a chat, ticket, or stylesheet.
RGB: the closest to how screens think
rgb(230, 57, 70) says the same thing in plain decimal: how much red, green, and blue light to mix, each from 0 to 255. Screens literally work this way — three tiny lights per pixel — which makes RGB the natural notation when you're reasoning about light itself. Add an alpha value and you get rgba(230, 57, 70, 0.5) for a half-transparent version.
RGB's weakness shows the moment you try to edit a color by hand. Quick: how do you make rgb(230, 57, 70) a bit darker but keep it the same red? Lowering all three numbers by eye tends to shift the hue. That exact problem is what HSL solves.
HSL: the one designed for humans
hsl(355, 78%, 56%) reads as hue 355° on the color wheel, 78% saturation, and 56% lightness. These controls separate the color family, colorfulness, and position between black and white, which makes related variants easier to describe.
Those separate controls make variants easier to build. For a darker hover state, keep hue and saturation and reduce lightness. For a more muted version, reduce saturation. A small shade scale can start from one base color:
--brand: hsl(355, 78%, 56%);
--brand-hover: hsl(355, 78%, 46%);
--brand-soft: hsl(355, 60%, 92%);
--brand-text: hsl(355, 70%, 32%);Modern CSS also supports oklch() and wide-gamut color notations. Check target-browser support; HSL is broadly understood, while OKLCH can make perceptual adjustments more consistent.
So which one should you use?
CSS accepts all three notations. Choose by task: HEX for sharing and storing values, HSL for adjusting or generating variants, and RGB when code or another tool exposes channel values. Mixed notation is valid, but a consistent team convention makes tokens easier to maintain.
Pulling exact values out of an image
Most real color work starts with “what is this color?” — from a logo file, a competitor's screenshot, a photo whose mood you want to copy. An eyedropper answers it precisely: Boltpic's color picker magnifies the area around your cursor so you can hit the exact pixel, then hands you the value in HEX, RGB, and HSL at once. For the broader mood rather than one pixel, a palette extractor pulls the dominant colors of the whole image in one pass.
Check text contrast
Knowing the code does not make a combination readable. WCAG 2.2 uses a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text at Level AA, with defined exceptions. Light gray #aaaaaa on white is roughly 2.3:1. Check the actual foreground and background pair before release.