CSS Color Cheatsheet

CSS Color Cheatsheet

Hex

Three digits expand to six (each digit doubled): #f00 is #ff0000 (red). Six digits give full control. Eight digits add alpha: last two are opacity in hex (80 = 50%).

color: #f00;
color: #ff0000;
background: #ff000080;  /* red at 50% opacity */

RGB and RGBA

Values 0–255 for red, green, blue. RGBA adds a fourth number for opacity (0 to 1).

color: rgb(255, 0, 0);
background: rgba(0, 0, 0, 0.5);  /* semi-transparent black, good for overlays */
border: 1px solid rgba(255, 255, 255, 0.2);  /* subtle border on dark backgrounds */

HSL and HSLA

Hue 0–360 (0 is red, 120 green, 240 blue). Saturation and lightness are percentages. HSLA adds alpha 0–1. Useful when you want to tweak one hue and keep the rest (e.g. a shade lighter).

color: hsl(0, 100%, 50%);   /* red */
color: hsl(220, 70%, 50%);  /* blue */
background: hsla(0, 0%, 0%, 0.6);  /* dark overlay */

Named colors

Common ones: red, green, blue, white, black, gray, grey, lightgray, darkgray, crimson, navy, lime, royalblue, darkred, darkgreen. Spelling varies (gray/grey). Use when you don’t care about exact shade.

border: 1px solid gray;
background: white;
color: navy;

Real-world examples

Body text: pure black can look harsh. Dark gray reads better.

body { color: #1a1a1a; }

Links that darken on hover:

a { color: #0066cc; }
a:hover { color: #004499; }

Modal or image overlay (darken the background):

.overlay {
  background: rgba(0, 0, 0, 0.5);
}

Border that follows the text color (works in dark mode if you switch color):

.button {
  border: 1px solid currentColor;
}

Focus ring that doesn’t change layout (outline sits outside the box):

button:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

Accessible contrast: use a contrast checker. Rough rule: dark text (e.g. #333) on white, or white on dark (e.g. #1a1a1a). Avoid light gray text on white.

Primary and secondary button colors (same border radius and padding, different background):

.btn-primary {
  background: #2563eb;
  color: #fff;
}
.btn-secondary {
  background: transparent;
  color: #2563eb;
  border: 1px solid #2563eb;
}

When to use which format. Hex is compact and familiar. Use it for solid colors in stylesheets. RGB/RGBA when you need alpha and want to read the numbers (e.g. rgba(0,0,0,0.5)). HSL is handy when you want to keep the same hue and change lightness or saturation (e.g. a hover that is the same blue but darker: change the third value). Design tools often show hex. Convert in the browser or with a tool if you need RGB/HSL.

Disabled and secondary UI. Buttons or text that are disabled or secondary often use a muted color so they don’t compete with the primary action.

.button:disabled {
  color: #999;
  background: #eee;
}
.text-muted { color: #6b7280; }

Theme or dark mode with variables. Define colors once and reuse. Then you can switch themes by changing the variable values.

:root {
  --color-text: #1a1a1a;
  --color-bg: #fff;
  --color-link: #0066cc;
}
[data-theme="dark"] {
  --color-text: #e5e5e5;
  --color-bg: #1a1a1a;
  --color-link: #60a5fa;
}
body {
  color: var(--color-text);
  background: var(--color-bg);
}
a { color: var(--color-link); }

Use our Hex to RGB converter.