Chapter 2: Colors, Text, and Fonts

CodeVigyaan is a free education platform offering programming tutorials, study materials, notes, and real project ideas for college student.

Colors in CSS are the “color” of the web. We might take for granted referring to a color as, say, red or blue, but in reality there is much more to it — the way browsers interpret and render colors has an entire science behind it.

Here’s a breakdown of the most common ways to describe color (from easiest to most precise).

1. Color Names

You can apply color the easy way with one of 140 standard names that browsers understand.

Examples: red, blue, hotpink, lightseagreen, tomato.

Pros: Super easy to remember and read.

Cons: Very limited. “That particular shade of sunset orange you just can’t have by a name.

2. Hexadecimal (Hex) Codes

It is the preferred way to do for most web designers. A Hex code begins with a # sign and is followed by six characters (0-9) or (A- F).

How it works: It stands for Red, Green, Blue (RGB).

The first 2 letters = red
The middle two = Green
The last two = Blue

Example: #FF5733 (A bright orange-red).

Note: 00 is “none of this color” and FF is “maximum of this color”. So, #FF0000 is pure red.

3. RGB and RGBA

RGB is essentially the same as mixing light. You are informing the browser of how much Red Green and Blue to mix, each with a value from 0 to 255.

The Formula: rgb(red, green, blue)

Example: Pure green is rgb(0,255,0).

The “A” (Alpha):rgba() This adds a forth number to the list for transparency (0-1).

rgba(0, 0, 0.5) is black at 50% transparency (grey).

4. HSL (The “Human” Way)

HSL is the abbreviation for Hue, Saturation and Lightness. This is arguably the most intuitive way to choose colors, because it follows how humans themselves categorize color.

Hue: The color type, represented by an angular dimension (in degrees) of the color wheel (0 to 360).

0 is red,120 is green, 240 is blue.

Saturation: How ”intense” the color is (0% dull grey, 100% full color).

Lightness – how much white or black is in the color (0% being black and 100% being white).

Example: hsl(0, 100%, 50%) is also bright red.

Comparison Table

Method	Syntax	Best For…
Names	`color: teal;`	Quick prototypes and simple labels.
Hex	`color: #008080;`	Professional projects and copying from design tools.
RGB	`color: rgb(0, 128, 128);`	When you need to adjust specific light channels.
HSL	`color: hsl(180, 100%, 25%);`	Creating color palettes (e.g., making a color slightly lighter).

Pro Tip: CurrentColor

CurrentColor There is a special value in CSS that many people don’t know about: currentColor. It behaves somewhat like a variable whose content defaults to the current value of the color property for an element. This is super handy for having borders or icons automatically match your text!

Modern CSS also now supports OKLCH, a newer method for color definition that makes sure colors look equally bright to the human eye across different screens, but it’s more advanced!