A hex code is the shortest unambiguous way to name a color. When a defect report says the button is the wrong blue, the discussion goes round in circles. When it says #2563EB where the spec says #1D4ED8, it is closed the same day.
Most people copy hex codes from a picker without knowing what the digits mean. Learning takes ten minutes. After that you can darken a brand color by hand, see why two colors clash, and be exact in a code review. This post is that ten minutes, plus the codes I keep coming back to. The Color Picker gives you the code for any color on screen; the rest is reading it.
Six digits, three channels
A hex code is three pairs of hexadecimal digits, #RRGGBB: red, green and blue, each from 00 to FF (0 to 255). Hexadecimal has sixteen digits, 0 to 9 and A to F, so each pair has 256 values and three pairs give 16,777,216 colors.
#FF0000is all red, no green, no blue: pure red.#00FF00is pure green and#0000FFpure blue.#FFFFFFis every channel at maximum: white.#000000is black.#808080is all three at the halfway point: mid gray.
Read any code as three numbers and you can guess its color. #FF6B35 is a lot of red, some green, little blue: orange. #1E3A8A is little red, some green, more blue, all of it low: dark navy.
For editing, HSL is easier, because hue, saturation and lightness are the three things you actually want to change. The Color Converter turns any hex into RGB and HSL, and back.
Shorthand, and the two alpha digits
When both digits in every pair match, three digits will do. #FF6633 is #F63, #AABBCC is #ABC, #000000 is #000. Most colors cannot be shortened; #F8F9FA has no repeated pairs.
Eight digits add opacity as a fourth pair, #RRGGBBAA:
#FF000080is red at 50%.#000000BFis black at 75%.#FFFFFF00is fully transparent white.
The alpha values I remember: FF is 100%, BF is 75%, 80 is 50%, 40 is 25%, 00 is 0%. Shorthand works here too; #F008 expands to #FF000088, red at about 53%.
Every current browser supports eight-digit hex. Only very old ones need rgba().
One thing translucent colors do that people forget: the contrast changes with whatever is behind them. Text at #00000099 passes on white and may fail on a pale blue card. Check each combination in the Color Contrast Checker with the real background behind it.
When both digits in every pair match, three digits will do.
The codes worth knowing by heart
Pure channels: #FF0000 red, #00FF00 green (lime), #0000FF blue, #FFFF00 yellow, #FF00FF magenta, #00FFFF cyan.
The Bootstrap 5 defaults, which you will meet in half the admin panels ever built: #F8F9FA light background, #212529 body text, #6C757D secondary text, #0D6EFD primary blue, #198754 success green, #FFC107 warning yellow, #DC3545 danger red.
A few brand colors as published in their own guidelines at the time of writing: LinkedIn #0A66C2, WhatsApp #25D366, YouTube #FF0000, Facebook #1877F2. The old Twitter blue #1DA1F2 is gone; X uses black. Brand colors get refreshed, so check the brand's own page before you paint a logo.
That is the whole list. I do not memorize gradients. I keep the two end points in a note and generate the CSS when I need it.
Change a color in your head
Once the three channels are visible to you, small edits are arithmetic:
- Lighter: add 20 to 40 hex to each channel.
#2563EBbecomes#4583FF(blue was already near the top, so it stops at FF). For a proper tint, average each channel with FF. - Darker: subtract the same.
#2563EBbecomes#0543CB. For a shade, average each with 00. - Muted: pull the three channels towards each other.
#FF0000becomes#CC3333, a red that no longer shouts. - Gray: make all three equal. Perceived brightness is roughly 0.3 R + 0.59 G + 0.11 B, which is why
#00FF00looks far brighter than#0000FF. - Complement: subtract each channel from FF.
#3366CCbecomes#CC9933. - Warm or cool gray: nudge red up a touch for warm, blue up for cool.
#F5F5F5becomes#F5F0EBor#EBF0F5.
That is enough to produce a hover, an active and a disabled state from one base color without opening a tool. For anything more, switch to HSL and move one number at a time.
FAQ
Hex or RGB in CSS?
Same result, same support. Hex is shorter and the one you will see in most codebases. rgb() is handier when you compute channels in JavaScript. hsl() is best when you want to edit hue or lightness on its own. Pick one per project and stick to it.
Are hex codes case-sensitive?
No. #FF6633, #ff6633 and #Ff6633 are the same color. Uppercase separates letters from digits at a glance, which is why I write them that way.
How do I use a hex color in Tailwind?
In Tailwind 4, declare it in your CSS: @theme { --color-brand: #2563EB; }, then use bg-brand and text-brand. In Tailwind 3 the same thing goes under colors in tailwind.config.js. For a one-off, bg-[#2563EB] works in both.
Why does the same hex look different on two screens?
Panel type, brightness and color profile all change how a code is rendered. #FF6B35 on a calibrated design monitor, a laptop and a phone is three slightly different oranges. For brand work, calibrate the main monitor and look at the result on at least one phone.
How to Make Beautiful Screenshots for Free (No Watermark)
Make beautiful screenshots for free: add padding, gradient backgrounds, shadows, and device frames in your browser. No watermark, no signup, no Photoshop.
CSS Filters: Blur, Brightness and backdrop-filter Without an Image Editor
The ten filter functions and why their order matters, the five effects worth copying, what backdrop-filter does differently, where filters get expensive on phones, and when to reach for SVG instead.
A Brand Color Palette That Survives Print, Email and Dark Mode
How many colors a brand needs, what job each one has, the contrast check that decides which shades may carry text, and how to write it all down so three developers do not ship three different blues.
Color Palette Generator: What It Decides for You, and What It Cannot
A palette generator takes you from one hue to a harmonious set in a click. The scale, the contrast pairs, the tokens in code and the colorblind check are the part that makes the brand stick. Here is that part.