Learn Colors
Color is often the very first thing a visitor processes on a page — before headlines, before layout — so understanding how to use it deliberately is a core web skill, not a decorative afterthought.
Color Sends a Message Before Anyone Reads a Word
Human vision processes color faster than it processes text. When someone lands on a page, their eyes register the palette in a fraction of a second — long before they've read a single sentence. A form field outlined in red, a button glowing green, a banner washed in yellow: each one is already telling the visitor something, whether you planned it or not. Choosing colors on purpose means you control that first impression instead of leaving it to chance.
- A red outline around an input usually means "something is wrong here"
- A green checkmark or badge usually means "this succeeded"
- A muted gray button usually means "this option isn't available right now"
- A bright, saturated button usually means "click me, this is the main action"
Three Jobs Color Does on Every Page
First, color builds hierarchy — it draws the eye to what matters most, like a single colored "Buy Now" button surrounded by neutral gray text. Second, color gives feedback — it reports the result of an action, such as a red border after a failed form submission or a green toast after a successful save. Third, color carries identity — a consistent set of brand colors makes a product instantly recognizable across every page and every screen size, the same way a logo does.
Hierarchy Through Color
<!DOCTYPE html>
<html>
<head>
<style>
.card {
border: 1px solid #d0d0d0;
padding: 16px;
}
.card p {
color: #444444;
}
.card .btn-primary {
background-color: #1f6feb;
color: white;
font-weight: bold;
padding: 8px 16px;
border: none;
}
</style>
</head>
<body>
<div class="card">
<p>This is some card text.</p>
<button class="btn-primary">Buy Now</button>
</div>
</body>
</html>None of this works if the colors themselves are hard to read. A pale gray sentence on a white card might look elegant in a mockup, but if a visitor with low vision — or anyone using their phone outdoors in bright sunlight — can't make out the words, the design has failed at its actual job. Readability is not a separate concern from good color choices; it is the baseline requirement.
Seeing Semantic Color in Practice
Semantic Button Colors
<!DOCTYPE html>
<html>
<head>
<style>
.btn-success {
background-color: green;
color: white;
padding: 8px 16px;
border: none;
border-radius: 4px;
}
.btn-danger {
background-color: crimson;
color: white;
padding: 8px 16px;
border: none;
border-radius: 4px;
}
.btn-neutral {
background-color: #e0e0e0;
color: #333333;
padding: 8px 16px;
border: none;
border-radius: 4px;
}
</style>
</head>
<body>
<button class="btn-success">Success</button>
<button class="btn-danger">Danger</button>
<button class="btn-neutral">Neutral</button>
</body>
</html>Frequently Asked Questions
- Which colour format should I use in CSS?
- HEX for fixed brand colours, HSL when you need to adjust a shade by hand, and RGB or HSL with an alpha channel for transparency. They describe the same colours, so the choice comes down to which one you can reason about while editing.
- Why does my colour look different on another screen?
- Displays vary in calibration, brightness and colour profile, and browsers may apply their own colour management. Test on more than one screen, and keep text well clear of the minimum contrast ratio so readability never depends on a perfectly tuned monitor.
- What contrast ratio do I need for accessible text?
- WCAG asks for at least 4.5:1 between text and its background for normal sizes, and 3:1 for large text of roughly 24px or 19px bold. Check with a contrast tool rather than by eye, which is unreliable for near-threshold pairs.
