View video tutorial

CSS Colors

CSS

CSS colors are used in elements to look attractive and colorful.

Select and convert your color code in RGB | HEX | HSL


CSS Color


Color can be defined in many different ways.

RGB, RGBA, HEX, HSL, HSLA are the common methods among many.

In CSS color can be displayed by standard color name also.

CSS color can be used in many ways in elements such as :background color, text color, border color etc.

Tomato

Orange

DodgerBlue

MediumSeaGreen

Gray

SlateBlue

Violet

LightGray

Learning with CSS Editor "Try it Now"

You can edit the CSS code and view the result using online editor.

Example

<h2 style="background-color:Tomato;">Tomato</h2>
<h2 style="background-color:Orange;">Orange</h2>
<h2 style="background-color:DodgerBlue;">DodgerBlue</h2>
<h2 style="background-color:MediumSeaGreen;">MediumSeaGreen</h2>
<h2 style="background-color:Gray;">Gray</h2>
<h2 style="background-color:SlateBlue;">SlateBlue</h2>
<h2 style="background-color:Violet;">Violet</h2>
<h2 style="background-color:LightGray;">LightGray</h2>
Try it Now »

Click on the "See output" button to see how it works.


Hello World

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Sample Code

Copy each file contents and paste it to your project, run and see the final output when everything is OK.

Example

<h2 style="background-color:Tomato;">Tomato</h2>
<h2 style="background-color:DodgerBlue;">DodgerBlue</h2>
<h2 style="background-color:MediumSeaGreen;">MediumSeaGreen</h2>
<h3 style="background-color:Tomato;">Hello World</h3>
<p style="background-color:DodgerBlue;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
  nibh euismod
  tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p style="background-color:MediumSeaGreen;">Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
  suscipit
  lobortis nisl ut aliquip ex ea commodo consequat.</p>
Try it Now »

Click on the "Try it Now" button to see how it works.