CSS Colors

Color on text and boxes

Two properties do most of the work. color paints the text (and, by default, the text of children). background-color paints the box behind that text. Set both when you change the background, or the words may vanish into the page.

The same hue can be a name, a hex code, rgb(), or hsl(). Pick one style per project and stay with it. Harbor studio examples in this tutorial use sky #0284c7 andteal.

Named colors

Browsers know a list of names such as teal, navy, white, andblack. Names are easy to type. They are also coarse: you cannot nudge teal a little darker without switching notation.

<style>
  h1 {
    color: teal;
  }
  p {
    color: #475569;
  }
  .panel {
    background-color: teal;
    color: white;
    padding: 0.75rem 1rem;
  }
</style>
<h1>Harbor studio</h1>
<p>Open 8–16.</p>
<p class="panel">White text on a teal panel.</p>

Hex codes

A hex color starts with # and six hexadecimal digits: two for red, two for green, two for blue. Each pair runs from 00 (none) to FF (full). #0284c7 is the sky used on these pages. #ffffff is white. #000000 is black.

You can shorten a value when both digits in a pair match: #336699 becomes #369. Prefer the six-digit form until that shortcut feels natural. An eight-digit hex adds alpha:#0284c780 is sky at half opacity.

<style>
  h1 {
    color: #0284c7;
  }
  p {
    color: #475569;
  }
  .panel {
    background-color: #0c4a6e;
    color: #f0f9ff;
    padding: 0.75rem 1rem;
  }
</style>
<h1>Harbor studio</h1>
<p>Open 8–16.</p>
<p class="panel">Sky ink on deep harbor navy.</p>

rgb() and hsl()

rgb(red, green, blue) uses numbers from 0 to 255. rgb(2, 132, 199) is the same sky as #0284c7. Modern CSS also accepts rgb(2 132 199 / 0.2) for a transparent wash.

hsl(hue, saturation, lightness) is often easier to tune. Hue is 0 to 360 around the color wheel. Saturation and lightness are percentages. Raise lightness to fade a color; drop it to darken. Sky sits near hue 199.

<style>
  h1 {
    color: rgb(2, 132, 199);
  }
  p {
    color: hsl(215, 16%, 37%);
  }
  .wash {
    background-color: hsl(199, 98%, 92%);
    color: hsl(199, 98%, 24%);
    padding: 0.75rem 1rem;
  }
</style>
<h1>Harbor studio</h1>
<p>Open 8–16.</p>
<p class="wash">Same hue, high lightness: a pale wash with dark text.</p>

currentColor

The keyword currentColor means “whatever color is on this element.” Borders, outlines, and some shadows can reuse the text color so they stay in sync when you restyle the type.

<style>
  h1 {
    color: teal;
  }
  .hours {
    color: #0284c7;
    border: 2px solid currentColor;
    padding: 0.5rem 0.75rem;
  }
  p {
    color: #475569;
  }
</style>
<h1>Harbor studio</h1>
<p class="hours">Open 8–16.</p>
<p>The hours box border uses currentColor, so it matches the sky text.</p>

Contrast you can read

Light gray on white, or yellow on white, fails many readers. If you cannot read the line at a glance, do not ship it. Dark text on a light panel, or light text on a dark panel, is the usual pair. Test a pale wash with dark ink, not pale ink on pale paper.

Next you will paint the area behind the content — background color, then images, position, and size.