0
0
0
Master Color Formats in CSS: A Step by Step Guide image
HTMLCSS
createor-profile-picture
Spurgeon Gnan Prakash Tara
admin

Dec 14, 2024

Master Color Formats in CSS: A Step by Step Guide

CSS For EveryOne
1.Welcome to 'CSS for Everyone' - where you learn all about CSS from Beginning to Advanced
2.Introducing CSS - What is CSS?
3.How to ADD (or) CONNECT our CSS with HTML
4.Mastering CSS Selectors: Your Complete Guide to Targeting HTML Elements for frontend web developers
5.Mastering CSS Combinators: An Efficient way of Selecting HTML Elements for Frontend Web Developers
11.Learn CSS Fonts and visualize your website text like a PRO
12.Everything You need to know about Pseudo Classes in CSS
13.Learn CSS display property and Understand the document flow of elements in HTML
14.Mastering CSS Positioning: A Comprehensive Guide to Layout and Element Placement
15.Mastering CSS Overflow: Understanding the Hidden, Scroll, and Auto Magic!

Hello everyone!

We hope you're all doing great. Welcome to WebDevParadise, where we're excited to have you join us on this journey of learning web development. We encourage you to engage with our content by sharing your thoughts, leaving comments, and connecting with fellow enthusiasts. Your perspective matters, and we’d love to hear from you!

Today, we’ll be diving into color formats in CSS. In this blog post, we’ll explore some of the most widely used CSS color formats, including:

  • Hexadecimal codes
  • RGB
  • RGBA
  • HSL
  • HSLA

Let’s get started!

Contents of this blog post

What are color formats in CSS?

HTML provides 140 named colors, including options like red, green, blue, tomato, and chocolate. While these named colors are useful, they are often not enough for designing visually appealing and unique websites. Relying solely on these raw named colors can make websites appear dull and uninspiring.

To overcome this, CSS supports several color formats that allow us to create millions of unique, eye-catching colors. The most widely used color formats are:

  1. RGB (Red, Green, Blue)
  2. Hexadecimal Codes
  3. HSL (Hue, Saturation, Lightness)

Using these formats, we can craft vibrant and diverse color palettes for our web designs.

Before diving deeper into these color formats, let’s take a quick look at the starter code files.

Starter Code for this blog post

To get started, create a folder named colors on your machine. Inside this folder, create the following two files:

  1. An empty CSS file named styles.css.
  2. An HTML file named index.html, and paste the following code into it:
html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CSS Color Formats</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <section>
      <div class="color color-name">
        <h3>Colors by their REAL NAMES</h3>
      </div>
      <div class="color color-rgb">
        <h3>Colors by their RGB(Red,Green,Blue) values</h3>
      </div>
      <div class="color color-rgba">
        <h3>Colors by their RGB(Red,Green,Blue) values and transperancy</h3>
      </div>
      <div class="color color-hex">
        <h3>Colors by their hex code values</h3>
      </div>
      <div class="color color-hsl">
        <h3>Colors by their HSL(Hue,Saturation,Lightness) values</h3>
      </div>
      <div class="color color-hsla">
        <h3>
          Colors by their HSL(Hue,Saturation,Lightness) values and transperancy
        </h3>
      </div>
    </section>
  </body>
</html>

1 
2 
3 
4 
5 
6 
7 
8 
9 
10 
11 
12 
13 
14 
15 
16 
17 
18 
19 
20 
21 
22 
23 
24 
25 
26 
27 
28 
29 
30 
31 
32 
33

Now paste below starter CSS into your styles.css.

css
.color {
  box-sizing: border-box;
  margin: 0.5rem 0;
  padding: 5px;
  border: 2px solid black;
  width: 100%;
  height: 68px;
}

.color h3 {
  text-align: center;
}

.color-name {
  background-color: teal;
  color: white;
}

1 
2 
3 
4 
5 
6 
7 
8 
9 
10 
11 
12 
13 
14 
15 
16 
17

In the HTML file above, we included boilerplate HTML code along with six div tags, each containing an <h3> tag. If you're unfamiliar with any part of the HTML code, consider exploring resources like W3Schools or MDN Docs to strengthen your understanding, as HTML is not the primary focus of this series.

In the CSS file, we added some starter styles for alignment and spacing of the div elements. Additionally, styles were added for the div with the class .color-name. You might already recognize the color names being used since we've referenced them in prior examples. If you're unsure about any of the CSS code, check out these helpful guides:

Save the files and reload the browser.

CSS Color Formats Starter Code Preview

With that, we're ready to dive in. Let's begin with the RGB color format.

RGB color format

The name RGB is an acronym for Red, Green, Blue. Your screen (whether a mobile or laptop) consists of millions of tiny red, green, and blue LEDs (lights) arranged into pixels. The RGB color format allows us to directly control the brightness of these lights.

In CSS, the rgb() function is used to define colors. It takes three values representing red, green, and blue, each ranging between 0 and 255. The syntax for rgb() is as follows:

css
element {
    color: rgb(0,0,0);
    background-color: rgb(255,255,255);
}

1 
2 
3 
4

So, rgb(0, 0, 0) represents black, and rgb(255, 255, 255) represents white. By mixing these values, we can generate over 16 million unique colors. Amazing, right?

For example, if we want to create a red color, we can do so by setting the red parameter to its maximum value (255) and the other two parameters (green and blue) to their minimum value (0).

In your CSS file, select the element with the class name .color-rgb and add the following style:

css
.color-rgb {
    background-color: rgb(255, 0, 0);
}

1 
2 
3

Now Save the file and reload the browser.

RGB Color format with RED Color

As you can see the background color red applied successfully.

If you want a green color, follow the same principle. Set the green parameter to its maximum value (255) and the other two parameters (red and blue) to their minimum value (0).

Let’s try that now. In your CSS file, add the following style to the element with the class name .color-rgb:

css
.color-rgb {
  background-color: rgb(255, 0, 0);
  background-color: rgb(0, 255, 0);
}

1 
2 
3 
4

Now save the file and reload the browser.

RGB Color format with color Green

As you can see, the background color green was applied successfully.

If you want the color blue, you can achieve it by setting the blue parameter to its maximum value (255) and the red and green parameters to their minimum value (0). You get the idea.

In general, by mixing red and green, we can create a yellowish color. Let’s try that. Select the element with the class .color-rgb and add the following styles:

css
.color-rgb {
  background-color: rgb(255, 0, 0);
  background-color: rgb(0, 255, 0);
  background-color: rgb(122, 122, 0);
}

1 
2 
3 
4 
5

Now save the file and reload the browser.

RGB Color format with Yellowish Color

As you can see, by mixing red and green, we achieved a yellowish background color. By combining values like this, we can create millions of unique colors.

Let’s practice further. Let’s create a teal color by mixing green and blue as shown below.

css
.color-rgb {
  background-color: rgb(255, 0, 0);
  background-color: rgb(0, 255, 0);
  background-color: rgb(122, 122, 0);
  background-color: rgb(0, 128, 128);
}

1 
2 
3 
4 
5 
6

Now save the file and reload the browser.

RGB color format with teal color

As you can see, we successfully applied the teal background color. If you're wondering why teal was applied but not yellow, green, or red, try reading about CSS Specificity to understand how CSS rules work.

You might be asking, "How did I achieve that color? How did I know that teal comes with 128 green and 128 blue?" Here's the answer: I researched color mixtures and found that combining green and blue at a value of 128 each produces teal. I experimented with different values until I found the perfect match. This process can be intimidating at first, but with practice, you'll get the hang of it!

As developers, we may not always know exactly what color mixture will produce a particular color. Designers usually know color theory, but as developers, we rely on tools like ColorZilla to help us. Once you install this Chrome extension, it provides a color palette that you can tweak. It will give you the RGB values, which you can copy and use in your CSS code.

ColorZilla usage for RGB

RGBA with Alpha

rgba() is another function in CSS, similar to rgb(), but it accepts a fourth argument called alpha. This alpha value controls the transparency of the color. The alpha value ranges from 0.0 (completely transparent) to 1.0 (completely opaque). The higher the value, the less transparent the color will be.

Let's practice using the rgba() function. Select the element with the class name .color-rgba and apply the following styles to apply a teal color with 50% transparency:

css
.color-rgba {
    background-color: rgba(0, 128, 128, 0.5);
    color: white;
}

1 
2 
3 
4

Now save the file and reload the browser.

RGBA with Alpha

As you can see, we achieved a 50% transparent teal background, allowing the white background to show through.

Hexadecimal Codes

A hexadecimal code is a 6-digit code, similar to RGB, that represents Red, Green, and Blue. Here's how it works:

  1. The first two digits represent the red color.
  2. The next two digits represent the green color.
  3. The last two digits represent the blue color.

Hexadecimal uses 16 digits as its base, from 0 to F. The range for each color is from 00 to FF, which corresponds to 0 to 255 in decimal.

Hex Codes Representation

As you can see, hexadecimal numbers range from 0 to F. In CSS, hexadecimal values can be used as follows:

css
element {
  /* for black */
  color: #000000;
  /* for white background */
  color: #ffffff;
}

1 
2 
3 
4 
5 
6

In hexadecimal, 00 represents 0 and FF represents 255. Therefore, we can represent the RGB values of rgb(255,255,255) for white as #FFFFFF, and for black rgb(0,0,0) as #000000.

In CSS, if a hexadecimal code contains repeated digits, like #FFFFFF, it can be written in a shorthand format as #FFF (where each F represents two FF).

Here are a few examples:

  1. Red: rgb(255, 0, 0) → #FF0000
  2. Green: rgb(0, 255, 0) → #00FF00
  3. Blue: rgb(0, 0, 255) → #0000FF

Now, let's use these hexadecimal color codes in our app. In your CSS file, select the element with the class name .color-hex and apply the following styles:

css
.color-hex {
  /* The hexa decimal value for 128 is 80 */
  /* so for rgb(0, 128, 128) => #008080 */
  background-color: #008080;
  color: white;
}

1 
2 
3 
4 
5 
6

Now, save the file and reload the browser.

Hex Code Color Format for Teal Color in CSS

As you can see, the hexadecimal value for 128 is 80, so for the teal color (rgb(0, 128, 128)), we used #008080. The teal background is applied successfully.

As a developer, if you're having trouble selecting colors, you can use tools like ColorZilla, ColorHunt, or Coolors to find color palettes and hex codes for your next web app.

HSL Color Format

HSL stands for Hue, Saturation, Lightness, and is another way to define colors in CSS. Unlike rgb() and hex, hsl() is based on the rainbow colors (VIBGYOR), and it allows for more intuitive color adjustments. You can create millions of colors with HSL.

The HSL color wheel is as follows:

HSL Color Format Color Wheel

HSL consists of three components:

  1. Hue: Represents the color itself, based on the color wheel, and is defined in degrees (0°-360°). For example:

    • 0° = Red
    • 120° = Green
    • 240° = Blue Hue is essentially the base color you want to use.

  2. Saturation: Defines the intensity or purity of the color and is represented in percentage (0%-100%).

    • 0% = No color (greyscale)
    • 100% = Full intensity color

  3. Lightness: Represents the brightness of the color and is also represented as a percentage.

    • 0% = Black
    • 100% = White
    • 50% = The default natural color

In CSS, HSL is used as follows:

css
element {
  /* color red(0deg) */
  /* Saturation - 100%(Full Intensity) */
  /* Lightness - 50% (Natural Lightness) */
  color: hsl(0deg, 100%, 50%);
}

1 
2 
3 
4 
5 
6

markdown Copy code You can use the following HSL values:

  • For red color => hsl(0deg, 100%, 50%)
  • For green color => hsl(120deg, 100%, 50%)
  • For blue color => hsl(240deg, 100%, 50%)

Now, let's practice using HSL in our application. Let's try adding a teal color. To create teal, we need:

  1. Hue: 180° (Select it from the HSL color wheel above)
  2. Saturation: 100% (Full intensity)
  3. Lightness: 25%

In your CSS file, select the element with the class color-hue and add the following styles:

css
.color-hsl {
  background-color: hsl(180deg, 100%, 25%);
  color: white;
}

1 
2 
3 
4

Now, save the file and reload the browser.

HSL Color format in CSS

As you can see, the teal background color was applied successfully.

HSLA with Alpha

Just like rgba(), there is also hsla(), which takes a fourth argument for alpha, representing transparency. The alpha value ranges from 0.0 (fully transparent) to 1.0 (fully opaque). Let's use it in our app.

In your CSS file, select the element with the class name .color-hsla and add the following styles to it with 50% transparency:

css
.color-hsla {
  background-color: hsl(180, 100%, 25%, 0.5);
  color: white;
}

1 
2 
3 
4

Now, Save the file and reload the browser.

HSLA Color Format in CSS

As you can see, transperency of 50% is added successfully and we can see white background behind teal background.

Final Code Files

html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CSS Color Formats</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div class="color color-name">
      <h3>Colors by their REAL NAMES</h3>
    </div>
    <div class="color color-rgb">
      <h3>Colors by their RGB(Red,Green,Blue) values</h3>
    </div>
    <div class="color color-rgba">
      <h3>Colors by their RGB(Red,Green,Blue) values and transperancy</h3>
    </div>
    <div class="color color-hex">
      <h3>Colors by their hex code values</h3>
    </div>
    <div class="color color-hsl">
      <h3>Colors by their HSL(Hue,Saturation,Lightness) values</h3>
    </div>
    <div class="color color-hsla">
      <h3>
        Colors by their HSL(Hue,Saturation,Lightness) values and transperancy
      </h3>
    </div>
  </body>
</html>

1 
2 
3 
4 
5 
6 
7 
8 
9 
10 
11 
12 
13 
14 
15 
16 
17 
18 
19 
20 
21 
22 
23 
24 
25 
26 
27 
28 
29 
30 
31 
css
.color {
  box-sizing: border-box;
  margin: 0.5rem 0;
  padding: 5px;
  border: 2px solid black;
  width: 100%;
  height: 68px;
}

.color h3 {
  text-align: center;
}

.color-name {
  background-color: teal;
  color: white;
}

.color-rgb {
  background-color: rgb(255, 0, 0);
  background-color: rgb(0, 255, 0);
  background-color: rgb(122, 122, 0);
  background-color: rgb(0, 128, 128);
  color: white;
}

.color-rgba {
  background-color: rgba(0, 128, 128, 0.5);
  color: white;
}

.color-hex {
  /* The hexa decimal value for 128 is 80 */
  /* so for rgb(0, 128, 128) => #008080 */
  background-color: #008080;
  color: white;
}

.color-hsl {
  background-color: hsl(180deg, 100%, 25%);
  color: white;
}

.color-hsla {
  background-color: hsl(180, 100%, 25%, 0.5);
  color: white;
}

1 
2 
3 
4 
5 
6 
7 
8 
9 
10 
11 
12 
13 
14 
15 
16 
17 
18 
19 
20 
21 
22 
23 
24 
25 
26 
27 
28 
29 
30 
31 
32 
33 
34 
35 
36 
37 
38 
39 
40 
41 
42 
43 
44 
45 
46 
47

Conclusion

In this blog post, we explored the most commonly used color formats in CSS. I recommend using hex codes, rgb, or hsl, along with their alpha values for better flexibility and control over transparency.

If you're a beginner or a developer struggling to choose the right colors, I highly recommend using tools like ColorZilla, ColorHunt, or Coolors (as mentioned above). Many professional developers rely on these tools. Avoid overusing named colors, as they can make your web app look monotonous and less user-friendly.

That’s all for this post! I hope you found it helpful. Feel free to share your thoughts in the comments, and don't forget to like and share with your friends. Goodbye and peace! 😊

Please signin to view resources

Comments

Follow Us:

Related Posts

View All
Welcome to 'CSS for Everyone' - where you learn all about CSS from Beginning to Advanced

Welcome to 'CSS for Everyone' - where you learn all about CSS from Beginning to Advanced

Welcome, Learn essential CSS concepts and stay up-to-date with the latest trends and techniques in web design. Join us to enhance your CSS skills today.

Read more
Introducing CSS - What is CSS?

Introducing CSS - What is CSS?

Introduction to CSS. What is CSS and How to use it to design your web layouts and components to become a better frontend developer.

Read more
How to ADD (or) CONNECT our CSS with HTML

How to ADD (or) CONNECT our CSS with HTML

Discover how to connect CSS with HTML using inline, internal, and external stylesheets. This beginner-friendly guide covers methods and examples to style in css

Read more
Mastering CSS Selectors: Your Complete Guide to Targeting HTML Elements for frontend web developers

Mastering CSS Selectors: Your Complete Guide to Targeting HTML Elements for frontend web developers

Mastering CSS Selectors: Guide for Targeting HTML Elements using HTML Element Selector, ID Selector, Class Selector , Attribute Selector, Universal Selector

Read more
Mastering CSS Combinators: An Efficient way of Selecting HTML Elements for Frontend Web Developers

Mastering CSS Combinators: An Efficient way of Selecting HTML Elements for Frontend Web Developers

CSS Combinators: Selectors, Descendant Combinations, Child Combinations, Sibling Combinations, and More

Read more