Colors in CSS
Last updated
Last updated
In CSS, there are many ways to define colors. We'll look at 4 popular ways to do so in this section.
There is a long list of colors that are known to all browsers by name, and these colors can be directly assigned as color values for properties like color (color of the text) or background-color. Of course there are the more "common" colors like red, orange, black, white or green, but there are also many variations and shades like coral, cornflowerblue, limegreen and whitesmoke. The full list of these colors can be found , and there are nearly 150 of them.
To understand this, we need to understand how colors are represented.
A color on the screen is actually a combination of 3 main colors: red, green and blue. Combining different "strengths" or "intensities" of these colors leads to a different color that is rendered on screen. The lower the intensity, the darker the shade of the color and the less prominent it is.
The intensity is a decimal integer that ranges from 0 to 255 (and no higher or lower). This is then converted into (a number system with 16 digits: 0 to 9, then a-f for 10-15 respectively) which reduces it to two digits.
The 3 intensities are then combined into one 6-digit hexadecimal value, which is used to represent the color. The red intensity comes first, followed by green, then lastly blue.
When assigning hexadecimal code colors as color values, a # symbol is prefixed before the 6-digit hex value. Note that again quotation marks need to be omitted.
Format of color: #rrggbb
If you want pure red, then you max out the red value and minimize the green and blue. This means that the red value is 255 and the green and blue are both 0. Since 255 in decimal is ff in hex, the color code for pure red becomes #ff0000
The same can be done for pure blue and pure green.
In HTML, if all the values (red, green and blue) are maxed out, then you get the color white: #ffffff
On the other hand, removing all color leaves black: #000000
More generally, if the intensities of red, green and blue are equal to each other you end up with a shade of grey. The lower the intensities, the darker the shade.
Here are some more examples:
Yellow is max red, max green, no blue: #ffff00
Orange is max red, little less green, no blue: #ffa500
Violet is medium red, no green and max blue: #7f00ff
Coming back to CSS color values, you can assign the 6-digit hexadecimal value to a property the same way to assign a color by name. For example: color: #7f00ff; (violet, as above).
The end of the page will show another way to pick a color from a page using the Eyedropper.
While hex codes provide a lot of flexibilty and control over the precise shade of color that you want to use, they are rather unintuitive. CSS provides the rgb function, which takes in 3 arguments and returns a color value. The arguments are integers from 0 to 255 and are the red, green and blue values (left to right). They are slightly easier to use than the direct hex codes, and are supported by all browsers.
To represent the color violet as above, I would write: color: rgb(127, 0, 255);
Again, there are color pickers online that can be used to find the RGB values for particular colors and color palettes.
This performs like the rgb function but it takes an additional argument. This argument is a decimal number between 0 and 1 inclusive, and indicates the opacity of the color. 1 means the color is fully opaque and 0 means the color is fully transparent.
Usage: color: rgba(127, 0, 255, 0.6);
Firefox has a tool called the Eyedropper that, when active, can pick out the exact html color code of anything present on a webpage. To use this, open up the Browser Inspector and find the dropper icon at the top right corner of the html window (see below).
Alternatively, you can customize the Firefox toolbar to add the Dev Tools menu with the Eyedropper.
Now click on the icon and you'll have the Eyedropper active. It takes control of your cursor and shows you the exact hexadecimal color code of the pixel your cursor is on. If you click while it is active, it copies the color code to your clipboard and deactivates (returning your cursor to normal). To deactivate it without copying the color code, press the esc key.
Here's how it works (note that I have customized my toolbar to have the Eyedropper and Developer tools accessible from there without using the keyboard shortcut):
Later we'll see use the color picker to choose a suitable background color for our html document.
Next, we'll see how measurements in CSS work and what valid measurement values can be assigned to elements.
There are online HTML color pickers, and some IDEs (like Visual Studio Code) provide ways to visualise a color using its hex code while you write CSS, so there is no need to memorize color codes. Additionally, if there is a font color or some such color on a website that you like, you can use the to select the element and read its styling rules to see what its color code is.
Here's a .
