CSS Text Color

The color property sets the color of text. It also becomes the default color of things like borders and underlines on that element.

1
2
3
4
5
6
7
8

<style>
  h1 { color: #d94a00; }
  p  { color: #444; }
  .muted { color: gray; }
</style>
<h1>Pottery Studio</h1>
<p>Weekend classes for beginners.</p>
<p class="muted">Spaces are limited.</p>

What you can put in the value

You can write a color in several ways: a name (gray), a hex code (#444), rgb() or hsl(). They all do the same job. The next lessons cover each one: color names, HEX, RGB and HSL.

Color is inherited

Set color on a parent and the text inside it follows.

1
2
3
4
5
6
7

<style>
  .card { color: #1a5276; }
</style>
<div class="card">
  <h3>Opening night</h3>
  <p>Both elements are blue, but only <code>.card</code> has a color rule.</p>
</div>

That is why you usually set the main text color once, on body.

Readable text first

Light grey on white looks elegant in a design tool and is unreadable on a bright phone screen. Check color contrast before you settle on a palette.

1
2

h1 { color: darkgreen; }
p  { color: #333; }