Text Color & Highlight

Color text and its selection highlight.

Syntaxcolor: #2965f1; ::selection { background: #2965f1; }

The color property sets text color. You can also style the highlight users see when they select text using the ::selection pseudo-element.

Good text contrast against the background is essential for accessibility and readability.

Example

Loading editor…

Press Run to see the result.

A developer uses color: #333 for body text instead of #000 to reduce harsh contrast and improve reading comfort.
A designer styles the ::selection pseudo-element to use the brand color as the highlight background when users select text.
A developer sets different color values for heading, body, and muted text to create a legible typographic hierarchy without using font size alone.

Assigns progressively lighter colors from headings to body to muted text to build a natural reading hierarchy.

h1, h2, h3 { color: #1a1a2e; }
p           { color: #444; }
.muted      { color: #888; }
.danger     { color: #c0392b; }

Styles link colors across three states — default, visited, and hover — to give users clear navigation cues.

a         { color: #2965f1; }
a:visited { color: #7048c8; }
a:hover   { color: #1a4fbf; text-decoration: underline; }

Overrides the browser's default blue selection highlight with brand colors using the ::selection pseudo-element.

::selection {
  background-color: #2965f1;
  color: #fff;
}

.code-block::selection {
  background-color: #1a1a2e;
  color: #f1c40f;
}