Text styling
color
color sets the color of text. Borders, underlines and other things written without a color also use it, and elements inside inherit it.
Syntax
<color>Preview
Presets
Drag the bottom-right corner to resize
Code
.box {
border: 6px solid;
color: #4a86cb;
}Controls
color#4a86cb
About
Writing colors
- Names: predefined names such as
crimsonorrebeccapurple. - Hex: two digits each for red, green and blue, as in
#4a86cb. The short form#48cand an added alpha, as in#4a86cb80, work too. - Functions:
rgb(31 41 55 / 40%),hsl(210 55% 54%),oklch(65% 0.12 250)and more. The part after/is the alpha. transparentis fully transparent, andcurrentcoloris the element’s own color value.
It reaches beyond text
Borders, outline, underlines (text-decoration) and shadows (box-shadow, text-shadow) use the color value (currentcolor) when you leave their color out. In the preview here the border is written as 6px solid with no color, so it changes along with color.
Watch out
- It is inherited, so setting it once on
bodycolors all the text inside. - A translucent color fades only the text.
opacityfades the background and everything inside as well, so use the color’s alpha to lighten just the text. - Too little contrast with the background makes text hard to read. WCAG asks for a contrast ratio of at least 4.5:1 for normal-size text.