The Color Palette

In this lesson, you'll give a page its colors and take care of its text: its size, weight, line height, alignment, letter spacing and font. You know all of that from the CSS course; now you'll do it with Tailwind's classes.

We'll work on Tiger's page on our shelter's website. Tiger is a two-year-old tabby looking for a new home. Look at the code: the heading already has the classes text-3xl and font-bold from the previous lesson, and the link is underlined (underline). The page also has a few classes you don't know yet: mx-auto max-w-xl p-8 on main, and mt-3, mt-4 and the like on some paragraphs. They add space around the parts of the page and between them, so that the text doesn't touch the edges of the preview. You'll learn them in the next lesson; for now, leave them as they are.

In the CSS course, you set the color of text with the color property, in a rule in style.css. With Tailwind, you give the element a class:

<h1 class="text-orange-600">Tiger</h1>

The name of the class has three parts: text says what gets the color (the text), orange is the color and 600 is its shade. Tailwind makes this rule for it:

.text-orange-600 {
	color: oklch(64.6% 0.222 41.116);
}

(Tailwind's exact CSS looks a little different, but the color is the same.) oklch is one more way to write a color. It works like HSL from the CSS course: the first number is the lightness (64.6%), the second says how vivid the color is, and the third is its place on the color wheel in degrees (41°, orange). You don't have to write it yourself: in Tailwind, you choose colors by their names.

Tailwind doesn't offer all 16 million colors. It has a color palette: a set of colors that designers chose so that they go well together. It has 26 colors, 17 colorful ones and 9 grays, each gray with a slightly different tint:

red orange amber yellow lime green emerald teal cyan sky blue indigo violet purple fuchsia pink rose

slate gray zinc neutral stone taupe mauve mist olive

Each color comes in 11 shades, numbered from 50 (the lightest) through 100, 200 and so on up to 900, and 950 (the darkest). These are the shades of orange:

50 100 200 300 400 500 600 700 800 900 950

On top of that, there are black and white, without a shade: text-black, text-white.

Why a palette, when CSS can do any color? Because it makes choosing easier: instead of looking for the right color code, you take a name and a number, and colors from one palette look good together. And when you see text-orange-600 in the HTML, you know right away what color it is. Later in the course, you'll see how to use your own colors too.

Watch out for typos and made-up names: there are no classes text-orange (without a shade) or text-orange-650, so they do nothing, and you don't get an error. As you know, Tailwind makes CSS only for the classes it knows.