Color Guides for HTML and CSS
Short, practical guides to using color on the web — setting text and background color, styling links, building gradients, and meeting accessible contrast — with the exact CSS and the tools to get each value right.
How color works in CSS
Every place CSS accepts a color — color, background-color, border-color, fill, box-shadow and dozens more — takes the same set of value types. You can use a hex code (#3B82F6, the shorthand #39f, or 8-digit #3B82F680 with alpha), a function (rgb(), hsl(), and in modern browsers oklch() and lab()), a named color (rebeccapurple), or the keywords transparent and currentColor. They are interchangeable: #008080, rgb(0, 128, 128), hsl(180, 100%, 25%) and teal all produce the same pixels.
For real projects, define each color once as a CSS custom property — --brand: #3B82F6 — and reference it with var(--brand) everywhere else, so a change propagates from a single line. Use the color converter to move a value between formats, and the color picker to find one in the first place; both export a ready-made custom property.
Setting text color
Text color is set with the color property, and it inherits, so body { color: #171717; } covers most of a page. Override it on specific elements — headings, muted captions, links — as needed. Prefer a very dark gray like #171717 over pure #000000 for body text: it is slightly softer on a bright screen while still clearing every contrast threshold. For secondary text, don't go lighter than roughly #595959 on white, which is the point where 4.5:1 contrast runs out.
Whenever you pick a text color, test it against its actual background in the contrast checker before shipping. If your text sits on a colored or image background, that pairing needs checking too.
Setting background color
Use background-color for a flat fill, or the background shorthand when you also want a gradient or image. Large white surfaces often benefit from a near-white tint — a warm #FAF9F6 or cool #F8FAFC — to reduce glare and give the page a subtle character; choose the temperature to match your accent colors. Card and panel surfaces usually sit one small step darker than the page, with a border one step darker again.
To build a consistent set of surface, border and hover values from one base color, generate an 11-step ramp in the palette generator and take the light end. Browse ready-made options by family in the color library.
Styling links
Link color is just a { color: … }, but links carry an accessibility rule beyond contrast with the background: if links are distinguished from surrounding text by color alone, that color must have at least 3:1 contrast with the body text color, and there should be another cue (an underline) on hover or focus. A mid-to-dark blue such as #1D4ED8 is the classic choice because it clears both bars and reads consistently for people with color-vision deficiency.
Style :hover, :focus-visible and :visited as well. Check your link color against both the page background and the body text in the contrast checker.
Building CSS gradients
A gradient is a background image, written as background: linear-gradient(120deg, #6EE7B7, #3B82F6); for a directional blend or radial-gradient(circle at 30% 30%, …) for a glow. Keep the two endpoint colors close in hue and lightness to avoid a muddy gray band in the middle; if you need a wide blend, add a hand-picked midpoint stop rather than letting the browser interpolate through gray.
The gradient creator builds multi-stop linear and radial gradients and copies the CSS, and the color mixer generates evenly-spaced intermediate stops between any two colors in perceptual OKLab space.
Accessible contrast, in brief
WCAG sets a minimum contrast ratio between text and its background: 4.5:1 for normal text and 3:1 for large text (about 24px, or 19px bold) to meet level AA, the standard most sites and many laws require. Level AAA raises those to 7:1 and 4.5:1. A separate 3:1 rule covers non-text essentials — input borders, focus rings, icons and chart segments that carry meaning.
The contrast checker computes the ratio with the official WCAG formula and shows AA/AAA pass or fail for both text sizes. To check a whole design for color-vision deficiency, use the color blindness simulator, and never rely on color as the only way information is conveyed — pair it with text, icons or patterns.