Text color
Must contrast strongly with the background.
Platform under construction
Colors
Color creates hierarchy, emotion and meaning. In CSS, good color work is about contrast, consistency and clear roles.
:root {
--color-text: #f7f9ff;
--color-accent: #8cffc1;
}
Typography & Visual Style
Color should communicate, not just decorate.
CSS colors can be written as keywords, hex, rgb, hsl and newer color functions. The syntax matters less than the system behind the choices.
A professional interface uses color roles: text, muted text, background, surface, border, accent, success, warning and danger.
Color must also meet contrast needs. A beautiful palette is not good if users cannot read it.
Accent color
Draws attention to important actions or highlights.
State color
Communicates success, warning, error or active state.
Tokens
Named variables keep color usage consistent.
Visual model
Make visual decisions systematic instead of random.
Typography and visual style are where CSS starts to feel like design. These models turn subjective choices into reusable decisions you can explain, test and improve.
#f7f9ff
Primary readable foreground.
#cfd8e6
Secondary content.
#8cffc1
Action and highlight.
#ff5d73
Error or destructive state.
Examples
High-end visual CSS has a reason behind every value.
Semantic color roles
:root {
--color-text: #f7f9ff;
--color-muted: #cfd8e6;
--color-accent: #8cffc1;
--color-danger: #ff5d73;
}
Random color usage
.title { color: #fff; }
.link { color: lime; }
.warning { color: orange; }
.card { background: #111; }
Rules that matter
Visual style becomes professional when it becomes repeatable.
A beautiful one-off style is not enough. The goal is a visual system that keeps working when the site grows, content changes and new pages are added.
Start with contrast
Readable foreground and background pairs matter most.
Name colors by role
Use --color-accent, not --green-thing.
Limit accent usage
If everything is highlighted, nothing is highlighted.
Do not rely on color alone
Errors need text, icons or structure too.
Use state colors consistently
Success, warning and danger should not change meaning per page.
Test dark and light contexts
A color that works on one surface may fail on another.
Production thinking
Visual polish must survive real content, real users and real devices.
Why does this matter?
Color tells users where to look and what something means. Random colors create visual noise and mistrust.
Accessibility
Contrast and non-color cues are essential. Some users cannot distinguish hue reliably.
Production note
Store colors as tokens and document their roles. That makes redesigns and theme work much easier.
SEO note
Readable contrast improves usability and reduces frustration for visitors from search.
Live code lab
Change the CSS and watch the interface respond.
The preview runs in an isolated iframe. Links and forms stay inside the practice area, so you can experiment without leaving the lesson.
Mini assignment
Try this now.
- Change --accent to a low-contrast color and judge readability.
- Create --danger and use it for an error sentence.
- Rename one token by role instead of visual color name.
Practice assignment
Do this before moving to the next lesson.
- Define text, muted, background, surface and accent tokens.
- Use the tokens in a small card.
- Explain what each color role communicates.
Try it yourself
Build semantic color tokens
Self-check
Before you continue, prove that you understand Colors.
Answer these questions before moving on. If your answer is vague, change the lab values and judge the visual result again.
- Can you explain color roles?
- Can you avoid relying on color alone for meaning?
- Can you create readable foreground/background pairs?
- Can you name tokens semantically?
- Can you keep accent color from becoming visual noise?
Senior audit upgrade
Contrast and meaning must be tested.
A color system is not finished until text contrast, state meaning and non-color indicators are checked.
Contrast workflow
Check foreground and background pairs, especially muted text and button text.
Do not use color alone
Error and success states need text, icon, label or shape in addition to color.
Semantic tokens
Prefer --color-danger over --red when the token carries meaning.