Color is a CSS presentation choice that shapes text, backgrounds, controls, labels, links, and visual hierarchy. Apply it alongside spacing, typography, images, and layout so content remains readable and interfaces feel coherent. section 6.7.1 section 5.4.2
Practical color choices include:
- Use named colors such as red, gray, white, and whitesmoke for quick, readable declarations. section 6.7.1 section 9.3.2
- Use custom properties such as var(--primary), var(--secondary), and var(--accent) to reuse a project palette. section 6.7.1 section 10.7
- Use rgb(), rgba(), and hexadecimal values when transparency, precise hues, or layered contrast are useful. section 5.4.2 section 9.3.2
- Treat color as hierarchy: soften secondary labels with opacity, emphasize calls to action with a bright background, and preserve focus visibility. section 9.3.2 section 5.4.2
Readable cards and forms
For a profile card, set the name to var(--primary) and the job title to var(--secondary). For an image card, place a partly transparent black overlay behind whitesmoke text, then use a bright yellow-orange link with nearly black text. In a form, give labels a quieter color and make the submit button use the accent and accent-contrast colors. section 6.7.1 section 5.4.2 section 10.5 section 10.7
Listing 6.11 Styling the name
h1 { #1
font-size: 2rem; #1
margin: 36px 0 0; #1
color: var(--primary); #1
} #1
.title { #2
font-size: 1.25rem; #2
font-weight: bold; #2
color: var(--secondary); #2
} #2
Inspect a compact profile-card example that combines named roles, custom properties, and color with responsive-friendly rem sizing. section 6.7.1
Check contrast whenever text overlaps an image, including after resizing and reflow. Test against both the lightest and darkest image areas; busy images make readability harder. Avoiding pure black or pure white can create a softer composition, but clarity remains the priority. section 9.3.2 section 5.4.2
