How to Choose the Right CSS Color Values in Web Design

manoj
manoj , Credit to  volkotech-solutions Mar 20
color values banner image

Understanding color values is essential for creating visually appealing designs. Learn the basics of color codes, color spaces, and their usage here.

What is a color value

Color value refers to the lightness or darkness of a color, usually measured on a scale from 0 (black) to 255 (white) in digital imaging. In the RGB (Red, Green, Blue) color model, which displays colors on computer monitors and other electronic devices, each color channel can have a value ranging from 0 to 255, resulting in over 16 million possible colors.

Properties of css colors

CSS (Cascading Style Sheets) colors have several properties that define their appearance, including.

The most commonly used css color properties:

Property Syntax Examples Before apply After apply
color color: <color name | color values>; 
h1 {
  color: blue;
}
 color before apply image color After apply image
background-color background-color: <color values | color name> 
body {
 background-color: #34eb7d;
 color: #fa3939;
}
 bgcolor before color image bg-color after apply color image
border-color border: 1px solid <color name | color values> 
button {
  border: 5px solid red;
  border-radius: 5px;
}
 border-color before apply image border-color after apply image
outline-color outline: 5px solid <color name | color values> 
input:focus {
  outline: 2px solid blue;
}
 outline color before apply image outline color after apply image
text-shadow text-shadow: 2px 2px <color values | color name> 
h1 {
  text-shadow: 2px 2px #FF0000;
}
 text shadow before apply image text shadow after apply image

Built-in Color Name

Built-in color names are predefined color values in HTML and CSS that you can use to specify the color of text, backgrounds, borders, and other elements. These names are easy to remember and provide a convenient way to set the color of your web pages without having to remember the specific RGB or hexadecimal values.

Here is a cheat sheet for some most commonly used built-in color names in CSS along with their Hexadecimal code and RGB values:

 Color Name RGB Value HEX Code Color Result
Black rgb(0, 0, 0) #000000

black image
White rgb(255, 255, 255) #FFFFFF

white image
Purple rgb(128, 0, 128) #800080

purple image
Orange rgb(255, 165, 0) #FFA500

orange image
Gray rgb(128, 128, 128) #808080

gray image
Brown rgb(165, 42, 42) #A52A2A

brown image
Gold rgb(255, 215, 0) #FFD700

gold image
Silver rgb(192, 192, 192) #C0C0C0

silver image
yellow rgb(255, 255, 0) #FFFF00

yellow image
Red rgb(255, 0, 0) #FF0000

red image
Green rgb(0, 128, 0) #008000

green image
Blue rgb(0, 0, 255) #0000FF

blue image

Types of CSS color values

There are main types of CSS color values

Keyword colors:

These are pre-defined color names that can be used directly in CSS. For example, the keyword "red" will display the color red. Some other examples of keyword colors include "blue", "green", "yellow", and "white".

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="./style.css">
    <title>Document</title>
</head>
<body>
    <div class="container">
        <div class="box red">RED</div>
        <div class="box blue">BLUE</div>
        <div class="box orange">ORANGE</div>
        <div class="box green">GREEN</div>
        <div class="box yellow">YELLOW</div>
        <div class="box pink">PINK</div>
    </div>
</body>
</html>

style.css

​
.container{
    display: grid;
    grid-template-columns: repeat(3, 200px);
    justify-content: center;
    border: 2px solid black;
    padding: 2rem;
    gap: 10px;
    width: 35vw;
}

.box{
    width: 200px;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 5px 5px 12px #555, 5px 5px 12px rgb(235 235 235 / 16%);
    border-radius: 10px;
}

.red{
    background-color: red;
}

.blue{
    background-color: blue;
}

.orange{
    background-color: orange;
}

.green{
    background-color: green;
}

.yellow{
    background-color: yellow;
}

.pink{
    background-color: pink;
}

Output

Keyword colors image

Hexadecimal colors:

These are expressed as a six-digit code that represents a color's red, green, and blue (RGB) values. Each digit in the code is a hexadecimal value ranging from 0 to F, with 0 being the lowest value and F being the highest. 

For example, the hexadecimal code for the color red is #FF0000, where FF represents the highest possible value for red and 00 represents the lowest possible value for green and blue.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="./style.css">
    <title>Document</title>
</head>
<body>
    <h1>Hexadecimal colors</h1>
    <div class="container">
        <div class="box red">1</div>
        <div class="box blue">2</div>
        <div class="box orange">3</div>
        <div class="box green">4</div>
        <div class="box yellow">5</div>
        <div class="box pink">6</div>
    </div>
</body>
</html>

style.css

body{
    font-family: monospace;
}

.container{
    display: grid;
    grid-template-columns: repeat(3, 200px);
    justify-content: center;
    border: 2px solid #000;
    padding: 2rem;
    gap: 10px;
    width: 35vw;
}

.box{
    width: 200px;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 5px 5px 12px #555, 5px 5px 12px rgb(235 235 235 / 16%);
    border-radius: 10px;
    font-weight: 600;
    font-size: 18px;
}

.red{
    background-color: #4090f7;
}

.blue{
    background-color: #62f740;
}

.orange{
    background-color: #f7ae40;
}

.green{
    background-color: #40f7b7;
}

.yellow{
    background-color: #a240f7;
}

.pink{
    background-color: #f7409f;
}

Output

Hexadecimal color image

RGB/RGBA colors:

These are expressed as a combination of three or four values representing the red, green, and blue (RGB) values of a color. RGB colors use three values, while RGBA colors use four values with an additional alpha value that represents opacity.

The values are expressed as numbers between 0 and 255 or percentages between 0% and 100%. For example, the RGB value for the color red is rgb(255, 0, 0), while the RGBA value with 50% opacity would be rgba(255, 0, 0, 0.5).

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="./style.css">
    <title>Document</title>
</head>
<body>
    <h1>RGB and RGBA colors</h1>
    <h2>RGB Color</h2>
    <div class="container">
        <div class="box red">1</div>
        <div class="box blue">2</div>
        <div class="box orange">3</div>
        <div class="box green">4</div>
        <div class="box yellow">5</div>
        <div class="box pink">6</div>
    </div>

    <h2>RGBA Color</h2>
    <div class="container">
        <div class="box red1">1</div>
        <div class="box blue1">2</div>
        <div class="box orange1">3</div>
        <div class="box green1">4</div>
        <div class="box yellow1">5</div>
        <div class="box pink1">6</div>
    </div>
</body>
</html>

style.css

body{
    font-family: monospace;
}

.container{
    display: grid;
    grid-template-columns: repeat(3, 200px);
    justify-content: center;
    border: 2px solid #000;
    padding: 2rem;
    gap: 10px;
    width: 35vw;
}

.box{
    width: 200px;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 5px 5px 12px #555, 5px 5px 12px rgb(235 235 235 / 16%);
    border-radius: 10px;
}

/* RGB COLORS */

.red{
    background-color: rgb(223, 101, 101);
}

.blue{
    background-color: rgb(138, 138, 255);
}

.orange{
    background-color: rgb(110, 72, 0);
}

.green{
    background-color: rgb(68, 194, 68);
}

.yellow{
    background-color: rgb(55, 214, 214);
}

.pink{
    background-color: rgb(219, 59, 211);
}

/* RGBA COLORS */

.red1{
    background-color: rgba(223, 101, 101, 0.315);
}

.blue1{
    background-color: rgba(138, 138, 255, 0.329);
}

.orange1{
    background-color: rgba(110, 71, 0, 0.322);
}

.green1{
    background-color: rgba(68, 194, 68, 0.322);
}

.yellow1{
    background-color: rgba(55, 214, 214, 0.315);
}

.pink1{
    background-color: rgba(219, 59, 211, 0.363);
}

Output

rgb and rgba color image

HSL values:

HSL (Hue, Saturation, Lightness) values represent a color by its hue (0-360 degrees), saturation (0-100%), and lightness (0-100%). For example, hsl(0, 100%, 50%) represents pure red color.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="./style.css">
    <title>Document</title>
</head>
<body>
    <h1>HSL color</h1>
    <div class="container">
        <div class="box red">1</div>
        <div class="box blue">2</div>
        <div class="box orange">3</div>
        <div class="box green">4</div>
        <div class="box yellow">5</div>
        <div class="box pink">6</div>
    </div>
</body>
</html>

style.css

body{
    font-family: monospace;
}

.container{
    display: grid;
    grid-template-columns: repeat(3, 200px);
    justify-content: center;
    border: 2px solid #000;
    padding: 2rem;
    gap: 10px;
    width: 35vw;
}

.box{
    width: 200px;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 5px 5px 12px #555, 5px 5px 12px rgb(235 235 235 / 16%);
    border-radius: 10px;
}

.red{
    background-color: hsl(0, 43%, 49%);
}

.blue{
    background-color: hsl(137, 50%, 47%);
}

.orange{
    background-color: hsl(220, 100%, 50%);
}

.green{
    background-color: hsl(59, 100%, 50%);
}

.yellow{
    background-color: hsl(290, 76%, 72%);
}

.pink{
    background-color: hsl(238, 53%, 58%);
}

Output

hsl color image

HSLA values:

HSLA (Hue, Saturation, Lightness, Alpha) values are similar to HSL values, but they also include an alpha channel that specifies the opacity of the color. The alpha value ranges from 0 to 1. For example, hsla(0, 100%, 50%, 0.5) represents a half-transparent red color.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="./style.css">
    <title>Document</title>
</head>
<body>
    <h1>HSLA Color</h1>
    <div class="container">
        <div class="box red1">1</div>
        <div class="box blue1">2</div>
        <div class="box orange1">3</div>
        <div class="box green1">4</div>
        <div class="box yellow1">5</div>
        <div class="box pink1">6</div>
    </div>
</body>
</html>

style.css

body{
    font-family: monospace;
}

.container{
    display: grid;
    grid-template-columns: repeat(3, 200px);
    justify-content: center;
    border: 2px solid #000;
    padding: 2rem;
    gap: 10px;
    width: 35vw;
}

.box{
    width: 200px;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 5px 5px 12px #555, 5px 5px 12px rgb(235 235 235 / 16%);
    border-radius: 10px;
}

.red1{
    background-color: hsla(0, 43%, 49%, 0.397);
}

.blue1{
    background-color: hsla(137, 50%, 47%, 0.411);
}

.orange1{
    background-color: hsla(220, 100%, 50%, 0.39);
}

.green1{
    background-color: hsla(59, 100%, 50%, 0.384);
}

.yellow1{
    background-color: hsla(290, 76%, 72%, 0.411);
}

.pink1{
    background-color: hsla(238, 53%, 58%, 0.411);
}

Output

hsla color image

How to use color values

  • Choose the element you want to style using CSS.
  • Identify the color value you want to use. This could be a specific color code (e.g.#FF0000 for red) or a predefined color name (e.g. red).
  • Use the CSS property "color" or "background-color" (depending on whether you want to change the text color or the background color) followed by a colon (:).
  • Enter the color value after the colon.
  • Save the CSS file and refresh the webpage to see the changes.

For example, to change the background color of a webpage to red, you would use the following CSS code:

style.css

body {
    background-color: red;
}

Conclusion

In this article CSS color values can be expressed in several ways, including named colors, hexadecimal values, RGB values, HSL values, and RGBA and HSLA values with alpha transparency, I hope you guys learnt something new here. Thank you.

Related Posts

like21 likes BookmarkAdd to read list

Share

share your add link

copy-icon

Share in social

  • Facebook-icon
  • Twitter-icon
  • Telegram-icon
  • Linkedin-icon
  • Whatsapp-icon
Close-icon

Comments

Authors

Read Next