#f59e0b) is the most common format — use it for CSS and sharing colors. RGB (rgb(245, 158, 11)) is useful when you need to add transparency or do math with color values in JavaScript. HSL (hsl(38, 92%, 50%)) is the best choice when you need to create color variations like tints and shades, because the lightness value is directly adjustable. All three describe the same color — the format just determines what's convenient to work with.
When you open a color picker — whether it's in Figma, Chrome DevTools, or a browser extension — you see the same color displayed in three or four different ways simultaneously. A specific shade of amber might show as #f59e0b, rgb(245, 158, 11), and hsl(38, 92%, 50%) all at once.
These aren't different colors. They're different descriptions of the exact same color, using different encoding systems. Each system has strengths and weaknesses depending on what you're trying to do.
This guide explains how each format works, when to use each one, and how to convert between them — without any math-heavy theory.
See All Color Formats Instantly
Color Picker & Palette Manager shows hex, RGB, and HSL together the moment you pick any color — so you always have the format you need.
Add to Chrome — FreeHow Color on Screens Works (The One-Minute Foundation)
Every color on a computer screen is produced by combining three channels of light: red, green, and blue. Your monitor has millions of tiny pixels, and each pixel contains three sub-pixels — one for each channel. By varying the intensity of each channel from zero to maximum, any visible color can be produced.
This is why all the common color formats — hex, RGB, and HSL — ultimately encode the same three values. They're just different ways of expressing the same underlying data.
The differences between formats come down to: how readable they are to humans, how easy they are to manipulate programmatically, and which tools expect which format.
Hex Color Codes
Format
A hex code is a pound sign followed by six characters. Those six characters are actually three pairs: the first pair is red, the second is green, the third is blue. Each pair is a number expressed in base-16 (hexadecimal), where digits go 0-9 and then A-F.
For #f59e0b:
f5= red channel = 245 out of 2559e= green channel = 158 out of 2550b= blue channel = 11 out of 255
High red, medium green, very little blue = a warm amber-orange color.
Strengths
- Compact and widely recognized
- The universal standard for sharing colors
- Supported everywhere: CSS, HTML attributes, design tools, code editors
- Easy to copy-paste as a single string
Weaknesses
- Hard to read intuitively (what does #f59e0b look like?)
- Hard to create variations without a tool
- Transparency requires 8-character variant (#rrggbbaa)
Shorthand Hex
When both digits in each pair are identical, you can use a 3-character shorthand. #ffffff becomes #fff, #000000 becomes #000, #ff0000 becomes #f00. This only works when each pair is a double — #f59e0b can't be shortened.
8-Character Hex (with transparency)
Adding two more characters at the end encodes an alpha (transparency) value. #f59e0bff is fully opaque, #f59e0b80 is approximately 50% transparent, #f59e0b00 is fully transparent. This format is supported in CSS and most modern design tools.
RGB Color Codes
Format
RGB is the same three channels as hex, but expressed in decimal (base-10) instead of hexadecimal. Each channel ranges from 0 to 255. The format is more immediately human-readable: rgb(245, 158, 11) tells you there's a lot of red (245 out of 255), a moderate amount of green (158), and very little blue (11).
Strengths
- More readable than hex for those who think in decimal
- Easy to manipulate in JavaScript
- RGBA adds transparency cleanly
- Supported in all CSS contexts
Weaknesses
- Still hard to intuit the color from the numbers
- Verbose compared to hex
- Creating variations still requires recalculating all three values
RGBA — Adding Transparency
RGBA adds a fourth value between 0 and 1 for the alpha channel. rgba(245, 158, 11, 1) is fully opaque, rgba(245, 158, 11, 0.5) is 50% transparent, rgba(245, 158, 11, 0) is invisible.
rgb(245 158 11 / 50%) without commas and with a slash before the alpha value. Both syntaxes are valid — the older comma syntax has broader support in older browsers.
HSL Color Codes
Format
HSL stands for Hue, Saturation, Lightness. Unlike hex and RGB which describe color by mixing channels of light, HSL describes color in terms humans actually understand:
- Hue (0-360°) — where on the color wheel the color lives. 0° is red, 60° is yellow, 120° is green, 180° is cyan, 240° is blue, 300° is magenta. 360° completes the cycle back to red.
- Saturation (0-100%) — how vivid or gray the color is. 0% is pure gray, 100% is fully vivid/saturated.
- Lightness (0-100%) — how bright the color is. 0% is black, 100% is white, 50% is the "pure" version of the color.
For hsl(38, 92%, 50%): hue 38° is a warm orange-amber, 92% saturated (very vivid), at 50% lightness (the full-strength version). This immediately suggests the color is a bright, warm orange — something #f59e0b doesn't communicate at all.
Strengths
- Intuitive for humans — describes color the way we think about it
- Perfect for creating variations: just adjust lightness
- Easier to generate tint/shade scales
- Makes color relationships visible
Weaknesses
- Verbose, not as compact as hex
- Less universally expected in non-CSS tools
- HSL lightness ≠ perceived brightness (some hues appear brighter at same L value)
Why HSL is Powerful for Generating Color Variations
Say you have a primary button color and you need a hover state (slightly darker), a disabled state (much lighter and desaturated), and a light background tint. In RGB or hex, you'd have to calculate each variant separately. In HSL, you just change the lightness:
This approach makes your entire color system derived from a single hue value — change the hue variable and every shade updates automatically.
Pick Colors and Get All Three Formats at Once
Stop converting manually. Color Picker & Palette Manager shows you hex, RGB, and HSL the moment you pick any pixel from any website.
Try It FreeHSB/HSV — The Fourth Format You'll See in Design Tools
Figma, Photoshop, and many other design tools default to HSB (Hue, Saturation, Brightness) or HSV (Hue, Saturation, Value) — which is different from HSL, even though the names are similar.
The difference: in HSL, a color at 50% lightness is the pure, fully saturated version. In HSB, full brightness (100%) with full saturation (100%) gives you the pure color, and you can only go darker from there by reducing brightness.
| Color | HSL | HSB |
|---|---|---|
| Pure orange | hsl(38, 100%, 50%) | hsb(38, 100%, 100%) |
| Dark orange | hsl(38, 100%, 25%) | hsb(38, 100%, 50%) |
| Light orange tint | hsl(38, 100%, 90%) | hsb(38, 20%, 100%) |
When copying color values from Figma, always check which format it's giving you. If you paste an "HSL" value from Figma into CSS and it looks wrong, the tool may have been in HSB mode.
Quick Conversion Reference
| Hex | RGB | HSL | Color |
|---|---|---|---|
#f59e0b | rgb(245, 158, 11) | hsl(38, 92%, 50%) | |
#3b82f6 | rgb(59, 130, 246) | hsl(217, 91%, 60%) | |
#10b981 | rgb(16, 185, 129) | hsl(160, 84%, 39%) | |
#dc2626 | rgb(220, 38, 38) | hsl(0, 72%, 51%) | |
#1a1a1a | rgb(26, 26, 26) | hsl(0, 0%, 10%) | |
#f9fafb | rgb(249, 250, 251) | hsl(210, 20%, 98%) |
Which Format Should You Use?
There's no wrong answer — all formats are valid in CSS — but there are practical conventions:
- Use hex when sharing colors with other people, storing brand colors in documentation, or pasting into tools that expect a simple color string.
- Use RGB/RGBA when you need to add transparency, or when manipulating color values in JavaScript.
- Use HSL when building a design system where you need to generate variations, hover states, and tint/shade scales. CSS custom properties + HSL is a very powerful combination.
- Use HSB when your design tool uses it — Figma and Photoshop operate in HSB internally even if they show hex in the output field.
Modern CSS Color Formats (LCH, oklch, lab)
Worth a brief mention: CSS Color Level 4 introduces new formats like lch() and oklch() which represent color in a perceptually uniform space. This means that two colors at the same "lightness" value in LCH actually appear equally bright to human eyes — something HSL cannot guarantee (a green at 50% lightness looks much brighter than a blue at 50% lightness).
These formats are supported in modern browsers (Chrome 111+, Firefox 113+, Safari 15.4+) and Figma supports oklch in 2025. For cutting-edge CSS work, they're worth learning. For everyday web design in 2026, hex and HSL remain the practical standards.
Never Manually Convert Color Formats Again
Color Picker & Palette Manager instantly shows the color you pick in every format simultaneously. Click to copy whichever you need.
Add to Chrome — FreeFrequently Asked Questions
What is a hex color code and how do I read it?
A hex code is a 6-character string preceded by # representing a color as three pairs of hexadecimal digits. Each pair is a color channel (red, green, blue). For example, #f59e0b: f5 is red (245), 9e is green (158), 0b is blue (11). Higher values mean more of that channel. #ffffff is white (max all three) and #000000 is black (zero all three).
When should I use HSL instead of hex or RGB?
Use HSL when you need to create color variations programmatically — lighter or darker versions of a color, building a scale, or creating hover states. In HSL, just adjust the lightness value. In hex or RGB, you must recalculate all three channels. HSL is also more intuitive for describing colors in conversation.
What is the difference between RGB and RGBA?
RGBA adds a fourth value — alpha — controlling transparency, from 0 (fully transparent) to 1 (fully opaque). For example, rgba(245, 158, 11, 0.5) is the same orange at 50% transparency. Similarly, HSLA is the transparent version of HSL. Hex can also express transparency using 8 characters (#f59e0b80), but RGBA is more readable for transparent colors.
How do I convert hex to RGB?
Split the hex code into three pairs and convert each from hexadecimal to decimal. For #f59e0b: f5 = 245, 9e = 158, 0b = 11. Result: rgb(245, 158, 11). In practice, use a color picker tool — any decent one shows all formats simultaneously.
Why do some colors look different across screens even with the same hex code?
Different screens have different color gamuts, calibration settings, and gamma curves. A hex code defines a mathematical color value, but how that maps to emitted light depends on the display hardware. A wide-gamut P3 monitor shows more saturated colors than an older sRGB monitor. Working in sRGB color space in your design tool keeps colors consistent across standard displays.
What does HSL stand for and how does it work?
HSL stands for Hue, Saturation, Lightness. Hue is position on the color wheel (0-360°). Saturation is intensity from 0% (gray) to 100% (vivid). Lightness is brightness from 0% (black) to 100% (white), with 50% being the pure color. For example, hsl(38, 92%, 50%) is a vivid amber-orange at full brightness.
Get the Right Color Format Every Time
Pick any color from any website and immediately see it in hex, RGB, and HSL. No manual conversion needed.
Install Color Picker & Palette ManagerRelated reading: How to Pick Any Color from a Website • How to Create a Color Palette from Any Website • Color Picker Tools Every Web Designer Needs
