- CSS Tutorial
- CSS - Home
- CSS - Introduction
- CSS - Syntax
- CSS - Selectors
- CSS - Inclusion
- CSS - Measurement Units
- CSS - Colors
- CSS - Backgrounds
- CSS - Fonts
- CSS - Text
- CSS - Images
- CSS - Links
- CSS - Tables
- CSS - Borders
- CSS - Border Block
- CSS - Border Inline
- CSS - Margins
- CSS - Lists
- CSS - Padding
- CSS - Cursor
- CSS - Outlines
- CSS - Dimension
- CSS - Scrollbars
- CSS - Inline Block
- CSS - Dropdowns
- CSS - Visibility
- CSS - Overflow
- CSS - Clearfix
- CSS - Float
- CSS - Arrows
- CSS - Resize
- CSS - Quotes
- CSS - Order
- CSS - Position
- CSS - Hyphens
- CSS - Hover
- CSS - Display
- CSS - Focus
- CSS - Zoom
- CSS - Translate
- CSS - Height
- CSS - Hyphenate Character
- CSS - Width
- CSS - Opacity
- CSS - Z-Index
- CSS - Bottom
- CSS - Navbar
- CSS - Overlay
- CSS - Forms
- CSS - Align
- CSS - Icons
- CSS - Image Gallery
- CSS - Comments
- CSS - Loaders
- CSS - Attr Selectors
- CSS - Combinators
- CSS - Root
- CSS - Box Model
- CSS - Counters
- CSS - Clip
- CSS - Writing Mode
- CSS - Unicode-bidi
- CSS - min-content
- CSS - All
- CSS - Inset
- CSS - Isolation
- CSS - Overscroll
- CSS - Justify Items
- CSS - Justify Self
- CSS - Tab Size
- CSS - Pointer Events
- CSS - Place Content
- CSS - Place Items
- CSS - Place Self
- CSS - Max Block Size
- CSS - Min Block Size
- CSS - Mix Blend Mode
- CSS - Max Inline Size
- CSS - Min Inline Size
- CSS - Offset
- CSS - Accent Color
- CSS - User Select
- CSS Advanced
- CSS - Grid
- CSS - Grid Layout
- CSS - Flexbox
- CSS - Visibility
- CSS - Positioning
- CSS - Layers
- CSS - Pseudo Classes
- CSS - Pseudo Elements
- CSS - @ Rules
- CSS - Text Effects
- CSS - Paged Media
- CSS - Printing
- CSS - Layouts
- CSS - Validations
- CSS - Image Sprites
- CSS - Important
- CSS - Data Types
- CSS3 Tutorial
- CSS3 - Tutorial
- CSS - Rounded Corner
- CSS - Border Images
- CSS - Multi Background
- CSS - Color
- CSS - Gradients
- CSS - Box Shadow
- CSS - Box Decoration Break
- CSS - Caret Color
- CSS - Text Shadow
- CSS - Text
- CSS - 2d transform
- CSS - 3d transform
- CSS - Transition
- CSS - Animation
- CSS - Multi columns
- CSS - Box Sizing
- CSS - Tooltips
- CSS - Buttons
- CSS - Pagination
- CSS - Variables
- CSS - Media Queries
- CSS - Functions
- CSS - Math Functions
- CSS - Masking
- CSS - Shapes
- CSS - Style Images
- CSS - Specificity
- CSS - Custom Properties
- CSS Responsive
- CSS RWD - Introduction
- CSS RWD - Viewport
- CSS RWD - Grid View
- CSS RWD - Media Queries
- CSS RWD - Images
- CSS RWD - Videos
- CSS RWD - Frameworks
- CSS References
- CSS - Questions and Answers
- CSS - Quick Guide
- CSS - References
- CSS - Color References
- CSS - Web browser References
- CSS - Web safe fonts
- CSS - Units
- CSS - Animation
- CSS Resources
- CSS - Useful Resources
- CSS - Discussion
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>
To Continue Learning Please Login
Login with Google