Easy Tutorial
Css3 Pr Transition Property Css Pr Grid Sel Active Pr Outline Style Pr Class Clear Css Selectors Pr Mix Blend Mode Css3 Pr Target New Sel Out Of Range Pr Dim Min Height Sel Checked Css Backdrop Filte Css3 Pr Target Position Css3 Pr Align Items Pr Border Left Style Css3 Pr Transition Timing Function Pr Border Bottom_Color Css3 Pr Resize Css3 Pr Text Justify Func Cubic Bezier Css3 Pr Animation Direction Pr Font Font Family Func Calc Css Animatable Pr Grid Template Rows Css Colors Pr Dim Line Height Func Rgb Css Sel Hover Css3 Pr Perspective Origin Sel Link Css3 Pr Column Rule Style Css3 Pr Border Image Source Sel Element Pluss Sel Id Css3 Pr Row Gap Sel Firstletter Sel In Range Css3 Pr Gap Func Repeating Radial Gradient Sel Invalid Sel Empty Pr Clip Path Css3 Pr Border Bottom Left Radius Pr Pos Z Index Css3 Pr Transition Delay Pr Text Direction Css3 Pr Animation Fill Mode Css3 Pr Appearance Pr Gen Content Sel Optional Pr Border Right Color Css3 Pr Pointer Events Css Websafe Fonts Sel After Css3 Pr Font Stretch Pr Grid Template Columns Css3 Pr Nav Index Pr Grid Row Gap Pr Text Text Transform Sel Attribute Value Contains Pr Background Repeat Sel Disabled Css3 Pr All Func Conic Gradient Sel Only Of Type Pr Tab Caption Side Pr Grid Row End Pr Font Font Size Css3 Pr Animation Play State Pr Border Righ Sel Firstchild Pr Print Pagebb Pr Padding Top Pr Border Right Width Css3 Pr Grid Columns Css3 Pr Box Pack Css Ref Aural Pr Padding Right Sel Attr End Css3 Pr Border Image Sel Element Element Css3 Pr Backface Visibility Css3 Pr Background Pr Border Right Css3 Pr Flex Wrap Sel Only Child Sel Not Css3 Pr Outline Offset Func Repeating Conic Gradient Func Radial Gradient Pr Border Left Color Sel Valid Css3 Pr Animation Keyframes Sel Before Css3 Pr Border Bottom Right Radius Css3 Pr Word Wrap Pr Grid Auto Flow Css3 Pr Nav Down Css3 Pr Rotation Pr Object Fit Pr Outline Color Pr Text Word Spacing Pr Gen Counter Increment Pr Import Rule Sel Class Css3 Pr Column Rule Width Sel Nth Of Type Css3 Pr Flex Css3 Pr Nav Up Css3 Pr Border Top Right Radius Pr Margin Left Css3 Pr Transform Style Pr Padding Left Css Pr Writing Mode Sel Last Of Type Pr Outline Width Css3 Pr Filter Pr Font Weight Css3 Pr Transform Pr Grid Gap Pr Pos Right Css3 Pr Text Overflow Css3 Pr Column Rule Color Pr Border Pr Border Left Width Sel Root Css3 Pr Hanging Punctuation Sel Element Comma Pr Grid Area Pr Gen Quotes Css3 Pr Border Image Slice Css3 Pr Animation Timing Function Pr Grid Auto Row Pr Border Left Pr Tab Empty Cellsp Css3 Pr Justify Content Pr Border Right Style Css3 Pr Box Flex Group Sel Selection Css3 Pr Animation Sel All Sel Nth Last Of Type Css3 Browsersupport Css3 Pr Border Image Outset Css Reference Pr Background Blend Mode Css3 Pr Box Sizing Sel Nth Child Pr Grid Column Css3 Pr Font Face Rule Sel Element Pr Pos Clip Pr Text Color Pr Pos Vertical Align Pr Margin Right Sel Attribute Value Lang Css3 Pr Transition Duration Pr Dim Max Width Pr Background Image Css3 Pr Column Fill Css Inherit Pr Grid Column Start Pr Class Cursor Func Repeating Linear Gradient Css3 Pr Box Orient Sel Focus Pr Margin Bottom Pr Grid Column End Pr Padding Pr Font Font Style Pr Border Collapse Css Initial Sel Attribute Value Pr Mix Blend Mode Html Css3 Pr Font Size Adjust Css3 Pr Opacity Pr List Style Position Pr Grid Column Gap Sel Attribute Css3 Pr Flex Flow Css3 Pr Icon Css3 Pr Mediaquery Pr Text Text Indent Sel Last Child Css3 Pr Border Image Repeat Sel Firstline Pr Grid Row Css3 Pr Text Decoration Style Css3 Pr Target Name Func Var Pr Print Pageba Func Rgba Pr Text Text Decoration Pr Border Style Func Counter Sel Read Only Pr List Style Image Css3 Pr Rotation Point Css3 Pr Background Size Pr Border Bottom Css3 Pr Punctuation Trim Pr Font Font Variant Pr Border Top Width Pr Pos Bottom Css3 Pr Animation Delay Pr Background Position Pr Grid Auto Columns Css3 Pr Background Origin Css3 Pr Grid Rows Css3 Pr Overflow Y Css3 Pr Box Ordinal Group Css3 Pr Box Direction Pr Grid Template Areas Pr Background Color Pr Gen Counter Reset Css3 Pr Align Content Pr Print Pagebi Func Hsl Pr Border Bottom Style Pr Grid Template Css3 Pr Flex Grow Css3 Pr Flex Basis Sel Element Gt Css3 Pr Target Pr Object Position Css3 Pr Text Wrap Css3 Pr Column Rule Css3 Pr Text Emphasis Func Minmax Sel Lang Pr Grid Auto Rows Pr List Style Type Pr Pos Overflow Css3 Pr Order Func Max Css3 Pr Text Outline Pr Grid Row Start Pr Pos Top Css3 Pr Text Shadow Pr Border Top Color Pr Text Text Align Func Min Pr Dim Max Height Css Functions Pr Class Display Pr Dim Height Sel Gen Sibling Css3 Pr Animation Duration Pr Border Spacing Func Repeat Sel Attr Begin Pr Border Width Css3 Pr Overflow X Pr Outline Css3 Pr Tab Size Css3 Pr Animation Name Pr Dim Width Css3 Pr Text Decoration Line Css Units Css3 Pr Box Flex Css3 Pr Word Break Func Attr Pr Margin Top Pr Text Unicode Bidi Css3 Pr Text Align Last Css3 Pr Columns Css3 Pr Align Self Pr Border Color Pr Text Letter Spacing Sel Enable Sel Attr Contain Sel Required Pr List Style Css3 Pr Column Gap Css3 Pr Flex Direction Css3 Pr Text Decoration Color Pr Border Top Css3 Pr Transition Func Linear Gradient Css Colors Legal Css3 Pr Overflow Style Css3 Pr Box Lines Pr Charset Rule Sel Target Css3 Pr Nav Right Css3 Pr Column Count Css3 Pr Background Clip Pr Dim Min Width Pr Class Position Pr Margin Pr Class Float Pr Border Bottom Width Css3 Pr Transform Origin Css3 Pr Column Width Css3 Pr Box Align Sel First Of Type Css3 Pr Border Top Left Radius Pr Background Attachment Sel Enabled Pr Pos Left Pr Tab Empty Cells Css3 Pr Column Span Pr Tab Table Layout Pr Border Top Style Css3 Pr Border Radius Func Hsla Css3 Pr Nav Left Pr Padding Bottom Css3 Pr Box Shadow Css3 Pr Animation Iteration Count Css Colornames Pr Class Visibility Pr Text White Space Sel Read Write Css3 Pr Flex Shrink Css3 Pr Perspective Css3 Pr Border Image Width Css Colorsfull Sel Nth Last Child Sel Visited Pr Font Font Pr Border Bottom Color
❮ Pr Grid Template Rows Pr Dim Line Height ❯

CSS Color

Color is a combination of Red (RED), Green (GREEN), and Blue (BLUE) light.

Color Values

In CSS, colors are defined using hexadecimal (hex) notation, which combines the values of red, green, and blue. The values can range from 0 (hex 00) to 255 (hex FF).

Three double-digit hexadecimal values are written starting with a # symbol.

Color Examples

Color Color HEX Color RGB
#000000 rgb(0,0,0)
#FF0000 rgb(255,0,0)
#00FF00 rgb(0,255,0)
#0000FF rgb(0,0,255)
#FFFF00 rgb(255,255,0)
#00FFFF rgb(0,255,255)
#FF00FF rgb(255,0,255)
#C0C0C0 rgb(192,192,192)
#FFFFFF rgb(255,255,255)

Over 16 Million Different Colors

The combination of red, green, and blue values from 0 to 255 gives a total of over 16 million different colors (256 × 256 × 256).

Most modern monitors can display at least 16,384 colors.

If you look at the color table below, you will see different shades of red from 0 to 255.

To see the full color mix as red changes from 0 to 255, click on the hex or RGB values.

Red Light Hex Value RGB
#000000 rgb(0,0,0)
#080000 rgb(8,0,0)
#100000 rgb(16,0,0)
#180000 rgb(24,0,0)
#200000 rgb(32,0,0)
#280000 rgb(40,0,0)
#300000 rgb(48,0,0)
#380000 rgb(56,0,0)
#400000 rgb(64,0,0)
#480000 rgb(72,0,0)
#500000 rgb(80,0,0)
#580000 rgb(88,0,0)
#600000 rgb(96,0,0)
#680000 rgb(104,0,0)
#700000 rgb(112,0,0)
#780000 rgb(120,0,0)
#800000 rgb(128,0,0)
#880000 rgb(136,0,0)
#900000 rgb(144,0,0)
#980000 rgb(152,0,0)
#A00000 rgb(160,0,0)
#A80000 rgb(168,0,0)
#B00000 rgb(176,0,0)
#B80000 rgb(184,0,0)
#C00000 rgb(192,0,0)
#C80000 rgb(200,0,0)
#D00000 rgb(208,0,0)
#D80000 rgb(216,0,0)
#E00000 rgb(224,0,0)
#E80000 rgb(232,0,0)
#F00000 rgb(240,0,0)
#F80000 rgb(248,0,0)
#FF0000 rgb(255,0,0)

Grayscale

Grayscale HEX RGB
#000000 rgb(0,0,0)
#080808 rgb(8,8,8)
#101010 rgb(16,16,16)
#181818 rgb(24,24,24)
#202020 rgb(32,32,32)
#282828 rgb(40,40,40)
#303030 rgb(48,48,48)
#383838 rgb(56,56,56)
#404040 rgb(64,64,64)
#484848 rgb(72,72,72)
#505050 rgb(80,80,80)

This is a list of web-safe colors:

| #585858 | rgb(88,88,88) | | #606060 | rgb(96,96,96) | | #686868 | rgb(104,104,104) | | #707070 | rgb(112,112,112) | | #787878 | rgb(120,120,120) | | #808080 | rgb(128,128,128) | | #888888 | rgb(136,136,136) | | #909090 | rgb(144,144,144) | | #989898 | rgb(152,152,152) | | #A0A0A0 | rgb(160,160,160) | | #A8A8A8 | rgb(168,168,168) | | #B0B0B0 | rgb(176,176,176) | | #B8B8B8 | rgb(184,184,184) | | #C0C0C0 | rgb(192,192,192) | | #C8C8C8 | rgb(200,200,200) | | #D0D0D0 | rgb(208,208,208) | | #D8D8D8 | rgb(216,216,216) | | #E0E0E0 | rgb(224,224,224) | | #E8E8E8 | rgb(232,232,232) | | #F0F0F0 | rgb(240,240,240) | | #F8F8F8 | rgb(248,248,248) | | #FFFFFF | rgb(255,255,255) |

Web-Safe Colors?

Several years ago, when computers supported a maximum of 256 different colors, a list of 216 "web-safe colors" was recommended as a web standard, reserving 40 fixed system colors.

This is not very important now, as most computers can display millions of different colors, but the choice is yours.

A cross-browser color palette was created to ensure that all computers would display the correct colors, 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 |

❮ Pr Grid Template Rows Pr Dim Line Height ❯