CSS Colors

What Are CSS Colors?

CSS colors define how visual elements appear on a web page. You can use colors for text, backgrounds, borders, outlines, shadows, gradients, SVG icons, and UI states such as hover, focus, active, disabled, success, warning, and error.

h1 {
  color: #0d6efd;
}

body {
  background-color: #ffffff;
}

CSS supports many color formats, including named colors, HEX, RGB, RGBA, HSL, HSLA, transparent, currentColor, and CSS variables.

Why CSS Colors Are Important

• Colors improve visual design and brand identity.
• Colors create hierarchy between headings, buttons, links, and sections.
• Colors help users understand status messages like success, warning, and error.
• Accessible colors improve readability for more users.
• Good color contrast supports accessibility and usability.
• Consistent color systems make websites easier to maintain.
• Color tokens and CSS variables support themes and dark mode.

CSS Colors Cheatsheet

The following table explains the most common CSS color formats and when to use them.

CSS Named Colors

CSS provides predefined color names such as red, blue, green, black, white, gray, orange, and purple.

.text-danger {
  color: red;
}

.text-primary {
  color: blue;
}

Named colors are easy to remember, but HEX, RGB, HSL, or CSS variables are better for professional color systems.

CSS HEX Colors

HEX colors use hexadecimal values to represent red, green, and blue. They are one of the most common color formats in web design.

.button {
  background-color: #0d6efd;
  color: #ffffff;
}

HEX colors can use six characters or three characters when each pair repeats.

/* Full HEX */
color: #ffffff;

/* Short HEX */
color: #fff;

CSS RGB and RGBA Colors

RGB colors define red, green, and blue values from 0 to 255. RGBA adds an alpha value for transparency.

.text-primary {
  color: rgb(13, 110, 253);
}

.info-box {
  background-color: rgba(13, 110, 253, 0.12);
}

Use RGBA when you need transparent backgrounds, overlays, shadows, or focus rings.

CSS HSL and HSLA Colors

HSL stands for hue, saturation, and lightness. It is useful when you want to adjust a color by making it lighter, darker, more saturated, or less saturated.

.brand-title {
  color: hsl(216, 98%, 52%);
}

.brand-bg-soft {
  background-color: hsla(216, 98%, 52%, 0.12);
}

transparent and currentColor

The transparent keyword makes a color fully transparent. The currentColor keyword reuses the current text color.

.ghost-button {
  color: #0d6efd;
  background-color: transparent;
  border: 2px solid currentColor;
}

.icon {
  color: #198754;
  fill: currentColor;
}

currentColor is useful for icons, borders, outlines, and reusable components.

Common CSS Color Properties

CSS colors are used in many properties, not only the color property.

CSS Gradients

CSS gradients create smooth transitions between two or more colors. They are commonly used for hero sections, buttons, cards, overlays, and backgrounds.

.hero {
  background: linear-gradient(135deg, #0d6efd, #6610f2);
  color: #ffffff;
}

.badge {
  background: radial-gradient(circle, #ffc107, #fd7e14);
}

Always check text contrast when placing text over gradients.

CSS Color Variables

CSS variables help you create reusable color tokens for your website or design system.

:root {
  --color-text: #212529;
  --color-bg: #ffffff;
  --color-primary: #0d6efd;
  --color-success: #198754;
  --color-danger: #842029;
  --color-border: #dee2e6;
}

body {
  color: var(--color-text);
  background-color: var(--color-bg);
}

.button-primary {
  color: #ffffff;
  background-color: var(--color-primary);
}

CSS variables make it easier to update themes, brand colors, and dark mode styles.

CSS Colors for Dark Mode

Dark mode uses different text, background, border, and link colors to improve readability in darker interfaces.

:root {
  --page-bg: #ffffff;
  --text-color: #212529;
  --link-color: #0a58ca;
}

@media (prefers-color-scheme: dark) {
  :root {
    --page-bg: #121212;
    --text-color: #f1f3f5;
    --link-color: #8ab4f8;
  }
}

body {
  background-color: var(--page-bg);
  color: var(--text-color);
}

a {
  color: var(--link-color);
}

CSS Color Contrast and Accessibility

Color contrast is the difference between foreground and background colors. Good contrast improves readability for all users, especially users with low vision or color blindness.

body {
  color: #212529;
  background-color: #ffffff;
}

a:focus-visible,
button:focus-visible {
  outline: 3px solid #111111;
  outline-offset: 3px;
}

Do Not Use Color Alone

Color should not be the only way to communicate important information. Some users may not see color differences clearly.

Less Accessible

.error {
  color: red;
}

Better

.error {
  color: #842029;
  font-weight: 700;
  border-left: 4px solid currentColor;
  padding-left: 0.75rem;
}

.error::before {
  content: "Error: ";
}

The better example uses color, text, font weight, and a border together.

CSS Colors and SEO

CSS colors do not directly create search rankings, but they affect readability, accessibility, mobile usability, trust, and user experience. These factors support SEO-friendly page quality.

• Readable colors help users stay on the page longer.
• Accessible contrast improves usability for more visitors.
• Clear button colors improve conversion paths.
• Consistent color systems improve professional design.
• Good dark mode colors can improve reading comfort.

Useful CSS Color Tools

Common CSS Color Mistakes

• Using low contrast text colors.
• Using color alone to show errors or success states.
• Using too many random colors without a system.
• Forgetting dark mode contrast.
• Using brand colors without testing accessibility.
• Making disabled text almost invisible.
• Using gradients behind text without checking readability.
• Hardcoding the same colors repeatedly instead of using variables.

CSS Color Best Practices

• Use a consistent color palette.
• Use CSS variables for reusable color tokens.
• Check contrast for text, buttons, links, forms, and focus states.
• Use color plus text or icons for important messages.
• Use currentColor for reusable icons and borders.
• Test colors in light mode and dark mode.
• Avoid very light gray text for important content.
• Use meaningful color names like --color-success and --color-danger.
• Document brand colors and accessibility rules.
• Test colors on real devices when possible.

Key Takeaways

• CSS colors style text, backgrounds, borders, shadows, gradients, buttons, and links.
• Common color formats include named colors, HEX, RGB, RGBA, HSL, HSLA, and CSS variables.
• Use CSS variables to create maintainable design systems and themes.
• Always check color contrast for accessibility.
• Do not use color alone to communicate important meaning.
• Good color choices improve readability, usability, accessibility, and user trust.