#ff8a3d—here’s how to read this cipher-like code that shows up in CSS color values, along with a swatch book of 36 copy-paste colors. Settle on a good-enough color quickly and spend your time on the building instead.
How to read a color code
#ff8a3d shows, in pairs of digits from the front, the strength of red, green, and blue. 00 is the minimum, ff is the maximum.
| Code | Breakdown | Result |
|---|---|---|
#ff0000 | red ff, green 00, blue 00 | Pure red |
#ffffff | all at maximum | White |
#000000 | all at minimum | Black |
#ff8a3d | red ff, green 8a, blue 3d | Orange |
There are three other ways to write color in CSS.
color: #ff8a3d; /* color code (the most used) */
color: rgb(255, 138, 61); /* red, green, blue from 0 to 255 */
color: rgba(255, 138, 61, 0.5); /* the last number is opacity (0 transparent to 1 fully opaque) */
color: hsl(24, 100%, 62%); /* nearly the same color, by hue, saturation, and lightness */The three numbers in HSL each have a set range.
- Hue (H) —
0to360. The angle when colors are arranged around a wheel. 0 is red, 120 is green, 240 is blue, and at 360 it comes full circle back to red - Saturation (S) —
0%to100%. 0% is gray, 100% is vivid - Lightness (L) —
0%to100%. 0% is black, 100% is white
The handy thing about HSL is that keeping H and S the same and moving only L lets you make “a darker version and a lighter version of the same color.” That means the “match by shade” idea coming up later can be done with numbers instead of guesswork.
The 3-digit shorthand, and 4- and 8-digit with opacity
A color where each pair of digits is the same can be shortened to 3 digits instead of writing 6. #fff means the same as #ffffff (white), and #333 the same as #333333. If you spot a 3-digit color in existing code, you can read it once you know it’s this shorthand.
When you want to express transparency with a color code alone, you can also use 8-digit notation, adding two digits at the end. #ff8a3d80 means “orange, about 50% opacity (i.e. half-transparent)“—the same as rgba(255, 138, 61, 0.5). 4-digit is the shorthand of 3-digit plus 1 digit, and #f00c is the same as #ff0000cc. In other words, “3-digit and 6-digit” and “4-digit and 8-digit” are each a pair of shorthand and full form.
12 practical colors
Clear, practical colors you can use for “lead colors” like buttons, links, and headings.
12 pastel colors
For gentle, cute backgrounds and accents. If you layer text on them, pair with dark-colored text.
6 muted colors
“Nuance colors” with the saturation dialed down. They’re the stars of stylish café-style and grown-up sites.
6 shades of black and gray
Achromatic colors come up more often than any others, yet they’re surprisingly hard to settle on. These 6 are the staples for text, faint text, lines, and backgrounds.
3 practical rules for choosing colors
When picking from the swatches, just following these 3 removes a lot of the “amateur” feel.
- Don’t make body text pure black—use
#333, not#000. It softens the too-strong contrast against a white background and makes long passages easier to read - Use no more than 3 colors—a base color (a white-ish tone), a main color, and an accent color. From the swatches, aim to pick just “one main + one accent”
- Match by shades of the same color—combine a button of
#ff8a3dwith a background of#ffe8d6, a lighter version of the same family, and it will always come together
Summary
- A color code is red, green, blue in pairs of digits—
00is the minimum,ffis the maximum. You can adjust with VSCode’s color picker - When in doubt, take one main + one accent from this swatch book, and use the standard 6 shades for text and gray as-is
- Body text is
#333, no more than 3 colors, match by shade—these 3 rules keep your color scheme from falling apart
When you’ve agonized over colors for 10 minutes, pick one from this swatch book in 30 seconds and move on—that’s what this one page is for.