Colors

CSS accepts several color formats:

.examples {
  color: rebeccapurple;
  border-color: #663399;
  background: rgb(102 51 153 / 15%);
  outline-color: hsl(270 50% 40%);
}

Choose the format that makes the relationship easiest to maintain. Hex is compact, rgb() maps directly to display channels, and hsl() can make coordinated lightness changes easier. Modern space-separated syntax accepts alpha after /.

Alpha is compositing, not a lighter standalone color. rgb(102 51 153 / 15%) produces a different visible result over white, black, or an image. Check contrast against the final rendered background.

currentColor reuses the element’s computed text color:

.notice {
  color: #2457d6;
  border: 2px solid currentColor;
}

Color is not only decoration. Text needs enough contrast against its background, including text placed over images or translucent layers. Do not use color as the only signal for errors, selection, or status. Add text, an icon, a border, or another visible cue.

Developer tools usually include a color picker and contrast information. Also test forced-colors mode: allow the browser to substitute the user’s high-contrast palette unless a small targeted adjustment is necessary.

Create normal, hover, focus, disabled, and error states. Use the contrast tool on every state, then turn color off mentally: the control should still communicate its role and state.