Using Color in CSS: in-depth guide to CSS color codes
CSS is an essential web development tool that transforms HTML documents from their text-only form to colorful webpages. CSS is how we add color and style to websites.
Using color in CSS is actually rather easy. It involves some knowledge of tags and color codes. Today, we’ll introduce you to CSS and show you how to use the various color formats in CSS.
Today, we will learn:
- Quick CSS Refresher
- CSS color syntax and tags
- Using Hex color codes
- Using RGB color codes
- Using HSL color values
- Using gradients in CSS
- What to learn next
Learn how to build beautiful websites
This curated learning path teaches you how to use HTML, CSS, and JavaScript.
Quick CSS Refresher#
CSS stands for Cascading Style Sheets. It is used to style the content of web pages. You can use CSS to set font style, text color, and sizing/spacing properties of your HTML content.
We do this by setting rules. A CSS rule is composed of a selector and property-value paired within a declaration block. A declaration block is the section of code between the curly braces.
p {
font-size: 16px;
// this sets the font-size property of matching paragraphs to 16px
}
What would the web look like without CSS?#
CSS is what makes websites look fun and functional. By applying appropriate styles, you can give text in your webpage proper meaning using visual hierarchy or improved navigation.
As an example, compare the following screenshots of the Educative Blog homepage with CSS loaded and without CSS loaded.
You can see how with the right combination of colors, fonts and spacing:
- Focus is given to important elements on the page
- Page legibility is improved
- Reader knows how navigate the page
Now that we’re refreshed on some basics, let’s turn to colors in CSS. Read on as explore how to add colors to a webpage using CSS.
CSS color syntax and tags#
CSS can be added to a webpage or HTML document using one of the following three methods:
Inline#
This is done by adding valid CSS to the style attribute of HTML tags. Multiple rules can be set by simply separating property-value pairs with a semicolon.
<h1 style='color: red; font-style: bold'> A bold red header.</h1>
Embedded#
Embedded stylesheets are stylesheets placed within the head tag of an HTML document using the <style> tag. Using this method, styles will only apply within the document they are defined in.
<html>
<head>
<style>
div {
background-color: blue;
}
h1 {
color: #fff000
}
</style>
</head>
<body>
<!-- document code goes here -->
</body>
</html>
Color can be applied to elements in an HTML documents by setting the values of the following properties depending on the element and the context. The color property specifies the color of text. For example, adding color to an element’s background or border.
background-colorborder-colorcoloroutline-color
In CSS, colors are specified using predefined color names, or RGB, HEX, HSL, RGBA, HSLA values. Each of these implements color slightly differently and have different uses. Let’s see how the built-in color names work with an example before we explore the other methods.
Note: CSS supports 140 standard color names.
Using Hex color codes#
Hex color codes are the most common method of adding color to your HTML document. Most designers and developers use Hex colors in web design. Hex colors are expressed as a six-digit combination of numbers and letters that represent its mix of red, green, and blue.
Think of this as a shorthand for RGB values that has been converted for simplify.
For example, Educative’s logo uses the Hex code #5553FF.
So, if we wanted to add that color to the <head> of out HTML document, our code would look like:
<head>
<style>
body { color: #5553FF; }
</style>
</head>
Or, we could add the Hex code to our CSS stylesheet.
body { color: #5553FF; }
We can also add the alpha value, which changes the opacity, and it is optional. All computed color values without an alpha value will be fully opaque by default.
Say we want our text to be semi-transparent. We can add two more numbers to our hexadecimal value, for example:
h1 {color: #0080FF; // cornflower blue}h1 {color: #0080FF80; // transparent blue}
Keep the learning going.#
Learn CSS and web development without scrubbing through videos or documentation. Educative’s text-based courses are easy to skim and feature live coding environments, making learning quick and efficient.
Using RGB color codes#
RGB stands for Red, Green and Blue. It is a color system that denotes a color by its combination of these three. RGB codes are essentially three separate numbers. For example, the Educative logo in RGB is 85, 83, 255.
Note: You can convert between Hex and RGB easily using a converter.
In CSS, we use RGB colors by wrapping them in parentheses and using the prefix rgb.
body { color: rgb(255, 0, 0); }
Similar to Hex codes, you can also make these colors opaque with the alpha value by adding an a to the rgb() prefix. This then enables a scale of transparency from 0 to 1.
body { color: rgba(255, 0, 0, 0.5); }
Using HSL color values#
HSL, which stands for Hue Saturation Lightness, is an alternative representation of the RGB color model. In CSS, the hsl() function is responsible for setting HSL Hue is measured in degrees from 0º to 360º. Saturation and Lightness are on a scale 0% – 100%.
For example, Educative’s logo in HSL is
241, 67%, 66%.
HSL is implemented just like RGB but with the prefix hsl.
body { color: hsl(0, 100%, 50%); }
HSL also supports alpha values in the same way RGB does, using the hsla() function.
h1 {
color: hsl(0, 100%, 50%);
background-color: hsla(0,100%,50%,0.13);
}
Using gradients in CSS#
So far we have covered applying solid colors to elements. We can also apply gradients (a transition between two or more colors) to webpages by using any one of the following functions:
linear-gradient()#
div {
background-image: linear-gradient(direction, stop1, stop2);
}
direction specifies the gradient direction. For example, to right, or a specific angle. stop1 and stop2 represent the color stops.
Note: There can be more than two color stops, but you need at least two colors to create a gradient.
radial-gradient()#
div {
background-image: radial-gradient(position, stop1, stop2);
}
position specifies the centre of the gradient, which is at 50% on the horizontal and vertical axes by default.
conic-gradient()#
div {
background-image: conic-gradient(position, stop1, stop2);
}
The conic-gradient() consists of a color transition that is rotated around a center point.
What to learn next#
You should now have a good idea of how to implement color into your HTML documents or CSS stylesheets. The variation that you choose to use depends on your field, preference, or company. There is still more to learn to really get ahead with CSS.
Next, you should read about:
- CSS preprocessors (SASS)
- CSS positions
- CSS animations
- and more
To get started with these concepts, check out Educative’s curated learning path Become a Front End Developer. This is the perfect place to start your journey as a front-end developer. You will gain a mastery of HTML, CSS, and JavaScript. The skills you gain in this path will give you a valuable leg up on your journey.
Happy learning!
Continue reading about CSS#
Free Resources
