CSS Text Color with Hex Codes: The Complete Guide

The CSS color property combined with hex color codes is the foundation of web typography styling. This guide covers everything from basics to advanced techniques.

The Basics

/* Text color */
h1 { color: #2C3E50; }

/* Background color */
.hero { background-color: #F8F9FA; }

/* Both together */
.card {
  color: #FFFFFF;
  background-color: #1A1A2E;
}

Hex Code Shorthand

If both characters in each pair are the same, you can use 3-character shorthand:

color: #FFF;    /* Same as #FFFFFF */
color: #000;    /* Same as #000000 */
color: #F60;    /* Same as #FF6600 */

Hex Codes with Alpha (Transparency)

Modern CSS supports 8-digit hex codes where the last two digits control opacity:

color: #FF660080;  /* 50% transparent orange */
color: #000000CC;  /* 80% opaque black */

The alpha value ranges from 00 (fully transparent) to FF (fully opaque).

Hover and Interactive States

a {
  color: #0066CC;
  transition: color 0.2s ease;
}

a:hover {
  color: #0044AA;
}

.button {
  color: #FFFFFF;
  background-color: #FF6600;
}

.button:hover {
  background-color: #E55B00;
}

Dark Mode with Hex Colors

:root {
  --text: #1A1A2E;
  --bg: #FFFFFF;
}

@media (prefers-color-scheme: dark) {
  :root {
    --text: #E0E0E0;
    --bg: #1A1A2E;
  }
}

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

Gradient Text with Hex Colors

Create eye-catching gradient text using hex codes:

.gradient-text {
  background: linear-gradient(90deg, #FF0000, #FF6600, #FFD700);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

Accessibility Tips