Hex codes are the default way to write a color in CSS. #FF0000 for red, #FFFFFF for white, #000000 for black. Compact, universal, supported in every browser.
Most designers and developers use them without really knowing what the digits mean. They copy from a picker and paste. They cannot say why #FF6B35 looks orange or how to darken a brand color by hand.
Understanding the notation takes ten minutes. After that you can adjust colors without opening a tool, predict why certain combinations clash, and communicate precisely about colors in code review.
The Color Picker gives you hex for any color you pick. Knowing what the digits represent makes you faster with it.
How Hex Color Codes Work
A hex code is three pairs of hexadecimal digits: #RRGGBB.
- RR: red, 00 to FF (0-255 decimal)
- GG: green, 00 to FF
- BB: blue, 00 to FF
Hex uses 16 digits: 0-9 and A-F. Each pair encodes 256 values (16 × 16). Three pairs combined produce 16,777,216 colors (256³).
#FF0000: max red, no green, no blue → pure red.#00FF00: max green → pure green.#0000FF: max blue → pure blue.#FFFFFF: max of everything → white.#000000: nothing → black.#808080: equal mid values → gray.
Rules for mental tweaks:
- Lighter: push all three components toward FF.
- Darker: pull all three toward 00.
- Less saturated: move the three values closer together.
The Color Converter converts hex to RGB, HSL, and OKLCH. HSL is usually easier for editing because hue, saturation, and lightness map to how you actually think about color.
Shorthand and 8-Digit Hex (Alpha)
Shorthand hex: when both digits in a pair match, you can write 3 digits instead of 6.
#FF6633→#F63#AABBCC→#ABC#000000→#000#FFFFFF→#FFF
Not every color has a shorthand. #F8F9FA cannot be shortened because the pairs do not repeat.
8-digit hex (alpha): the last two digits encode opacity.
#FF000080= red at 50% opacity#000000BF= black at 75%#FFFFFF00= fully transparent white
Common alpha values:
- FF = 100%
- BF = 75%
- 80 = 50%
- 40 = 25%
- 00 = 0%
Shorthand works for alpha too: #F008 ≈ #FF000088 ≈ red at 53%.
Browser support in 2026 is universal. For legacy browsers, fall back to rgba().
When you use alpha over varying backgrounds, contrast changes. Pass each combination through the Color Contrast Checker before you ship.
**Shorthand hex**: when both digits in a pair match, you can write 3 digits instead of 6.
Codes Worth Memorizing
Pure colors:
#FF0000Red#00FF00Green (lime)#0000FFBlue#FFFF00Yellow#FF00FFMagenta#00FFFFCyan
UI defaults:
#FFFFFFWhite#000000Black#F8F9FALight gray background#6C757DMedium gray secondary text#212529Near-black primary text#DC3545Danger / error red#198754Success green#FFC107Warning yellow#0D6EFDPrimary action blue
Social brand colors:
#1DA1F2Twitter/X blue#4267B2Facebook blue#E4405FInstagram pink#0A66C2LinkedIn blue#FF0000YouTube red#25D366WhatsApp green
Reliable gradients (start → end):
#667eea→#764ba2(purple-blue)#f093fb→#f5576c(pink-red)#4facfe→#00f2fe(blue-cyan)
Bookmark these. You will hit them again and again.
Adjusting Hex Without a Tool
Once you see the pattern, mental tweaks are fast.
- Lighter: add 20-40 hex to each component.
#2563EB→#4583FF. For a tint, average each component with FF. - Darker: subtract 20-40 hex from each.
#2563EB→#0543CB. For a shade, average each with 00. - Less saturated: pull all three components closer to each other.
#FF0000→#CC3333(muted red). - Grayscale: equal values across R, G, B. Perceived brightness ≈
0.3R + 0.59G + 0.11B. That is why#00FF00looks much brighter than#0000FF. - Complement: subtract each component from FF.
#3366CC→#CC9933. Opposite side of the color wheel. - Warm vs cool: push R (and a bit of G) up for warm. Push B up for cool.
#F5F5F5becomes#F5F0EB(warm gray) or#EBF0F5(cool gray).
These tricks let you produce a hover, an active, and a disabled state for a base color without opening a tool.
FAQ
Hex or RGB for CSS?
Identical results, both supported everywhere. Hex is shorter (#FFF vs rgb(255, 255, 255)) and more common. RGB is easier when you need to manipulate individual channel values. HSL is better for editing hue, saturation, and lightness in isolation. Pick one per project and stay consistent.
Are hex colors case-sensitive?
No. #FF6633, #ff6633, and #Ff6633 are identical. Uppercase letters stand out from digits, which is why most style guides prefer it, but lowercase works fine.
How do I convert a hex color to a Tailwind class?
Tailwind ships a 50-950 scale that maps to specific hex values. For brand colors, extend the theme: colors: { brand: '#2563EB' } in tailwind.config.js, then use bg-brand and text-brand in your markup.
Why do hex colors look different on different screens?
The monitor's color profile, brightness, and panel tech all change rendering. The same #FF6B35 looks different on a calibrated design monitor, a laptop, and a phone. For brand-critical work, calibrate the monitor and test on at least one phone and one laptop.
CSS Layout Tools: Grid, Flexbox, Gradients and Shadows
A practical guide to CSS Grid, Flexbox, gradients, and box shadows. Learn when to use each layout technique and generate clean CSS code fast.
Edit Images in Your Browser: Resize, Compress, Convert
Handle common image tasks in your browser without installing software. Resize, compress, convert formats, and inspect EXIF metadata in seconds.
CSS Generators: Gradients, Flexbox, Grid and Shadows
Use CSS generators to create gradients, flexbox layouts, grid systems, and box shadows. Visual editors output ready-to-copy CSS for your project.