CSS Colors
Options to define a color
There are numerous ways you can define color with CSS. The rules below, for example, all result in the same color (orange-red). They represent the 4 most commonly used color declarations.
CSS code:.example-rule1 { background-color: OrangeRed; }
/* Hexadecimal Colors */
.example-rule2 { background-color: #FF4500; }
/* RGB Values */
.example-rule3 { background-color: rgb(255,69,0); }
/* HSL Values */
.example-rule4 { background-color: hsl(15,100%,50%); }
Color Names
All modern browsers support the following 140 color names. Check here for a full list.
Hexadecimal Colors
A hexadecimal color is specified with: #RRGGBB.
RR (red), GG (green) and BB (blue) are hexadecimal integers between 00 and FF specifying the intensity of the color.
For example, #0000FF is displayed as blue, because the blue component is set to its highest value (FF) and the others are set to 00.
For more info check here.
RGB Colors
RGB color values are supported in all browsers.
An RGB color value is specified with: rgb(red, green, blue).
Each parameter (red, green, and blue) defines the intensity of the color as an integer between 0 and 255.
For example, rgb(0, 0, 255) is rendered as blue, because the blue parameter is set to its highest value (255) and the others are set to 0.
For more info check here.
HSL Colors
HSL color values are supported in IE9+, Firefox, Chrome, Safari, and in Opera 10+.
HSL stands for hue, saturation, and lightness.
HSL color values are specified with: hsl (hue, saturation, lightness).
For more info check here.
Here a link for a very helpful hsl color generator
Web Safe Colors
Many years ago, when computers supported maximum 256 different colors, a list of 216 "Web Safe Colors" was suggested as a Web standard.
This is not important now, since most computers can display millions of different colors.
This 216 hex values cross-browser color palette was created to ensure that all computers would display the colors correctly when running a 256 color palette.
16 Million Different Colors
The combination of Red, Green and Blue values from 0 to 255 gives a total of more than 16 million different colors to play with (256 x 256 x 256).
Most modern monitors are capable of displaying at least 16384 different colors.
Color Transparency/Opacity
CSS3 introduced color transparency. You can add transparency to RGB and HSL color values.
CSS code:.example-rule3 { background-color: rgba(255,69,0,0.50); }
/* HSLA */
.example-rule4 { background-color: hsla(15,100%,50%,0.50); }
"a" stands for alpha channel which specifies the opacity for a color. Both of the above colors show at 50% opacity in a browser.
Color Gradients
CSS3 also offers to apply color gradients. Below CSS examples of gradients combined with transparencies. Here the same hsl color is used for a gradient of 100% opacity to 0% opacity
CSS code:background: linear-gradient(to top, hsla(30,100%,60%,1) 0%, hsla(30,100%,60%,0) 100%);
background: linear-gradient(to right, hsla(30,100%,60%,1) 0%, hsla(30,100%,60%,0) 100%);
background: linear-gradient(to left, hsla(30,100%,60%,1) 0%, hsla(30,100%,60%,0) 100%);
background: linear-gradient(to top right, hsla(30,100%,60%,1) 0%, hsla(30,100%,60%,0) 100%);
background: linear-gradient(to bottom right, hsla(30,100%,60%,1) 0%, hsla(30,100%,60%,0) 100%);
background: linear-gradient(to bottom left, hsla(30,100%,60%,1) 0%, hsla(30,100%,60%,0) 100%);
background: linear-gradient(to top left, hsla(30,100%,60%,1) 0%, hsla(30,100%,60%,0) 100%);
See the Pen Gradients by Oliver Roeger (@uic-des) on CodePen.
Check out this CSS Gradient Generator. Once you selected/adjusted the gradient you can simply copy and paste the code into your own css.
Color Gradients in Text
See the Pen text gradient by Oliver Roeger (@uic-des) on CodePen.