Understanding: Hex Colors
Learn how colors are represented in HTML and CSS using the hex color format and the RGB color model.
What is a Hex Color?
The Basics
A hex color is a way to represent colors using hexadecimal (base-16) numbers. In HTML and CSS, colors are written as a # symbol followed by six characters.
Each pair of characters represents a color channel: Red, Green, and Blue. By mixing these three primary colors of light, we can create any color on screen.
RGB Channels
Mixing Light Colors
Each channel has a value from 0 to 255 in decimal, or 00 to FF in hexadecimal. This gives us 256 possible values per channel.
Red values
Green values
Blue values
Combined: 256 x 256 x 256 = 16,777,216 possible colors!
| Decimal | Hex | Meaning |
|---|---|---|
| 0 | 00 | No intensity (minimum) |
| 128 | 80 | Half intensity |
| 255 | FF | Full intensity (maximum) |
Reading Hex Codes
Examples
Red
#FF0000
rgb(255, 0, 0)
Green
#00FF00
rgb(0, 255, 0)
Blue
#0000FF
rgb(0, 0, 255)
Yellow
#FFFF00
rgb(255, 255, 0)
Cyan
#00FFFF
rgb(0, 255, 255)
Magenta
#FF00FF
rgb(255, 0, 255)
White
#FFFFFF
rgb(255, 255, 255)
Black
#000000
rgb(0, 0, 0)
Try It Yourself
Interactive Demo
Interactive Color Mixer
Quick presets:
rgb(128, 128, 128)
Hex Mixer Game
Practice Color Mixing
Hex Mixer is a daily color puzzle game where you mix colors to match a target. Each day brings a new challenge generated from a seed based on the date.
How It Works
Color Mixing Formula
When you add a color drop to the mix, the result is calculated using weighted averaging:
Accuracy Calculation
Your score is based on how close you get to the target color:
765 = 255 x 3, the maximum possible difference across all channels.
Daily Puzzle Generation
Each puzzle is generated using a seeded random algorithm based on the current date (YYYYMMDD). This means everyone worldwide sees the same puzzle each day!
Color Reference
Common Colors
| Color | Hex | RGB | Preview |
|---|---|---|---|
| Red | #FF0000 | 255, 0, 0 | |
| Green | #00FF00 | 0, 255, 0 | |
| Blue | #0000FF | 0, 0, 255 | |
| Yellow | #FFFF00 | 255, 255, 0 | |
| Cyan | #00FFFF | 0, 255, 255 | |
| Magenta | #FF00FF | 255, 0, 255 | |
| White | #FFFFFF | 255, 255, 255 | |
| Black | #000000 | 0, 0, 0 |