color
The color of the text (and the default color of borders and SVG icons).
Syntax
color: value;Values
| Parameter | Type | Description |
|---|---|---|
| name | keyword | One of about 150 named colors: `red`, `teal`, `rebeccapurple`. |
| #rrggbb | hex | A hex code: `#ff6600`, short `#f60`, with transparency `#ff660080`. |
| rgb() | function | Red, green and blue from 0 to 255: `rgb(255 102 0)`. |
| currentColor | keyword | The current value of `color` — for borders, shadows and icons. |
Examples
Three ways to write a color:
<p style="color: crimson;">By name: crimson</p>
<p style="color: #2e8b57;">In hex: #2e8b57</p>
<p style="color: rgb(30 144 255);">In rgb(): rgb(30 144 255)</p>currentColor reuses the text color:
<style>
.alert { color: darkorange; border: 2px solid currentColor; padding: 8px; }
</style>
<p class="alert">The border takes the text color through currentColor.</p>Notes
color is inherited: set it on body and every element gets it. Check the contrast between text and background — the browser developer tools show the contrast ratio for any color.
See also
- background-color — The background color of an element.
- rgb() — A color from red, green and blue components, with optional transparency.
- hsl() — A color by hue, saturation and lightness.
- opacity — The transparency of the whole element together with its content.
Related recipes
In the tutorial
- Colors — Text and background color, ways to write a color in CSS — names, hex, rgb() and hsl() — and transparency.