CSS gives you several ways to define colors, and picking the right format can make your stylesheets cleaner, more readable, and easier to maintain. This cheat sheet covers every major color format with visual examples so you can reference it while you code.
Hex Color Codes (#RRGGBB)
Hex codes are the most widely used color format in CSS. A hex code starts with # followed by six hexadecimal digits (0–9, A–F). The six digits break into three pairs: the first pair controls red, the second controls green, and the third controls blue. Each pair ranges from 00 (none) to FF (full intensity), giving you 16.7 million possible colors.
Shorthand Hex (#RGB)
When each pair consists of two identical digits, you can use the 3-digit shorthand. The browser doubles each digit automatically: #F00 becomes #FF0000, and #3AF becomes #33AAFF.
#([0-9A-Fa-f])\1([0-9A-Fa-f])\2([0-9A-Fa-f])\3.
RGB and RGBA Colors
The rgb() function defines colors using red, green, and blue channels, each as an integer from 0 to 255. This format is intuitive if you think in terms of mixing light: rgb(255, 0, 0) is pure red, while rgb(255, 255, 255) is white.
Adding Transparency with RGBA
Append a fourth value between 0 (fully transparent) and 1 (fully opaque) to add alpha transparency. This is perfect for overlays, shadows, and layered UI elements.
rgb() with a slash for alpha — rgb(37 99 235 / 0.7) — making rgba() technically optional. All evergreen browsers support this syntax.
HSL and HSLA Colors
HSL stands for Hue, Saturation, and Lightness. It's the most human-friendly color model because it maps to how we actually think about color: "I want a slightly darker, desaturated blue."
- Hue — a degree on the color wheel (0–360). 0° = red, 120° = green, 240° = blue.
- Saturation — intensity from 0% (gray) to 100% (vivid).
- Lightness — brightness from 0% (black) to 100% (white). 50% is the "pure" color.
The swatches above all use the same red hue (0°) — only lightness and saturation change. This is the superpower of HSL: creating tints, shades, and tones by tweaking just one number.
CSS Named Colors
CSS defines 147 named colors you can use directly. They're readable and great for prototyping, but limited for production design work. Here are the most useful ones:
| Name | Hex | RGB | Preview |
|---|---|---|---|
| tomato | #FF6347 |
rgb(255, 99, 71) | |
| dodgerblue | #1E90FF |
rgb(30, 144, 255) | |
| mediumseagreen | #3CB371 |
rgb(60, 179, 113) | |
| gold | #FFD700 |
rgb(255, 215, 0) | |
| slateblue | #6A5ACD |
rgb(106, 90, 205) | |
| coral | #FF7F50 |
rgb(255, 127, 80) |
Two special keywords are also worth knowing: transparent (equivalent to rgba(0,0,0,0)) and currentColor (inherits the current text color — incredibly useful for SVG icons and borders).
Converting Between Formats
You'll often need to convert between formats when working with design tools (which export hex) and CSS custom properties (where HSL shines). Here are the key relationships:
Hex ↔ RGB
Each hex pair is just a base-16 representation of the 0–255 RGB value. For example, #FF6B35 breaks down to: red = FF (255), green = 6B (107), blue = 35 (53) → rgb(255, 107, 53).
RGB → HSL (Quick Mental Math)
- Divide R, G, B each by 255 to get values between 0 and 1.
- The hue is determined by which channel is dominant.
- Lightness is the average of the max and min channel values.
- Saturation depends on lightness and the range between max and min.
In practice, let your tools handle this — but understanding the relationship helps you tweak values by hand. You can encode color data as Base64 strings when passing it through APIs, or generate unique UUIDs to track color palette entries in your design system database.
When to Use Each Format
| Format | Best For | Why |
|---|---|---|
| Hex | Design hand-off, quick values | Compact, universally supported, copy-paste from Figma/Sketch |
| RGB/RGBA | Dynamic colors in JavaScript | Easy to compute programmatically, great with canvas APIs |
| HSL/HSLA | Design systems, CSS variables | Human-readable, easy to create tints/shades/tones by adjusting one value |
| Named colors | Prototyping, learning | Readable, but limited palette — avoid in production |
Practical Example: Building a Color Scale
Here's a real-world pattern using HSL to generate a blue color scale for a design system — the same technique used by Tailwind CSS and other frameworks:
This approach lets you change the entire palette by updating a single hue value. Try it with hsl(150, 80%, ...) for green or hsl(350, 90%, ...) for red.
Quick Reference Table
| Color | Hex | RGB | HSL |
|---|---|---|---|
| Black | #000000 | rgb(0, 0, 0) | hsl(0, 0%, 0%) |
| White | #FFFFFF | rgb(255, 255, 255) | hsl(0, 0%, 100%) |
| Red | #FF0000 | rgb(255, 0, 0) | hsl(0, 100%, 50%) |
| Green | #00FF00 | rgb(0, 255, 0) | hsl(120, 100%, 50%) |
| Blue | #0000FF | rgb(0, 0, 255) | hsl(240, 100%, 50%) |
| Yellow | #FFFF00 | rgb(255, 255, 0) | hsl(60, 100%, 50%) |
| Cyan | #00FFFF | rgb(0, 255, 255) | hsl(180, 100%, 50%) |
| Magenta | #FF00FF | rgb(255, 0, 255) | hsl(300, 100%, 50%) |
Essential Developer Tools
Working with colors is easier with the right toolkit. Bookmark these free utilities for your daily workflow:
- JSON Formatter — Format and validate JSON config files containing color tokens
- Base64 Encoder — Encode SVG color data for inline CSS backgrounds
- UUID Generator — Generate unique IDs for design token management
- Regex Tester — Validate and extract color codes from stylesheets
Conclusion
Each CSS color format has its sweet spot. Use hex for quick, compact values from design tools. Use RGB when computing colors in JavaScript. Use HSL for building design systems and CSS custom properties — it's the most maintainable format for creating consistent palettes. Reserve named colors for prototyping and debugging.
The key insight: you're not choosing one format forever. Most production codebases mix formats depending on context. Understand all four, use whichever fits the task at hand, and your stylesheets will be both powerful and readable.