CSS Colors: What You Need to Know About HTML, Hex, RGB & HSL Color Values

Anna Fitzgerald
Anna Fitzgerald

Published:

Color is an essential part of website design. It can influence what visitors click on, how they read text, and how they feel navigating around your site.

css color represented by paintcans

While using color effectively requires practice and knowledge of color theory, adding it to your website is easy, thanks to the CSS color and background-color properties.

There are several ways to define these properties. You can use HTML color names, hex color codes, RGB color codes, or HSL color values to change the text color or background color of a web page. Let’s take a closer look at these different methods below.

Table of Contents

Download Now: 50 Code Templates [Free Snippets]

HTML Colors in CSS

Using HTML colors is one of the easiest methods for adding color in CSS. That’s because HTML colors are represented as color names, rather than a series of numbers.

There are currently around 140 color names supported by modern browsers. Orange, gold, cyan, maroon, and skyblue are just a few examples. You’ll find a list of color names (along with the related hex codes) later on in this blog.

css colors by name

Let’s look at an example. Say you want to change a paragraph of text to red. You’d use a CSS selector to target the paragraph and define the color property with the HTML color name “red.”

See the Pen CSS Colors 1 by HubSpot (@hubspot) on CodePen.

This seems easy enough, right?

However, using HTML color names is not recommended. For one, they’re difficult to remember beyond the standard rainbow. Yes, red, yellow, and navy are easy to memorize, but what about OldLace? Mocassin? The 100+ others?

Secondly, while the approximately 140 color names are a lot to memorize, it’s a small number when you consider how many colors, shades, and hues exist in the world. Using HTML color names will therefore limit your color combinations and ability to create a website color scheme.

Finally, and most importantly, HTML color names introduce imprecision. Your ivory may be another person’s white, which may be another’s seashell — and so on.

To avoid this imprecision online, you can use color codes, rather than names. Let’s take a look at the most popular formats below.

Hex Color Codes in CSS

Hex color codes are composed of a hashtag and three pairs of characters that represent the intensity of the three primary colors (red, green, and blue). Possible values range from 00 (the lowest intensity of a primary color) to FF (the highest intensity of a primary color).

Every hex code consists of six characters in total. These six characters can be any combination of ten numerals (0-9) and six letters (a-f). That means there are 16,777,216 possible combinations in total. Let’s walk through a few combinations below.

To create white, you have to mix each of the three primary colors at their full intensity. That means the Hex color code of white is #FFFFFF. Since black is a lack of primary color, its hex color code is #000000. To create blue, you want the highest intensity of blue and the lowest intensity of the other two primary colors. The hex code of red would therefore be #FF0000.

The diagram below shows a few other hex color codes.

common hex codes; css colors

Obviously, memorizing 16,000 hex color codes is out of the question. That’s where online tools like HTML Color Codes’ Color Picker come in. With this tool, you can click and drag your cursor inside the “picker area” on the right. Its Hex (as well as its RGB and HSL values) will appear at the top. Take a look at the demo below.

HTML Color Codes Color Picker tool

Image Source

Let’s look at an example. Say you want to change the background of a web page to the shade of blue above. You’d use a CSS selector to target the body and define the background-color property with the hex color code #69EAFF.

See the Pen CSS Colors 2 by HubSpot (@hubspot) on CodePen.

 

RGB Color Codes in CSS

RGB is another color model based on the combination of the primary colors — hence, the shorthand for Red, Green, Blue. RBG color codes are composed of three numbers separated by commas. Each number represents the intensity of the respective primary color as an integer between 0 and 255. These numbers are then wrapped in parentheses and preceded by a lowercase “rgb.”

So rgb (0, 0, 0) is black, rgb (255, 0, 0) is red, and rgb (0, 0, 255) is blue.

rgb color codes of black, red, and blue

The major benefit of using RGB color codes is that you can not only control the color of an element — you can also control the opacity of that color. To do so, you simply add an “a” to the rgb() prefix and a fourth value inside the parentheses. Ranging from 0 to 1, this value sets the transparency of the color. 0 is completely transparent and 1 is completely opaque. So the value 0.5 would render the color at 50% opacity.

Let’s look at an example. Say you want to change the background color of a heading and paragraph on your page. You want both elements to have the same background color. To ensure the heading is more eye-grabbing, however, you’ll set the background color of the paragraph to be 30% opaque.

See the Pen CSS Colors 3 by HubSpot (@hubspot) on CodePen.

Before we proceed, here’s an interesting color fact. Both magenta and fuchsia, and cyan and aqua, share the same RGB color code and hex code. Take a look below.

css colors, hex codes and rgb color codes of cyan, aqua, fuchsia, and magenta

HSL Color Values in CSS

If you’d like to control hue, saturation, and lightness as well as the transparency of color, then you can use the color system HSL.

HSL is formatted similarly to RGB color codes. It is composed of three numbers separated by commas. These numbers are then wrapped in parentheses and preceded by a lowercase “hsl.” You can also add an “a” to “hsl” and a fourth value between 0 and 1 in parentheses to set the transparency of the color.

However, unlike RGB color codes, the first three numbers of an HSL color value do not represent the intensity of the respective primary color. Instead, these three numbers represent Hue, Saturation, and Lightness. Hue is measured in degrees on a scale of 0 – 360. Setting hue to 0 or 360 is red, 120 is green, 240 is blue. Saturation and Lightness are measured in percentages on a scale of 0 – 100. Saturation set to 0% is a shade of gray and 100% is the full color. Lightness set to 0% is black and 100% is white.

Let’s look at an example. Say you want to change the headings on the page to different shades of red. Then you could use the same hue value, 0, and simply change the saturation and lightness values. For the last heading, we can also add a fourth value to make it transparent.

See the Pen CSS Colors 4 by HubSpot (@hubspot) on CodePen.

 

Color Gradients in CSS

We have only discussed how you can make the background of an element or entire page a solid color. But you can also make it a gradient. A gradient shows one gradually changing into another color (or multiple) in a certain direction like top to bottom, left to right, or diagonally.

To create a gradient, you have to specify at least two color stops. But you don’t have to specify just two. You can specify as many as you want, in any format you want.

Say you want to create a rainbow gradient moving left to right. First, create a div in HTML. You don't have to put anything inside the div element. You can just leave it empty and then style it with CSS.

To create the gradient effect, use the shorthand “background” property in CSS and set the property to “linear-gradient.” You can then specify as many color stops as you want in parentheses. You can use any combination of HTML color names, hex color codes, RGB color codes, and HSL color values. Below we'll use five color stops.

Here’s the CSS:

See the Pen CSS Colors 5 by HubSpot (@hubspot) on CodePen.

You can learn more about creating background color gradients inHow to Add & Change Background Color in HTML.

Adding Color with Bootstrap CSS

The above examples have assumed you‘re building your site from scratch. But what if you’re using Bootstrap CSS in your project?

Bootstrap CSS is an open-source toolkit that provides pre-designed templates and components so you can build out layouts with important design elements like Bootstrap navbars, Bootstrap buttons, and forms without having to build them from scratch.

But to create a truly custom website that reflects your unique brand identity, you can‘t simply copy and paste these chunks of reusable code. You’ll want to add custom CSS in an external stylesheet to override Bootstrap CSS’s default stylesheet.

For example, say you want to add a call-to-action button on your site. Then you can use one of Bootstrap‘s nine default modifier classes, which will automatically create a button with rounded edges and a particular text and background color. For example, the .btn-danger class will make the button red with white font, while .btn-warning will make the button yellow with black font, and so on. Here’s a look at all the predefined button styles together.

Bootstrap default modifier classes-1

Image Source

Let‘s say you like the size and rounded edges of these buttons, but none of the colors are part of your website’s color scheme. In that case, you'll want to use the Bootstrap button class without a modifier class. Then, in your own stylesheet, you can apply a text and background color to your buttons using the CSS properties and values discussed above.

In the example below, we‘ll add a button element with the .btn class in the HTML. We’ll also wrap this button in a div with the .container class so padding is added on all sides.

Then, using a class selector, we'll define the color and background-color properties with hex color codes for white (#FFFFFF) and a shade of turquoise (#5FBC9F) in CSS.

See the Pen CSS Colors 6 by HubSpot (@hubspot) on CodePen.

You can follow this same process for overriding the default styling of other Bootstrap elements, like navbars, tables, grids, and more.

CSS Colors List

Finally, here’s a handy CSS colors cheat sheet that covers color names, the associated hex code, and what the color looks like.

HTML Color Name

Hex Color Code

Color Example

white

#FFFFFF

 

ghostwhite

#F8F8FF

 

whitesmoke

#F5F5F5

 

snow

#FFFAFA

 

ivory

#FFFFF0

 

floralwhite

#FFFAF0

 

seashell

#FFF5EE

 

beige

#F5F5DC

 

oldlace

#FDF5E6

 

antiquewhite

#FAEBD7

 

linen

#FAF0E6

 

lavenderblush

#FFF0F5

 

mistyrose

#FFE4E1

 

honeydew

#F0FFF0

 

mintcream

#F5FFFA

 

azure

#F0FFFF

 

aliceblue

#F0F8FF

 

lightcyan

#E0FFFF

 

cyan

#00FFFF

 

aqua

#00FFFF

 

aquamarine

#7FFFD4

 

mediumaquamarine

#66CDAA

 

powderblue

#B0E0E6

 

lightblue

#ADD8E6

 

lightsteelblue

#B0C4DE

 

lightskyblue

#87CEFA

 

skyblue        

#87CEEB

 

paleturquoise

#AFEEEE

 

turquoise

#40E0D0

 

mediumturquoise

#48D1CC

 

darkturquoise

#00CED1

 

cornflowerblue

#6495ED

 

deepskyblue

#00BFFF

 

dodgerblue

#1E90FF

 

royalblue

#4169E1

 

lightseagreen

#20B2AA

 

cadetblue

#5F9EA0

 

darkcyan

#008B8B

 

teal

#008080

 

steelblue

#4682B4

 

mediumslateblue

#7B68EE

 

slateblue

#6A5ACD

 

darkslateblue

#483D8B

 

midnightblue

#191970

 

navy

#000080

 

darkblue

#00008B

 

mediumblue

#0000CD

 

blue

#0000FF

 

mediumvioletred

#C71585

 

deeppink

#FF1493

 

hotpink

#FF69B4

 

palevioletred

#DB7093

 

lightpink

#FFB6C1

 

pink

#FFC0CB

 

lightcoral

#F08080

 

salmon

#FA8072

 

lightsalmon

#FFA07A

 

coral

#FF7F50

 

tomato

#FF6347

 

darksalmon

#E9967A

 

indianred

#CD5C5C

 

red

#FF0000

 

orangered

#FF4500

 

darkorange

#FF8C00

 

orange

#FFA500

 

crimson

#DC143C

 

firebrick

#B22222

 

darkred

#8B0000

 

maroon

#800000

 

brown

#A52A2A

 

saddlebrown

#8B4513

 

sienna

#A0522D

 

chocolate

#D2691E

 

peru

#CD853F

 

tan

#D2B48C

 

burlywood

#DEB887

 

rosybrown

#BC8F8F

 

sandybrown

#F4A460

 

wheat

#F5DEB3

 

navajowhite

#FFDEAD

 

bisque

#FFE4C4

 

blanchedalmond

#FFEBCD

 

cornsilk

#FFF8DC

 

darkgoldenrod

#B8860B

 

goldenrod

#DAA520

 

gold

#FFD700

 

yellow

#FFFF00

 

khaki

#F0E68C

 

palegoldenrod

#EEE8AA

 

lightgoldenrodyellow

#FAFAD2

 

lemonchiffon

#FFFACD

 

lightyellow

#FFFFE0

 

mocassin

#FFE4B5

 

peachpuff

#FFDAB9

 

papayawhip

#FFEFD5

 

palegreen

#98FB98

 

lightgreen

#90EE90

 

mediumspringgreen

#00FA9A

 

springgreen

#00FF7F

 

lime

#00FF00

 

lawngreen

#7CFC00

 

chartreuse

#7FFF00

 

greenyellow

#ADFF2F

 

yellowgreen

#9ACD32

 

darkseagreen

#8FBC8F

 

limegreen

#32CD32

 

mediumseagreen

#3CB371

 

seagreen

#2E8B57

 

darkkhaki

#BDB76B

 

olivedrab

#6B8E23

 

olive

#808000

 

darkolivegreen

#556B2F

 

green

#008000

 

darkgreen

#006400

 

indigo

#4B0082        

 

rebeccapurple

#663399

 

purple

#800080

 

darkmagenta

#8B008B

 

darkviolet

#9400D3

 

darkorchid

#9932CC

 

blueviolet

#8A2BE2

 

mediumpurple

#9370DB

 

mediumorchid

#BA55D3

 

orchid

#DA70D6        

 

fuchsia

#FF00FF

 

magenta

#FF00FF

 

violet

#EE82EE

 

plum

#DDA0DD

 

thistle

#D8BFD8

 

lavender

#E6E6FA

 

gainsboro

#DCDCDC

 

lightgray

#D3D3D3

 

silver

#C0C0C0

 

darkgray

#A9A9A9

 

lightslategray

#778899

 

slategray

#708090

 

gray

#808080

 

dimgray

#696969

 

darkslategray

#2F4F4F

 

black

#000000

 

Adding Color with CSS

In CSS, you can change the text and background color of your web page or different elements on the page. To do so, you just need some familiarity with the color names and codes above.

Depending on the code you use, you can not only experiment with solid colors. You can also change the transparency, hue, saturation, and lightness of the colors on your website. Such basic web design knowledge can help you create a truly custom site.

New Call-to-action

Related Articles

We're committed to your privacy. HubSpot uses the information you provide to us to contact you about our relevant content, products, and services. You may unsubscribe from these communications at any time. For more information, check out our Privacy Policy.

Dozens of free coding templates you can start using right now.

CMS Hub is flexible for marketers, powerful for developers, and gives customers a personalized, secure experience

START FREE OR GET A DEMO