Hex colors in CSS - Browser Rendering Trace

Render Flow - Hex colors

Read CSS file

↓

Parse color property

↓

Identify hex color code

↓

Convert hex to RGB values

↓

Apply color to element

↓

Paint pixels with color

↓

Composite layers

The browser reads the CSS, finds hex color codes, converts them to red-green-blue values, then paints the element with that color.

Render Steps - 3 Steps

Code Added:background-color: #4CAF50;

Before

[          ]
[          ]
[          ]
[          ]
[          ]

→

After

[##########]
[##########]
[##########]
[##########]
[##########]

The background color changes to a green shade defined by the hex code #4CAF50.

🔧 Browser Action:Converts hex #4CAF50 to RGB(76,175,80) and paints the element background.

Code Sample

A green box with white centered text using hex colors for background and text.

CSS

<div class="box">Hello</div>

CSS

.box {
  width: 10rem;
  height: 5rem;
  background-color: #4CAF50;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  border-radius: 0.5rem;
}

Render Quiz - 3 Questions

After applying step 1, what color fills the box background?

A A medium green color

B Pure white

C Black

D Bright red

Common Confusions - 3 Topics

Why does #FFF show white but #FFFFFF also works?

Both #FFF and #FFFFFF represent white; #FFF is a short form where each hex digit doubles (#F -> #FF).

💡 3-digit hex codes expand each digit to two digits for full color.

Why does #000000 show black but #000 is the same?

Short hex #000 is the same as #000000, both mean black by doubling each digit.

💡 Short hex codes are shorthand for repeating digits.

Why does #4CAF50 look green and not blue or red?

Hex colors combine red, green, and blue values; #4CAF50 has more green (AF) than red (4C) or blue (50), so it looks green.

💡 Hex pairs represent red, green, blue in order.

Property Reference

Property	Value Format	Visual Effect	Common Use
background-color	#RRGGBB or #RGB	Sets element background color	Coloring backgrounds
color	#RRGGBB or #RGB	Sets text color	Coloring text
border-color	#RRGGBB or #RGB	Sets border color	Coloring borders

Concept Snapshot

Hex colors use # followed by 3 or 6 hex digits. 3-digit hex expands each digit (e.g., #FFF = #FFFFFF). Each pair represents red, green, blue values. Used for background-color, color, border-color. Browser converts hex to RGB to paint colors.