How to set colors

Set foreground and background

The color property controls text and often supplies currentColor to borders and icons.

.message {
  color: #12304a;
  background-color: #e8f3fa;
  border: 1px solid currentColor;
}

Choose a color notation

• Hex is compact for sRGB colors
• rgb() supports channels and alpha transparency
• hsl() describes hue, saturation, and lightness
• Named colors are convenient for examples but limited for design systems

Use transparency

An alpha value changes the opacity of one color. Unlike opacity on a parent, it does not fade all descendants.

.overlay {
  background: rgb(0 0 0 / 65%);
}

Protect readability

Text and controls need sufficient contrast in every state. Do not use color as the only signal for errors, success, links, or selected items.