- CSS Tutorial
- CSS - Home
- CSS - Introduction
- CSS - Syntax
- CSS - Selectors
- CSS - Inclusion
- CSS - Measurement Units
- CSS - Colors
- CSS - Backgrounds
- CSS - Fonts
- CSS - Text
- CSS - Images
- CSS - Links
- CSS - Tables
- CSS - Borders
- CSS - Margins
- CSS - Lists
- CSS - Padding
- CSS - Cursor
- CSS - Outlines
- CSS - Dimension
- CSS - Scrollbars
- CSS - Inline Block
- CSS - Dropdowns
- CSS - Visibility
- CSS - Overflow
- CSS - Clearfix
- CSS - Float
- CSS - Arrows
- CSS - Resize
- CSS - Quotes
- CSS - Order
- CSS - Position
- CSS - Hyphens
- CSS - Hover
- CSS - Display
- CSS - Focus
- CSS - Zoom
- CSS - Translate
- CSS - Height
- CSS - Width
- CSS - Opacity
- CSS - Z-Index
- CSS - Bottom
- CSS - Navbar
- CSS - Overlay
- CSS - Forms
- CSS - Align
- CSS - Icons
- CSS - Image Gallery
- CSS - Comments
- CSS - Loaders
- CSS - Attr Selectors
- CSS - Combinators
- CSS - Root
- CSS - Box Model
- CSS - Counters
- CSS - Clip
- CSS - Writing Mode
- CSS - Unicode-bidi
- CSS Advanced
- CSS - Flexbox
- CSS - Positioning
- CSS - Layers
- CSS - Pseudo Classes
- CSS - Pseudo Elements
- CSS - @ Rules
- CSS - Text Effects
- CSS - Media Types
- CSS - Paged Media
- CSS - Aural Media
- CSS - Printing
- CSS - Layouts
- CSS - Validations
- CSS - Image Sprites
- CSS - Important
- CSS3 Tutorial
- CSS3 - Tutorial
- CSS3 - Rounded Corner
- CSS3 - Border Images
- CSS3 - Multi Background
- CSS3 - Color
- CSS3 - Gradients
- CSS3 - Shadow
- CSS3 - Text
- CSS3 - Web font
- CSS3 - 2d transform
- CSS3 - 3d transform
- CSS3 - Animation
- CSS3 - Multi columns
- CSS3 - User Interface
- CSS3 - Box Sizing
- CSS - Tooltips
- CSS - Buttons
- CSS - Pagination
- CSS - Variables
- CSS Responsive
- CSS - Responsive Web Design
- CSS References
- CSS - Questions and Answers
- CSS - Quick Guide
- CSS - References
- CSS - Color References
- CSS - Web browser References
- CSS - Web safe fonts
- CSS - Units
- CSS - Animation
- CSS Resources
- CSS - Useful Resources
- CSS - Discussion
- Selected Reading
- Q&A
CSS - Colors
CSS Colors
CSS uses color values to specify a color. Typically, these are used to set a color either for the foreground of an element (i.e. its text) or else for the background of the element. They can also be used to affect the color of borders and other decorative effects.
Syntax
CSS allows to set colors of an element in a variety of ways. Let's check all the possible available syntax to set the height of an element.
Named Colors
A CSS named color is the name of a color, such as red, blue, black, or lightseagreen.
color: blue; border: 1px solid red; background: aliceblue;
RGB Hexadecimal Colors
color: #f09; border: 1px solid #ff0099; background: #eee;
RGB (Red, Green, Blue) Colors
color: rgb(255 0 153); border: 1px solid rgb(255 0 153); background: rgb(255 0 153 / 80%);
HSL (Hue, Saturation, Lightness) Colors
color: hsl(150 30% 60%); border: 1px solid hsl(150 30% 60%); background: hsl(150 30% 60% / 0.8);
HWB (Hue, Whiteness, Blackness) Colors
color: hwb(12 50% 0%); border: 1px solid hwb(12 50% 0%); background: hwb(194 0% 0% / 0.5);
LAB (Lightness, A-axis, B-axis) Colors
color: lab(50% 40 59.5); border: 1px solid lab(50% 40 59.5); background: lab(50% 40 59.5 / 0.5);
LCH (Lightness, Chroma, Hue) Colors
color: lch(52.2% 72.2 50); border: 1px solid lch(52.2% 72.2 50); background: lch(52.2% 72.2 50 / 0.5);
Oklab (Lightness, A-axis, B-axis) Colors
color: oklab(59% 0.1 0.1); border: 1px solid oklab(59% 0.1 0.1); background: oklab(59% 0.1 0.1 / 0.5);
Oklch (Lightness, Chroma, Hue) Colors
color: oklch(60% 0.15 50); border: 1px solid oklch(60% 0.15 50); background: oklch(60% 0.15 50 / 0.5);
These formats are explained in more detail in the following sections −
CSS Colors - Keyword
CSS supports the color names to be directly passed to the property background-color and color. 140 standard color names are supported by CSS.
Few of the examples are listed in the table below:
Color | Color Name |
---|---|
Black | |
Red | |
Blue | |
Green | |
Aquamarine |
Example
Here is an example:
<html> <head> <style> div { background-color: aqua; padding: 10px; } </style> </head> <body> <h3>Color Keyword - example</h3> <p>As the keyword passed is aqua, the background will appear as aqua colored..</p> <div> This div element has a colored background based on the color keyword passed, i.e aqua. </div> </body> </html>
CSS Colors - Hexadecimal Codes
A hexadecimal is a 6 digit representation of a color. The first two digits(RR) represent a red value, the next two are a green value(GG), and the last are the blue value(BB).
A hexadecimal value can be taken from any graphics software like Adobe Photoshop, Jasc Paintshop Pro, or even using Advanced Paint Brush.
Each hexadecimal code will be preceded by a pound or hash sign '#'. Following are the examples of hexadecimal notation.
To specify the hexadecimal codes, you can use upper case or lower case letters.
Color | Color Hexadecimal Code |
---|---|
#000000 | |
#FF0000 | |
#00FF00 | |
#0000FF | |
#FFFF00 | |
#00FFFF | |
#FF00FF | |
#C0C0C0 | |
#FFFFFF |
Example
Here is an example:
<html> <head> <style> div{ background-color: #00ff00; padding: 10px; } </style> </head> <body> <h3>Hexadecimal code - example</h3> <p>As the hexadecimal code is #00ff00 the background will appear green.</p> <div> This div element has a green background. </div> </body> </html>
CSS Colors - Short Hexadecimal Codes
This is a shorter form of the six-digit notation. In this format, each digit is replicated to arrive at an equivalent six-digit value. For example: #6A7 becomes #66AA77.
A hexadecimal value can be taken from any graphics software like Adobe Photoshop, Jasc Paintshop Pro, or even using Advanced Paint Brush.
Each short hexadecimal code will be preceded by a pound or hash sign '#'. Following are the examples of short hexadecimal notation.
Color | Short Hexadecimal Code |
---|---|
#000 | |
#F00 | |
#0F0 | |
#0FF | |
#FF0 | |
#0FF | |
#F0F | |
#FFF |
Example
Here is an example:
<html> <head> <style> div{ background-color: #00f; padding: 10px; color:#fff; } </style> </head> <body> <h3>Short Hexadecimal code - example</h3> <p>As the short hexadecimal code is #00f the background will appear blue.</p> <div> This div element has a blue background. </div> </body> </html>
CSS Colors - RGB Values
This color value is specified using the rgb( ) property.
It takes three values, one each for red, green, and blue.
The value can be an integer between 0 and 255 or a percentage.
All the browsers does not support rgb() property of color so it is recommended not to use it.
Following is the example to show few colors using RGB values.
Color | Color RGB |
---|---|
rgb(0,0,0) | |
rgb(255,0,0) | |
rgb(0,255,0) | |
rgb(0,0,255) | |
rgb(255,255,0) | |
rgb(0,255,255) | |
rgb(255,0,255) | |
rgb(192,192,192) | |
rgb(255,255,255) |
Example
Here is an example:
<html> <head> <style> div{ background-color: rgb(255,0,255); padding: 10px; } </style> </head> <body> <h3>RGB - example</h3> <p>As the rgb(255,0,255) is set the background will appear accordingly.</p> <div> This div element has a colored background based on the rgb values. </div> </body> </html>
CSS Colors - RGBA Values
This color value is specified using the rgba( ) property.
It takes four values, one each for red, green, and blue and the last value as the alpha (transparency) value.
The alpha value can be any value between 0 and 1.
All the browsers does not support rgba() property of color so it is recommended not to use it.
Following is the example to show few colors using RGBA values.
Color | Color RGBA |
---|---|
rgba(0,0,0,0) | |
rgba(255,0,0,0.2) | |
rgba(0,255,0,0.3) | |
rgba(0,0,255,0.5) | |
rgba(255,255,0,0.7) | |
rgba(0,255,255,0.1) | |
rgba(255,0,255,1) | |
rgba(192,192,192,0.4) | |
rgba(255,255,255,1) |
Example
Here is an example:
<html> <head> <style> div { background-color: rgba(255,0,255,0.2); padding: 10px; } </style> </head> <body> <h3>RGBA - example</h3> <p>As the rgba(255,0,255,0.2) is set the background will appear with transparency value of 0.2.</p> <div> This div element has a colored background based on the rgba values. </div> </body> </html>
CSS Colors - HSL Values
This color value is specified using the hsl() function.
HSL stands for hue, saturation and lightness.
Hue is represented in degrees (0-360), saturation and lightness are represented as percentages (0% - 100%).
Following is the example to show few colors using HSL property.
Color | Color HSL |
---|---|
hsl(0,0%,50%) | |
hsl(255,80%,70%) | |
hsl(290,100%,60%) | |
hsl(360,70%,20%) | |
hsl(89,80%,67%) |
Example
Here is an example:
<html> <head> <style> div{ background-color: hsl(355,70%,50%); padding: 10px; } </style> </head> <body> <h3>HSL - example</h3> <p>As the hsl(355,70%,50%) is set the background will appear based on the hsl values passed.</p> <div> This div element has a colored background based on the hsl values hsl(355,70%,50%). </div> </body> </html>
CSS Colors - HSLA Values
This color value is specified using the hsl() function.
HSLA stands for hue, saturation, lightness and alpha.
It takes four values, first for hue, second for saturation, third for lightness and fourth is the alpha (transparency) value.
Hue is represented in degrees (0-360), saturation and lightness are represented as percentages (0% - 100%), and alpha value can be in between 0 and 1.
Following is the example to show few colors using HSLA property.
Color | Color HSLA |
---|---|
hsla(0,0%,50%,0.5) | |
hsla(255,80%,70%,1) | |
hsla(290,100%,60%,0.2) | |
hsla(360,70%,20%,0.4) | |
hsla(89,80%,67%,0.9) |
Example
Here is an example:
<html> <head> <style> div{ background-color: hsla(355,70%,50%,0.4); padding: 10px; } </style> </head> <body> <h3>HSLA - example</h3> <p>As the hsla(355,70%,50%,0.4) is set the background will appear based on the hsla values passed, with high transparency.</p> <div> This div element has a colored background based on the hsl values hsla(355,70%,50%,0.4). </div> </body> </html>
CSS colors - currentcolor keyword
The currentcolor keyword takes the value of the color property of an element. It can be passed to any other styling property using the keyword currentcolor.
Example
Here is an example:
<html> <head> <style> div{ color: red; border: 5px solid currentcolor; } </style> </head> <body> <h2>The currentcolor Keyword</h2> <p>As the currentcolor keyword is used for border after color property is set as red, the border will also appear red.</p> <div> This div element has a red text color and a red border. </div> </body> </html>
Building Color Codes
You can build millions of color codes using our Color Code Builder. Check the HTML Color Code Builder.
To use this tool, you would need a Java Enabled Browser.
Browser Safe Colors
Here is the list of 216 colors which are supposed to be most safe and computer independent colors. These colors vary from hexa code 000000 to FFFFFF. These colors are safe to use because they ensure that all computers would display the colors correctly when running a 256 color palette −
000000 | 000033 | 000066 | 000099 | 0000CC | 0000FF |
003300 | 003333 | 003366 | 003399 | 0033CC | 0033FF |
006600 | 006633 | 006666 | 006699 | 0066CC | 0066FF |
009900 | 009933 | 009966 | 009999 | 0099CC | 0099FF |
00CC00 | 00CC33 | 00CC66 | 00CC99 | 00CCCC | 00CCFF |
00FF00 | 00FF33 | 00FF66 | 00FF99 | 00FFCC | 00FFFF |
330000 | 330033 | 330066 | 330099 | 3300CC | 3300FF |
333300 | 333333 | 333366 | 333399 | 3333CC | 3333FF |
336600 | 336633 | 336666 | 336699 | 3366CC | 3366FF |
339900 | 339933 | 339966 | 339999 | 3399CC | 3399FF |
33CC00 | 33CC33 | 33CC66 | 33CC99 | 33CCCC | 33CCFF |
33FF00 | 33FF33 | 33FF66 | 33FF99 | 33FFCC | 33FFFF |
660000 | 660033 | 660066 | 660099 | 6600CC | 6600FF |
663300 | 663333 | 663366 | 663399 | 6633CC | 6633FF |
666600 | 666633 | 666666 | 666699 | 6666CC | 6666FF |
669900 | 669933 | 669966 | 669999 | 6699CC | 6699FF |
66CC00 | 66CC33 | 66CC66 | 66CC99 | 66CCCC | 66CCFF |
66FF00 | 66FF33 | 66FF66 | 66FF99 | 66FFCC | 66FFFF |
990000 | 990033 | 990066 | 990099 | 9900CC | 9900FF |
993300 | 993333 | 993366 | 993399 | 9933CC | 9933FF |
996600 | 996633 | 996666 | 996699 | 9966CC | 9966FF |
999900 | 999933 | 999966 | 999999 | 9999CC | 9999FF |
99CC00 | 99CC33 | 99CC66 | 99CC99 | 99CCCC | 99CCFF |
99FF00 | 99FF33 | 99FF66 | 99FF99 | 99FFCC | 99FFFF |
CC0000 | CC0033 | CC0066 | CC0099 | CC00CC | CC00FF |
CC3300 | CC3333 | CC3366 | CC3399 | CC33CC | CC33FF |
CC6600 | CC6633 | CC6666 | CC6699 | CC66CC | CC66FF |
CC9900 | CC9933 | CC9966 | CC9999 | CC99CC | CC99FF |
CCCC00 | CCCC33 | CCCC66 | CCCC99 | CCCCCC | CCCCFF |
CCFF00 | CCFF33 | CCFF66 | CCFF99 | CCFFCC | CCFFFF |
FF0000 | FF0033 | FF0066 | FF0099 | FF00CC | FF00FF |
FF3300 | FF3333 | FF3366 | FF3399 | FF33CC | FF33FF |
FF6600 | FF6633 | FF6666 | FF6699 | FF66CC | FF66FF |
FF9900 | FF9933 | FF9966 | FF9999 | FF99CC | FF99FF |
FFCC00 | FFCC33 | FFCC66 | FFCC99 | FFCCCC | FFCCFF |
FFFF00 | FFFF33 | FFFF66 | FFFF99 | FFFFCC | FFFFFF |