- CSS Basics
- CSS Tutorial HomePage
- CSS Where to Write
- CSS Syntax
- CSS Selectors
- CSS Combinators
- CSS Attribute Selectors
- CSS Pseudo Classes
- CSS Pseudo-Classes
- CSS :link :hover :active
- CSS :first-child
- CSS :first-of-type
- CSS :last-child
- CSS :last-of-type
- CSS :only-child
- CSS :only-of-type
- CSS :nth-child()
- CSS :nth-of-type()
- CSS :nth-last-child()
- CSS :nth-last-of-type()
- CSS :focus
- CSS :not()
- CSS :root
- CSS :empty
- CSS :target
- CSS :lang()
- CSS :valid
- CSS :invalid
- CSS :optional
- CSS :required
- CSS :in-range
- CSS :out-of-range
- CSS :enabled :disabled
- CSS :read-only
- CSS :read-write
- CSS Pseudo Elements
- CSS Pseudo-Elements
- CSS ::before
- CSS ::after
- CSS ::first-letter
- CSS ::first-line
- CSS ::marker
- CSS ::selection
- CSS Colors
- CSS Colors
- CSS rgb() and rgba()
- CSS hsl() and hsla()
- CSS Background
- CSS background
- CSS background-color
- CSS background-image
- CSS linear-gradient()
- CSS radial-gradient()
- CSS conic-gradient()
- CSS repeating-linear-gradient()
- CSS repeating-radial-gradient()
- CSS repeating-conic-gradient()
- CSS background-position
- CSS background-size
- CSS background-repeat
- CSS background-origin
- CSS background-clip
- CSS background-attachment
- CSS background-blend-mode
- CSS Border
- CSS border
- CSS border-style
- CSS border-style Values
- CSS border-width
- CSS border-color
- CSS border-top
- CSS border-top-style
- CSS border-top-width
- CSS border-top-color
- CSS border-bottom
- CSS border-bottom-style
- CSS border-bottom-width
- CSS border-bottom-color
- CSS border-left
- CSS border-left-style
- CSS border-left-width
- CSS border-left-color
- CSS border-right
- CSS border-right-style
- CSS border-right-width
- CSS border-right-color
- CSS border-top-left-radius
- CSS border-top-right-radius
- CSS border-bottom-left-radius
- CSS border-bottom-right-radius
- CSS border-radius
- CSS border-collapse
- CSS empty-cells
- CSS border-spacing
- CSS border-image
- CSS border-image-source
- CSS border-image-slice
- CSS border-image-width
- CSS border-image-outset
- CSS border-image-repeat
- CSS Fonts
- CSS font
- CSS font-style
- CSS font-variant
- CSS font-variant-caps
- CSS font-weight
- CSS font-size
- CSS line-height
- CSS font-family
- CSS font-stretch
- CSS font-kerning
- CSS font-face
- CSS font-feature-settings
- CSS Text
- CSS Text
- CSS color
- CSS text-decoration
- CSS text-decoration-line
- CSS text-decoration-color
- CSS text-decoration-style
- CSS text-underline-position
- CSS text-align
- CSS text-align-last
- CSS text-justify
- CSS letter-spacing
- CSS word-spacing
- CSS text-shadow
- CSS text-transform
- CSS white-space
- CSS text-indent
- CSS word-wrap
- CSS overflow-wrap
- CSS word-break
- CSS text-overflow
- CSS hyphens
- CSS direction
- CSS unicode-bidi
- CSS writing-mode
- CSS Padding & Margin
- CSS Box Model
- CSS padding
- CSS padding-top
- CSS padding-right
- CSS padding-bottom
- CSS padding-left
- CSS margin
- CSS margin-top
- CSS margin-right
- CSS margin-bottom
- CSS margin-left
- CSS Padding Vs Margin
- CSS Dimensions
- CSS Dimensions
- CSS height
- CSS max-height
- CSS min-height
- CSS width
- CSS max-width
- CSS min-width
- CSS overflow
- CSS overflow-x
- CSS overflow-y
- CSS Multi-Column Layout
- CSS Multi-Column Layout
- CSS columns
- CSS column-width
- CSS column-count
- CSS column-rule
- CSS column-rule-width
- CSS column-rule-style
- CSS column-rule-color
- CSS column-span
- CSS column-fill
- CSS Display
- CSS display
- CSS inline Vs block
- CSS inline Vs inline-block
- CSS flex Vs inline-flex
- CSS inline-flex Vs inline-block
- CSS flex Vs grid
- CSS grid Vs inline-grid
- CSS Float and Position
- CSS float
- CSS clear
- CSS Align
- CSS position
- CSS left
- CSS right
- CSS top
- CSS bottom
- CSS Style List Marker
- CSS Style List Marker
- CSS list-style
- CSS list-style-type
- CSS list-style-position
- CSS list-style-image
- CSS Outline
- CSS outline
- CSS outline-width
- CSS outline-style
- CSS outline-color
- CSS outline-offset
- CSS Effects
- CSS Effects
- CSS Gradients
- CSS Shadows
- CSS box-shadow
- CSS opacity
- CSS Transforms
- CSS transform
- CSS translateX()
- CSS translateY()
- CSS translateZ()
- CSS translate()
- CSS translate3d()
- CSS scaleX()
- CSS scaleY()
- CSS scaleZ()
- CSS scale()
- CSS scale3d()
- CSS rotateX()
- CSS rotateY()
- CSS rotateZ()
- CSS rotate()
- CSS rotate3d()
- CSS skewX()
- CSS skewY()
- CSS skew()
- CSS matrix()
- CSS matrix3d()
- CSS perspective() Function
- CSS perspective Property
- CSS perspective-origin
- CSS transform-style
- CSS transform-origin
- CSS 2D Transform
- CSS 3D Transform
- CSS Transition
- CSS transition
- CSS transition-property
- CSS transition-duration
- CSS transition-timing-function
- CSS transition-delay
- CSS Animation
- CSS animation
- CSS @keyframes
- CSS animation-name
- CSS animation-duration
- CSS animation-timing-function
- CSS animation-delay
- CSS animation-iteration-count
- CSS animation-direction
- CSS animation-fill-mode
- CSS animation-play-state
- CSS Grid Layout
- CSS Grid Layout
- CSS gap
- CSS column-gap
- CSS row-gap
- CSS grid-area
- CSS grid-column-start
- CSS grid-column-end
- CSS grid-row-start
- CSS grid-row-end
- CSS grid-template
- CSS grid-template-columns
- CSS grid-template-rows
- CSS grid-template-areas
- CSS grid-auto-columns
- CSS grid-auto-rows
- CSS grid-auto-flow
- CSS grid-column
- CSS grid-row
- CSS Template Layout
- CSS Flex Layout
- CSS FlexBox
- CSS flex-direction
- CSS flex-wrap
- CSS flex-flow
- CSS justify-content
- CSS align-content
- CSS align-items
- CSS flex-grow
- CSS flex-shrink
- CSS flex-basis
- CSS flex
- CSS align-self
- CSS order
- CSS Misc
- CSS Length Units
- CSS Style Link
- CSS Navigation Bar
- CSS Style Image
- CSS Style Tables
- CSS table-layout
- CSS caption-side
- CSS Create Frames
CSS Color Names and Hex Values
This article is created to cover one of the most important topic, that is, colors in CSS. Because, to design and provide good user experience to your web application, you need to define the best color that suits your website.
This article, only deals with naming of colors in CSS. To learn about how to set color for the background of an element, refer to background-color Property. And to color the text, refer to color Property.
Number of Ways to Define Colors in CSS
The total number of ways to define colors in CSS, are:
- Color Names
- Color rgb() Values
- Color rgba() Values
- Color hsl() Values
- Color hsla() Values
- Color Hex Codes
For example:
Method/Way | Value | Output |
---|---|---|
Color Names | red | |
green | ||
blue | ||
Color rgb() Values | rgb(255, 0, 0) | |
rgb(0, 255, 0) | ||
rgb(0, 0, 255) | ||
Color rgba() Values | rgba(255, 0, 0, 1) | |
rgba(255, 0, 0, .4) | ||
rgba(0, 255, 0, 1) | ||
rgba(0, 0, 255, 1) | ||
Color hsl() Values | hsl(0, 100%, 50%) | |
hsl(120, 100%, 50%) | ||
hsl(240, 100%, 50%) | ||
Color hsla() Values | hsla(0, 100%, 50%, 1) | |
hsla(0, 100%, 50%. .4) | ||
hsla(120, 100%, 50%, 1) | ||
hsla(240, 100%, 50%, 1) | ||
Color Hex Codes | #ff0000 | |
#00ff00 | ||
#0000ff |
Note - The detailed description of hsl() and hsla() Function, and rgb() and rgba() Function are described in its separate tutorial.
CSS Color Hex Codes
In CSS, hex codes or values are used to define the color. The hex value starts with a hash (#) symbol, then RRGGBB value. The RR indicates to Red, GG indicates to Green, BB indicates to Blue color.
Since, there are total of 16 hexadecimal digits, that are 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. Therefore, we need to use these combination of digits to define the color. The 0 indicates to the lowest intensity of the color, whereas F indicates to the highest intensity of the color.
Therefore #FF0000 or #ff0000 is equal to red color. Similarly, #00ff00 and #0000ff are equal to green and blue color.
The first two digits refers to the component of red color, the next two digits refers to the component of green color, whereas the last two digits refers to the component of blue color. Therefore, #ff0000 is red color, because the red color component is set to its highest value, and at the same time, the other color component is set to its lowest value, that is 00.
Note - The #ffffff is equal to white, whereas #000000 is equal to black color.
Note - You can also use three-digit hex codes to define the color. For example, #f00 refers to red, #0f0 refers to green, and #00f refers to blue. But using 6-digit hex codes, we can create long varieties of colors.
List of CSS Color Names and Hex Values
Color Name | Color Hex Value | Output |
---|---|---|
aliceblue | #f0f8ff | |
antiquewhite | #faebd7 | |
aqua | #00ffff | |
aquamarine | #7fffd4 | |
azure | #f0ffff | |
beige | #f5f5dc | |
bisque | #ffe4c4 | |
black | #000000 | |
blanchedalmond | #ffebcd | |
blue | #0000ff | |
blueviolet | #8a2be2 | |
brown | #a52a2a | |
burlywood | #deb887 | |
cadetblue | #5f9ea0 | |
chartreuse | #7fff00 | |
chocolate | #d2691e | |
coral | #ff7f50 | |
cornflowerblue | #6495ed | |
cornsilk | #fff8dc | |
crimson | #dc143c | |
cyan | #00ffff | |
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 | |
ghostwhite | #f8f8ff | |
gold | #ffd700 | |
goldenrod | #daa520 | |
gray | #808080 | |
green | #008000 | |
greenyellow | #adff2f | |
grey | #808080 | |
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 | |
maroon | #800000 | |
mediumaquamarine | #66cdaa | |
mediumblue | #0000cd | |
mediumorchid | #ba55d3 | |
mediumpurple | #9370db | |
mediumseagreen | #3cb371 | |
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 | |
peachpuff | #ffdab9 | |
peru | #cd853f | |
pink | #ffc0cb | |
plum | #dda0dd | |
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 | |
turquoise | #40e0d0 | |
violet | #ee82ee | |
wheat | #f5deb3 | |
white | #ffffff | |
whitesmoke | #f5f5f5 | |
yellow | #ffff00 | |
yellowgreen | #9acd32 |
« Previous Tutorial Next Tutorial »