CSS Color Keywords
CSS ships ~140 named colour keywords. They're memorable, easy to read in code, and never need a hex lookup.
A representative sample
| Keyword | Hex | Notes |
|---|---|---|
black | #000000 | Pure black. |
white | #FFFFFF | Pure white. |
red | #FF0000 | Pure red. Brighter than most designers want. |
tomato | #FF6347 | Softer red — popular for accents. |
steelblue | #4682B4 | Muted, professional blue. |
seagreen | #2E8B57 | Restful natural green. |
gold | #FFD700 | Warmer than yellow. |
rebeccapurple | #663399 | Added to honour Rebecca Meyer; spec gem. |
transparent | — | Fully transparent. |
currentColor | — | Inherits the element's text colour. |
System keywords
Special names that take their value from the OS or browser theme:
Canvas/CanvasText— the OS "page" background and text colour.LinkText/VisitedText— system link colours.ButtonFace/ButtonText— native button surface.Mark/MarkText— highlighting colours.
Tip: Named colours are fine for prototypes and CSS variables. For brand colours, store the hex in a variable so it lives in one place.
Example
Example
<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: Verdana, sans-serif; }
.box { background: #04AA6D; color: #fff; padding: 20px; border-radius: 6px; }
</style>
</head>
<body>
<h1>CSS Color Keywords</h1>
<div class="box">Edit the CSS on the left, then click Run »</div>
</body>
</html>
Try it Yourself »
Exercise
Use the named keyword that means fully transparent.
.overlay { background:
; }
It is what an invisible window is.
Discussion
Loading…