Code has been added to clipboard!

CSS Colors: How to Use Color Names, RGB, HEX and HSL Value Indicators

Reading time 6 min
Published Sep 5, 2016
Updated Oct 14, 2019

TL;DR — You can set CSS colors to HTML elements by using keywords, an RGB functional notation, a hexadecimal string notation, and HSL functional notation.

Defining colors

  • Describing a color in CSS means giving instructions that computers will be able to convert to a specific color.
  • You can indicate CSS colors with the RGB model (referring to RED/GREEN/BLUE and related tones).
  • There are 4 value types for CSS colors:
    • Color namesblue
    • RGB valuesrgb(0, 0, 250)
    • HEX values#0000FF
    • HSL valueshsl(240, 90%, 78%)

Color keywords

There is a list of keywords referring to available color names. Using them is the simplest method for setting colors in CSS and HTML instead of numeric codes of colors.

All you need to do is choose a styling property and then assign a color name which acts as a value.

Color name declaration is not case-sensitive. Blue is the same as blue or BLUE.

Maroon
Salmon
BlueViolet
DarkBlue
DeepPink
Blue
Green
Red

Tip: there are no color names for unique or rarer colors. Keywords stand for standard and secondary colors, shades of gray, and some blends of colors.

The following example shows that an HTML element <h1> has a background-color property. The value of the CSS background color is blue.

Example
<h1 style="background-color: blue;">
Heading with blue background
</h1>

Using color codes

It is possible to express RGB colors in three ways:

  • RGB
  • RGBA
  • Hexadecimal (with # at the beginning)

Note: learn about color blindness and style websites accordingly. Avoid using color as indicators of failure or success.

RGB and RGBA

RGB is a CSS rgb() function that has parameter values of red, green, and blue colors.

In this example, we use RGB colors:

Example

#exmpl-b {background-color: rgb(0, 0, 255);}   /* blue */
#exmpl-r {background-color: rgb(255, 0, 0);} /* red */
#exmpl-g {background-color: rgb(0, 255, 0);} /* green */

The following example applies RGBA color values:

Example

#exmpl-b {background-color: rgba(0, 0, 255, 0.4);}   /* blue with 0.4 opacity */
#exmpl-r {background-color: rgba(255, 0, 0, 0.4);} /* red with 0.4 opacity */
#exmpl-g {background-color: rgba(0, 255, 0, 0.4);} /* green with 0.4 opacity */
rgb(255, 0, 0)
rgb(0, 0, 255)
rgb(0, 150, 25)
rgb(0, 0, 0)

Note: since CSS Colors Level 4, CSS rgba() is the same as rgb(). Browsers supporting the Level 4 standard interpret these functions in the same way.

rgba(233, 56, 90, 1)
rgba(233, 56, 90, 0.7)
rgba(233, 56, 90, 0.5)
rgba(233, 56, 90, 0.2)

RGB and RGBA work similarly, but RGBA has the fourth parameter of the opacity.

  • Red, green, and blue values have to be between 0 and 255 inclusively. As an alternative, you can write values in percentages from 0% to 100%.
  • In RGBA, write 0.0 value for opacity when you want the color to be completely transparent. For solid colors, write 1.0. In percentages, 0% represents 0.0 value and 100% refers to 1.0.

For example, rgb(0, 0, 255, 0.3) CSS color codes represent blue color that is 30% transparent.

This example uses an HTML element <h1> and assigns background-color styling property to it. The only difference is that the HTML background color will be changed using a rgb value indicator.

Example
<h1 style="background-color: rgb(0, 0, 255);">
Heading with blue background
</h1>

This example is very much like the others. It uses the same element and style property. However, now we're using the rgba value indicator, so we will be able to set the opacity and color tone at the same time.

Example
<h1 style="background-color: rgba(0, 0, 255, 0.5);">
Heading with blue background that is 50% opaque
</h1>

Hexadecimal notation

The hexadecimal format for colors uses hexadecimal digits for indicating components of red, green, and blue.

#e9385a
#5d088e
#0db861
#858585

This example defines HEX colors:

Example

#exmpl-b {background-color: #0000ff;}   /* blue */
#exmpl-r {background-color: #ff0000;} /* red */
#exmpl-g {background-color: #00ff00;} /* green */

Note: in #RRGGBB, RR stands for Red, GG for Green, and BB for Blue. Each one of them has a hexadecimal value ranging between 00 and FF.

There are two ways of representing CSS color codes in hexadecimal format:

  • As numbers from 0 to 255 (0x00 and 0xFF)
  • As numbers from 0 to 15 (0x0 and 0xF)

Tip: a hexadecimal string always starts with the # and the hexadecimal digits follow.

Hexadecimal values are not case-sensitive, so #fa0001 is the same as #FA0001. For example, #00FF00 is Green. The green parameter (#RRGGBB) is set to the highest value (FF), and other ones are at 00.

In this example, we see that the <h1> element has a styling property color. Color is defined using a hexadecimal value of #0000FF. Therefore, the text in <h1> will be blue.

Example
<h1 style="color: #0000FF;">
Text color of the heading is set to Blue using #0000FF
</h1>

HSL indicator

HSL stands for hue, saturation, and lightness. An HSL color value is specified with hsl(hue, saturation, lightness).

The following example uses HSL color values:

Example

#exmpl-pb {background-color: hsl(240, 60%, 70%);}  /* pastel blue */
#exmpl-db {background-color: hsl(240, 100%, 25%);} /* dark blue */
#exmpl-lb {background-color: hsl(240, 100%, 75%);} /* light blue */
#exmpl-b {background-color: hsl(240, 100%, 50%);} /* blue */

Note: hue is a degree on the color wheel (from 0 to 360): 0 (or 360) is red, 120 is green, 240 is blue. Saturation is a percentage value: 100% is the full color. It describes the color intensity.

You can describe lightness with a percentage parameter: 0% is dark (black), and 100% is white.

Tip: graphic designers and artists adore HSL indicator since it allows them to define all aspects of CSS colors in one line.

hsl(0, 50%, 50%)
hsl(120, 0%, 60%)
hsl(240, 90%, 78%
hsl(360, 25%, 25%)

The following example uses the style property background-color.

hsl(120, 100%, 50%) value indicator sets the color tone, saturation, and lightness.

Example
<h1 style="background-color: hsl(120, 100%, 50%);">
Heading with green background
</h1>

HSLA indicator

HSL and HSLA are the same, but HSLA accepts an additional parameter of opacity.

This example uses HSLA colors:

Example

#exmpl-pb {background-color: hsla(240, 60%, 70%, 0.4);} /* pastel blue with 0.4 opacity */
#exmpl-db {background-color: hsla(240, 100%, 25%, 0.4);} /* dark blue with 0.4 opacity */
#exmpl-lb {background-color: hsla(240, 100%, 75%, 0.4);} /* light blue with 0.4 opacity */
#exmpl-b {background-color: hsla(240, 100%, 50%, 0.4);} /* blue with 0.4 opacity */

HSLA color accepts these values:

  • hue
  • saturation
  • lightness
  • alpha

Alpha (opacity) set to 0 is completely transparent, when set to 1 is fully solid.

Below, you can see how the alpha parameter changes the way we perceive a color with the same hue, saturation, and lightness values.

hsla(0, 50%, 50%, 1)
hsla(0, 50%, 50%, 0.7)
hsla(0, 50%, 50%, 0.5)
hsla(0, 50%, 50%, 0.2)

In the following example, you'll see that <h1> element will have a bright green background that is 50% transparent.

Example
<h1 style="background-color: hsl(120, 100%, 50%, 0.5);">
Heading with green background that is 50% opaque
</h1>
  • The hsl(120, 100%, 50%, 0.5) value indicator tells us that the color is green since 120 is assigned as the first value.
  • 100% indicates that it's highly saturated/bright.
  • 50% says that the color is neither light nor dark.
  • 0.5 determines that is half see-through.

Color opacity

The CSS color opacity property sets the transparency for the whole element.

The opacity property value must be a number between 0.0 (fully transparent) and 1.0 (fully opaque).

Note: by using the :hover selector and opacity, you can change the transparency of images and colors on mouse-over.

It is common to use opacity for half-transparent backgrounds. Below, you can see the same color with different opacity values assigned to it.

opacity: 1
opacity: 0.8
opacity: 0.5
opacity: 0.3

This example shows you that <h1> has a background-color and opacity properties.

Example
<h1 style="background-color: rgb(0, 255, 0); opacity: 0.5;">
Heading with green background that is 50% opaque
</h1>
  • The CSS rgb() indicator sets the background color.
  • Opacity has 0.5 value.
  • The color will be added only to the background. The text will be set to the browser default.
  • However, both elements will have an opacity of 50%.

CSS colors: useful tips

  • You can get CSS color codes using our Pickeristic tool. It lets you pick colors, create palettes, and select color codes for you randomly.
  • Modern browsers support thousands of colors. Therefore, there is no need to use the web safe colors to make sure that all browsers display them.
  • HSL allows setting hue, saturation, and lightness for separate elements. Therefore, developers often choose HSL for creating palettes of matching colors.
Tutorial
CSS3 Features
Syntax
Classes
ID Selectors
Attribute Selectors
Stylesheets
Inline
Internal
External
Box Model
Children Selectors
Pseudo Classes
Pseudo Elements
Variables
Counters
Text
Fonts
Web Fonts
Backgrounds
Background Images
Colors
Gradients
Opacity / Transparency
Shadow Effects
Transitions
Tooltip
Transform
Animations
Layout — Display
Layout — Position
Layout — Float
Layout — Clear
Layout — Horizontal & Vertical Align
Multiple Columns
Introduction
Responsive Web Design — Viewport
Responsive Web Design — Grid View
Responsive Web Design — Media Queries
Responsive Web Design — Flexbox Layout
Responsive Web Design — Images
Responsive Web Design — Videos
Borders
Margin
Padding
Width
Height
Outline
Links
Lists
Tables
Dropdown Menu
Navigation Bar
Images
Image Gallery
Border Images
Forms
Rounded Corners
Buttons
Box-Sizing
Selector Reference
Pagination Examples
Code Examples
CSS3 Browser Support Reference
Functions Reference
Speech Module Reference
Units
Web Safe Font Combinations
Cheat Sheet
:hover
@font-face
@keyframes
@media
align-content
align-items
align-self
all
animation
backface-visibility
background
background-clip
background-color
background-image
background-origin
background-position
background-size
border
border-image
border-radius
border-style
box-shadow
box-sizing
color
columns
filter
flex
flex-basis
flex-direction
flex-flow
flex-grow
flex-shrink
flex-wrap
font
font-family
font-size
font-size-adjust
font-stretch
font-style
font-weight
hanging-punctuation
justify-content
line-height
margin
offset
opacity
order
outline
overflow
padding
perspective
position
resize
tab-size
text-align
text-decoration
text-emphasis
text-transform
text-shadow
transform
transition-property
translate
vertical-align
word-break
word-wrap
z-index