CSS Data Type - <named-color>

The <named-color> data type in CSS refers to a set of predefined color keywords that represent specific colors. These keywords are intuitive names for common colors and provide a convenient way to specify colors in your CSS code. Instead of using RGB values or hexadecimal codes, you can use these keywords to set colors.

A <named-color> value can be used wherever <color> is used.

Syntax

color: red;
color: orange;
color: tan;
color: currentcolor;
color: transparent;

Possible values

Named colors include standard colors, transparent and currentcolor.

CSS <named-color> - Standard Colors

Common stadard colors are associated with simple, easy to understand and memorable names. Following is the list of basic colors, their RGB hex value and sample:

Keyword	RGB hex value	Sample
black	#000000
silver	#c0c0c0
gray	#808080
white	#ffffff
maroon	#800000
red	#ff0000
purple	#ff0000
fuchsia	#ff00ff
green	#008000
lime	#00ff00
olive	#808000
yellow	#ffff00
navy	#000080
blue	#0000ff
teal	#008080
aqua	#00ffff

There are actually over 150 more colors as listed below, that are associated with specific keywords in addition to the 16 listed above.

Keyword	RGB hex value	Sample
aliceblue	#f0f8ff
antiquewhite	#faebd7
aqua	#00ffff
aquamarine	#7fffd4
azure	#f0ffff
beige	#f5f5dc
bisque	#ffe4c4
black	#000000
blanchedalmond	#ffebcd
blue	#0000ff
bluevoilet	#8a2be2
brown	#a52a2a
burylwood	#deb887
cadetblue	#5f9ea0
chartreuse	#7fff00
chocolate	#d2691e
aliceblue	#f0f8ff
antiquewhite	#faebd7
aqua	#00ffff
aquamarine	#7fffd4
azure	#f0ffff
beige	#f5f5dc
bisque	#ffe4c4
black	#000000
blanchedalmond	#ffebcd
blue	#0000ff
bluevoilet	#8a2be2
brown	#a52a2a
burylwood	#deb887
cadetblue	#5f9ea0
chartreuse	#7fff00
chocolate	#d2691e
coral	#ff7f50
cornflowerblue	#6495ed
cornsilk	#fff8dc
crimson	#dc143c
cyan	#00ffff (synonym of aqua)
darkblue	#00008b
darkcyan	#008b8b
darkgoldenrod	#b8860b
darkgray	#a9a9a9
darkgreen	#006400
darkgrey	#a9a9a9
darkkhaki	#bdb76b
darkmagenta	#8b008b
darkolivegreen	#556b2f
darkorange	#ff8c00
darkorchid	#9932cc
darkred	#8b0000
darksalmon	#e9967a
darkseagreen	#8fbc8f
darkslateblue	#483d8b
darkslategray	#2f4f4f
darkslategrey	#2f4f4f
darkturquoise	#00ced1
darkviolet	#9400d3
deeppink	#ff1493
deepskyblue	#00bfff
dimgray	#696969
dimgrey	#696969
dodgerblue	#1e90ff
firebrick	#b22222
floralwhite	#fffaf0
forestgreen	#228b22
fuchsia	#ff00ff
gainsboro	#dcdcdc
gold	#ffd700
goldenrod	#daa520
gray	#808080
green	#008000
greenyellow	#adff2f
grey	#808080 (synonym of gray)
honeydew	#f0fff0
hotpink	#ff69b4
indianred	#cd5c5c
indigo	#4b0082
ivory	#fffff0
khaki	#f0e68c
lavender	#e6e6fa
lavenderblush	#fff0f5
lawngreen	#7cfc00
lemonchiffon	#fffacd
lightblue	#add8e6
lightcoral	#f08080
lightcyan	#e0ffff
lightgoldenrodyellow	#fafad2
lightgray	#d3d3d3
lightgreen	#90ee90
lightgrey	#d3d3d3
lightpink	#ffb6c1
lightsalmon	#ffa07a
lightseagreen	#20b2aa
lightskyblue	#87cefa
lightslategray	#778899
lightslategrey	#778899
lightsteelblue	#b0c4de
lightyellow	#ffffe0
lime	#00ff00
limegreen	#32cd32
linen	#faf0e6
magenta	#ff00ff (synonym of fuchsia)
maroon	#800000
mediumaquamarine	#66cdaa
mediumblue	#0000cd
mediumorchid	#ba55d3
mediumpurple	#9370db
mediumseagreen	#8a2be2
mediumslateblue	#7b68ee
mediumspringgreen	#00fa9a
mediumturquoise	#48d1cc
mediumvioletred	#c71585
midnightblue	#191970
mintcream	#f5fffa
mistyrose	#ffe4e1
moccasin	#ffe4b5
navajowhite	#ffdead
navy	#000080
oldlace	#fdf5e6
olive	#808000
olivedrab	#6b8e23
orange	#ffa500
orangered	#ff4500
orchid	#da70d6
palegoldenrod	#eee8aa
palegreen	#98fb98
paleturquoise	#afeeee
palevioletred	#db7093
papayawhip	#ffefd5
peru	#cd853f
pink	#ffc0cb
cornsilk	#dda0dd
plum	#dc143c
powderblue	#b0e0e6
purple	#800080
red	#ff0000
rosybrown	#bc8f8f
royalblue	#4169e1
saddlebrown	#8b4513
salmon	#fa8072
sandybrown	#f4a460
seagreen	#2e8b57
seashell	#fff5ee
sienna	#a0522d
silver	#c0c0c0
skyblue	#87ceeb
slateblue	#6a5acd
slategray	#708090
slategrey	#708090
snow	#fffafa
springgreen	#00ff7f
steelblue	#4682b4
tan	#d2b48c
teal	#008080
thistle	#d8bfd8
tomato	#ff6347
transparent	Check transparent
turquoise	#40e0d0
violet	#ee82ee
wheat	#f5deb3
white	#ffffff
whitesmoke	#f5f5f5
yellowgreen	#9acd32

CSS <named-color> - transparent

In CSS, the term transparent represents a color that is totally see-through and reveals the background color.
It serves as a shortcut for rgba(0,0,0,0) at first, but a separate calculation is used to prevent unexpected results when working with gradients. It may default to black with no opacity in older browsers.
transparent was redefined in CSS Colors Level 3 as a valid color that may be used in any scenario where a color is suitable with the inclusion of alpha channels.

A number of keywords may work as synonyms for one another:

aqua / cyan
fuchsia / magenta
darkgray / darkgrey
darkslategray / darkslategrey
dimgray / dimgrey
lightgray / lightgrey
lightslategray / lightslategrey
gray / grey
slategray / slategrey

CSS <named-colors> - Basic Example

The following example demonstrates CSS <named-color> datatype with a grid layout of a bigger box enclosing smaller ones, each filled with different named colors.

<html>
<head>
<style>
   body {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 20;
   }
   .large-box {
      width: 500px;
      height: 500px;
      border: 3px solid black;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: repeat(4, 1fr);
      gap: 10px;
      padding: 15px;
   }
   .small-box {
      width: 100%;
      height: 100%;
      border: 3px solid black;
   }
   .crimson-demo {
      background-color: crimson;
   }
   .dodgerblue-demo {
      background-color: dodgerblue;
   }
   .seagreen-demo {
      background-color: seagreen;
   }
   .gold-demo {
      background-color: gold;
   }
   .purple-demo {
      background-color: purple;
   }
   .orange-demo {
      background-color: orange;
   }
   .cyan-demo {
      background-color: cyan;
   }
   .magenta-demo {
      background-color: magenta;
   }
   .brown-demo {
      background-color: brown;
   }
   .pink-demo {
      background-color: pink;
   }
   .khaki-demo {
      background-color: khaki;
   }
   .darksalmon-demo {
      background-color: darksalmon;
   }
</style>
</head>
<body>
<div class="large-box">
   <div class="small-box crimson-demo"></div>
   <div class="small-box dodgerblue-demo"></div>
   <div class="small-box seagreen-demo"></div>
   <div class="small-box gold-demo"></div>
   <div class="small-box purple-demo"></div>
   <div class="small-box orange-demo"></div>
   <div class="small-box cyan-demo"></div>
   <div class="small-box magenta-demo"></div>
   <div class="small-box brown-demo"></div>
   <div class="small-box pink-demo"></div>
   <div class="small-box khaki-demo"></div>
   <div class="small-box darksalmon-demo"></div>
</div>
</body>
</html>