CSS Tutorial
CSS - Introduction CSS - How CSS works? CSS - Syntax CSS - Colors CSS - Backgrounds CSS - Borders CSS - Margins CSS - Padding CSS - Height/Width CSS - Box Model CSS - Text CSS - Fonts CSS - Icons CSS - Cursor CSS - Outline CSS - Links CSS - Lists CSS - Tables CSS - Display CSS - Overflow CSS - Position CSS - Float CSS - Align CSS - Opacity CSS - Combinator CSS - Pseudo Classes CSS - Pseudo Elements CSS - Attribute Selector CSS - Buttons CSS - Pagination CSS - Navigation Bar CSS - Dropdowns CSS - Specificity CSS - Transition
CSS Advanced
CSS - Rounded Corners CSS - Border Image CSS - Background CSS - Gradients CSS - Shadow CSS - Text Effects CSS - 2D Transform CSS - 3D Transform CSS - Animation CSS - Object-fit CSS - Box Sizing CSS - Filters CSS - Style Images CSS - Variables CSS - Media Queries CSS - Flexbox Layout CSS - Grid Layout
CSS Responsive
RWD - Introduction RWD - Grid View RWD - Media Queries RWD - Images
CSS References
CSS - Reference CSS - Selectors CSS - Functions CSS - Units CSS - Animatable CSS - Entities

CSS Colors

Colors can be specified using following ways:

  • Color names
  • Hexadecimal colors
  • RGB colors
  • RGBA colors
  • HSL colors
  • HSLA colors

Color Names

140 color names are predefined in the HTML and CSS color specification.

Tomato
Teal
Orange
MediumSeaGreen
Blue
Grey
Black
Purple
Violet
royalblue
slateblue
Chartreuse
Run code

Look at the table of predefined color names.


Background Color

The following example shows how to set background color for HTML elements:

Run code

Text Color

The following example shows how to set text color for HTML elements:

Run code

Border Color

The following example shows how to set border color for HTML elements:

Blue Border

Grey Border

Orange Border

Run code

Color Values

As already mentioned colors can also be specified using HEX values, RGB values, HSL values, RGBA values, and HSLA values:

Same as color name "Chartreuse":

#7FFF00

rgb(127, 255, 00)

hsl(90, 100%, 50%)

Same as color name "Chartreuse", but 50% transparent:

rgba(127, 255, 00, 0.5)

hsla(90, 100%, 50%, 0.5)

Run code

HEX Values

A color can be specified using a hexadecimal value, which has the following syntax:

#rrggbb

OR

#rgb

Where rr (red), gg (green) and bb (blue) are hexadecimal values between 00 and ff.

For example, #0000ff is displayed as blue, because blue is set to its highest value (ff) and the others are set to the lowest (00).

Experiment by mixing the HEX values below:

#FF0066

FF

00

66

Run code

RGB Values

RGB Stands for "Red Green Blue". It refers to the three hues of light (red, green, and blue), that can mix together to form any color.

An RGB color value is specified with the rgb() function, which has the following syntax:

rgb(red, green, blue)

Each parameter (red, green, and blue) defines the intensity of the color between 0 and 255.

For example, rgb(0, 0, 255) is displayed as blue, because blue is set to its highest value (255) and the others are set to 0.

To display the color black, all color parameters must be set to 0, like this: rgb(0, 0, 0).

To display the color white, all color parameters must be set to 255, like this: rgb(255, 255, 255).

Experiment by mixing the RGB values below:

rgb(251, 185, 0)

251

185

0

Run code

RGBA Values

RGBA color values are an extension of RGB color values with an alpha channel - which specifies the opacity of the object.

An RGBA color is specified with the rgba() function, which has the following syntax:

rgba(red, green, blue, alpha)

The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque).

Experiment by mixing the RGBA values below:

rgba(251, 185, 0, 0.5)

251

185

0

0.5

Run code

HSL Values

HSL stands for hue, saturation, and lightness - and represents a cylindrical-coordinate representation of colors.

An HSL color value is specified with the hsl() function, which has the following syntax:

hsl(hue, saturation, lightness)

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; 0% means a shade of gray and 100% is the full color.

Lightness is also a percentage; 0% is black, 100% is white.

Experiment by mixing the HSL values below:

hsl(120, 100%, 50%)

120

100%

50%

Run code

HSLA Values

HSLA color values are an extension of HSL color values with an alpha channel - which specifies the opacity of the object.

An HSLA color value is specified with the hsla() function, which has the following syntax:

hsla(hue, saturation, lightness, alpha)

The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque).

Experiment by mixing the HSLA values below:

hsla(120, 100%, 50%, 0.5)

120

100%

50%

0.5

Run code

Color Picker tool

This tool makes it easy to create, adjust, and experiment with custom colors for the web. It also makes it easy to convert between various color formats supported by CSS, including: HEXA colors, RGB (Red/Green/Blue) and HSL (Hue/Staturation/Lightness). Control over the alpha channel is also supported on RGB (rgba) and HSL (hsla) formats.

This tool will help you identify the perfect CSS colors to apply to your HTML.

Go to Color Picker Tool