What Are Hex Color Codes? Complete Guide for Designers & Developers
If you've ever opened a CSS file or peeked at a Figma color panel, you've encountered hex color codes. That cryptic-looking string like #3b82f6 is actually a highly logical, readable system — once you understand the structure. This guide explains everything from first principles.
What Is a Hex Color Code?
A hex color code (short for hexadecimal color code) is a six-character string preceded by a hash symbol (#) that represents a specific color on digital screens. Each color you see on a monitor is created by mixing three channels of light: Red, Green, and Blue. A hex code encodes the intensity of each channel as a two-character hexadecimal value, giving you a compact, standardized way to represent over 16 million unique colors.
The format looks like this: #RRGGBB — where RR is the red channel, GG is the green channel, and BB is the blue channel. Every pair of characters represents a number from 0 to 255 in base-16 notation.
Anatomy of a Hex Code
Let's dissect the hex code #4f86e8 — a bright sky blue — to understand each part:
A high blue value (232) combined with moderate green (134) and low red (79) produces that characteristic sky blue. The hex code is essentially just a compact instruction to your screen: "Mix these specific amounts of red, green, and blue light."
The Math Behind Hex (Base-16 Explained Simply)
The word "hexadecimal" means base-16. While our everyday decimal system (base-10) uses digits 0–9, hexadecimal uses 0–9 plus the letters A–F to represent values 10 through 15. This gives you 16 possible digits per position.
In a two-character hex pair (like ff), the first character represents the "sixteens place" and the second represents the "ones place." So ff = (15 × 16) + (15 × 1) = 240 + 15 = 255. And 00 = 0. This means each two-character pair can represent values from 0 to 255 — exactly the range needed for one RGB color channel.
Quick conversion reference: 00 = 0, 40 = 64, 80 = 128, c0 = 192, ff = 255. Most color pickers handle conversion automatically, so you rarely need to do this math yourself.
Common Hex Color Values Every Designer Should Know
A handful of hex codes are so foundational they're worth committing to memory:
#000000
Pure Black — R:0, G:0, B:0
#ffffff
Pure White — R:255, G:255, B: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
#ffff00
Yellow — R:255, G:255, B:0
#ff00ff
Magenta — R:255, G:0, B:255
#808080
Mid Gray — R:128, G:128, B:128
HEX vs RGB vs HSL — When to Use Each
All three formats describe the same color information, but each is optimized for different situations. Choosing the right format for the right context will save you headaches.
HEX: The Web Standard
Hex codes are the default choice for CSS stylesheets, HTML attributes, Figma/Sketch color pickers, Tailwind config files, and any context where you need to paste a color and move on. They're compact (7 characters), universally supported, and copy-paste friendly. Use HEX when:
- Writing CSS (
color: #1e293b;) - Configuring Tailwind theme colors
- Sharing a specific color with a teammate
- Setting colors in design tools like Figma, Sketch, or Adobe XD
RGB: When You Need Opacity
The RGB format (rgb(30, 41, 59)) becomes essential the moment you need transparency. The RGBA variant (rgba(30, 41, 59, 0.5)) adds an alpha channel for opacity control. Use RGB/RGBA when:
- Creating semi-transparent overlays (
rgba(0, 0, 0, 0.4)) - Working with JavaScript canvas or WebGL (which use RGB arrays)
- Using CSS color manipulation functions
- Specifying box-shadow colors with transparency
Modern CSS tip: In CSS Color Level 4, you can now write hex colors with an alpha channel: #3b82f680 adds 50% opacity (80 in hex = 128 = ~50%). This is becoming more widely supported and bridges the gap between HEX convenience and RGBA flexibility.
HSL: The Designer's Format
HSL (Hue, Saturation, Lightness) is the most intuitive format for creating color variations. If you want a lighter version of your brand color, you just increase the L value. If you want a more muted version, decrease the S value. Use HSL when:
- Building design systems with systematic color scales
- Creating CSS custom properties for theming
- Working in Sass/SCSS with color functions
- Generating tints and shades programmatically
Shorthand Hex Codes
When both characters in each pair are identical, CSS allows a three-character shorthand. For example, #ffffff can be written as #fff, and #000000 becomes #000. This works for colors like #ff0000 → #f00, #00ff00 → #0f0, and #aabbcc → #abc. The browser expands each character by doubling it: #abc becomes #aabbcc.
Tip: Shorthand only works when both characters in each pair are the same. #3b82f6 cannot be shortened — but #336699 can become #369. Most design tools auto-detect when shorthand is valid.
Hex Colors in CSS, Tailwind, and Figma
In CSS
Direct usage in any color property: color: #e2e8f0;, background-color: #0f172a;, border-color: #334155;. Hex codes work in every color-accepting CSS property without any prefix or syntax adjustment.
In Tailwind CSS
In your tailwind.config.js, extend the theme with custom hex values: colors: { brand: { primary: '#38bdf8', dark: '#0284c7' } }. Then use them as text-brand-primary or bg-brand-dark in your HTML. You can also use arbitrary values inline: bg-[#38bdf8].
In Figma
In Figma's color picker, you'll see a hex input field in the bottom section. Click it, type or paste your hex code (with or without the # symbol — Figma accepts both), and press Enter. Figma also supports 8-character hex codes for colors with opacity.
How to Find Any Color's Hex Code Instantly
The fastest way to get a hex code from any image or on-screen color is with PixelPicker.io. Drop your image into the tool, hover over any pixel, and the hex code appears instantly in the live readout. Click to capture it to your clipboard — ready to paste wherever you need it.
This is especially useful for matching an existing brand color from a logo file, sampling a specific shade from a photograph, or extracting interface colors from a competitor's screenshot.
10 Most Useful Hex Codes for Web Designers
Beyond the pure primaries, these are the hex values that show up constantly in professional web design work:
#0f172a— Deep navy, popular dark mode background#1e293b— Dark slate, card and surface color in dark UIs#334155— Mid slate, borders and dividers#94a3b8— Slate 400, muted body text in dark mode#e2e8f0— Slate 200, near-white headings on dark backgrounds#38bdf8— Sky 400, the Tailwind "cyan-ish" accent blue#3b82f6— Blue 500, Tailwind's standard interactive blue#10b981— Emerald 500, success and positive states#f59e0b— Amber 500, warnings and attention states#ef4444— Red 500, errors and destructive actions
Frequently Asked Questions
Are hex codes case-sensitive?
No. #3B82F6 and #3b82f6 are identical — CSS treats hex codes as case-insensitive. Convention in web development is lowercase, while design tools like Figma default to uppercase. Both work perfectly everywhere.
What's the difference between a 6-digit and 8-digit hex code?
An 8-digit hex code includes an alpha (opacity) channel as the last two characters. #3b82f6ff is fully opaque (ff = 255 = 100%), while #3b82f680 is 50% transparent (80 = 128 ≈ 50%). Eight-digit hex codes are supported in modern browsers and Figma, but not all older tools.
Can I use hex codes in Photoshop?
Yes. In Photoshop, open the Color Picker dialog (click any color swatch), and you'll see a hex input field at the bottom. Type or paste your hex code there. You can also use hex values in the color overlay and fill layer options.
How many colors can hex codes represent?
Exactly 16,777,216 — which is 256 × 256 × 256 (one for each RGB channel). This covers the full gamut of colors displayable in the sRGB color space, which is what standard monitors use. High Dynamic Range (HDR) displays use wider color spaces that require different formats beyond standard hex.
Conclusion
Hex color codes are one of those foundational concepts that, once you truly understand them, make the rest of web design and development feel significantly more logical. They're not arbitrary strings — they're precise, mathematical descriptions of color that translate directly to how screens produce light.
The next time you see #38bdf8, you'll know: moderate red (38), moderate-high green (bd), near-maximum blue (f8) — sky blue. And the next time you need to find the exact hex code for a color you see, PixelPicker.io will give it to you in seconds.