Selecting the right color scheme is crucial for your website's success. This guide provides tips and resources to help you choose the perfect palette.
What is the color scheme
The color scheme in CSS refers to the set of colors used in a web design. It includes the primary color, secondary colors, and accent colors used for emphasis. Color schemes can be defined using color names, hexadecimal codes, RGB values, or HSL values. They are important for creating a cohesive and visually appealing design, and there are pre-defined color schemes available in CSS frameworks to make the process easier.
Types of color schemes
There are several types of color schemes that can be used in CSS, including:
Monochromatic
Monochromatic color schemes use variations of a single hue. This creates a cohesive and harmonious look.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="./style.css">
<title>Document</title>
</head>
<body>
<h1>MONOCHROMATIC COLOR SCHEME</h1>
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
<div class="box4">4</div>
</body>
</html>Style.css
body {
background-color: #F0F6FC; /*light blue-gray background*/
font-family: monospace;
margin: 0px 400px;
}
div{
font-weight: 600;
padding: 10px;
text-align: center;
font-size: 18px;
}
.box1 {
background-color: #0077B6; /*dark blue heading*/
}
.box2 {
background-color: #48CAE4; /*light blue paragraph text*/
}
.box3 {
background-color: #90E0EF; /*medium blue link*/
}
.box4{
background-color: #b7f4ff;
}Output
Analogous
An analogous color scheme uses colors that are next to each other on the color wheel. This creates a harmonious and natural look.
Example 1: Shades of Blue
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="./style.css">
<title>Document</title>
</head>
<body>
<h1>ANALOGOUS COLOR SCHEME</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pretium, justo et faucibus aliquam, quam felis condimentum nunc, a bibendum lectus mi sit amet velit. Duis dapibus tellus vel tellus consectetur lobortis. Sed auctor vehicula lorem, nec sodales odio lacinia in.</p>
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
<div class="box4">4</div>
</body>
</html>Style.css
body {
background-color: #5e7d9a;
color: #fff;
font-family: Arial, sans-serif;
margin: 0;
padding: 30px;
}
h1 {
background-color: #6f96b7;
color: #fff;
font-size: 2.5em;
margin: 0;
padding: 20px;
text-align: center;
}
div {
background-color: #819ebd;
color: #fff;
font-size: 1.2em;
margin: 0;
padding: 20px;
text-align: justify;
}Output
Example 2: Shades of Green
Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="./style.css">
<title>Document</title>
</head>
<body>
<h1>ANALOGOUS COLOR SCHEME</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pretium, justo et faucibus aliquam, quam felis condimentum nunc, a bibendum lectus mi sit amet velit. Duis dapibus tellus vel tellus consectetur lobortis. Sed auctor vehicula lorem, nec sodales odio lacinia in.</p>
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
<div class="box4">4</div>
</body>
</html>Style.css
body {
background-color: #6e8d67;
color: #fff;
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
}
h1 {
background-color: #7fa177;
color: #fff;
font-size: 2.5em;
margin: 0;
padding: 20px;
text-align: center;
}
div {
background-color: #91b487;
color: #fff;
font-size: 1.2em;
margin: 0;
padding: 20px;
text-align: justify;
}Output
Complementary
A complementary color scheme uses colors that are opposite each other on the color wheel. This creates a strong contrast and can be very eye-catching. For example, red and green or blue and orange.
Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="./style.css">
<title>Document</title>
</head>
<body>
<h1>COMPLEMENTARY COLOR SCHEME</h1>
<div class="container">
<h2 class="blue">Blue and Orange</h2>
<p class="para1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pretium, justo et faucibus aliquam, quam felis condimentum nunc, a bibendum lectus mi sit amet velit. Duis dapibus tellus vel tellus consectetur lobortis. Sed auctor vehicula lorem, nec sodales odio lacinia in.</p>
</div>
<div class="container1">
<h2 class="green">Green and Red</h2>
<p class="para2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pretium, justo et faucibus aliquam, quam felis condimentum nunc, a bibendum lectus mi sit amet velit. Duis dapibus tellus vel tellus consectetur lobortis. Sed auctor vehicula lorem, nec sodales odio lacinia in.</p>
</div>
<div class="container2">
<h2 class="purple">Purple and Yellow</h2>
<p class="para3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pretium, justo et faucibus aliquam, quam felis condimentum nunc, a bibendum lectus mi sit amet velit. Duis dapibus tellus vel tellus consectetur lobortis. Sed auctor vehicula lorem, nec sodales odio lacinia in.</p>
</div>
</body>
</html>Style.css
body{
font-family: monospace;
}
.container {
background-color: #FFA500;
color: #FFF;
padding: 20px;
}
.container1 {
background-color: #FF0000;
color: #FFF;
padding: 20px;
margin-top: 10px;
}
.container2 {
background-color: #FFFF00;
color: #000;
padding: 20px;
margin-top: 10px;
}
.blue, .para1{
color: #007FFF;
font-size: 18px;
}
.green, .para2{
color: #00FF00;
font-size: 18px;
padding-top: 10px;
}
.purple, .para3{
color: #800080;
font-size: 18px;
}Output
Triadic
A triadic color scheme uses three colors that are evenly spaced around the color wheel. This creates a balanced and dynamic look. This creates a rich and varied look.
Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="./style.css">
<title>Document</title>
</head>
<body>
<h1>TRIADIC COLOR SCHEME</h1>
<div class="container">
<h2>Using shades of red, yellow, and blue</h2>
<div class="triadic-color-scheme">
<div class="red"></div>
<div class="yellow"></div>
<div class="blue"></div>
</div>
</div>
<div class="container1">
<h2>Using shades of purple, green, and orange</h2>
<div class="triadic-color-scheme">
<div class="purple"></div>
<div class="green"></div>
<div class="orange"></div>
</div>
</div>
</body>
</html>Style.css
body{
font-family: monospace;
}
.triadic-color-scheme {
display: flex;
}
.red {
background-color: #ff6347;
width: 100px;
height: 100px;
}
.yellow {
background-color: #ffff99;
width: 100px;
height: 100px;
}
.blue {
background-color: #00bfff;
width: 100px;
height: 100px;
}
.triadic-color-scheme {
display: flex;
gap: 10px;
}
.purple {
background-color: #9370db;
width: 100px;
height: 100px;
}
.green {
background-color: #8fbc8f;
width: 100px;
height: 100px;
}
.orange {
background-color: #ffa500;
width: 100px;
height: 100px;
}Output
Tetradic
A tetradic color scheme uses four colors that are two sets of complementary colors.
Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="./style.css">
<title>Document</title>
</head>
<body>
<h1>TETRADIC COLOR SCHEME</h1>
<div class="container">
<div class="box box1"></div>
<div class="box box2"></div>
<div class="box box3"></div>
<div class="box box4"></div>
</div>
</body>
</html>Style.css
body{
font-family: monospace;
}
.container {
display: flex;
gap: 10px;
margin: 0 auto;
}
.box {
height: 100px;
width: 100px;
}
.box1 {
background-color: #ff6b6b;
}
.box2 {
background-color: #ffa07a;
}
.box3 {
background-color: #f0e68c;
}
.box4 {
background-color: #98fb98;
}Output
How to use a color scheme
Here are some simple steps for using a CSS color scheme:
Choose your colors: Select the colors you want to use for your website. This could be a monochromatic scheme, analogous scheme, complementary scheme, or another type of color scheme that you have chosen.
Create a CSS file: Open a text editor and create a new file with a .css extension. Save the file in the same folder as your HTML file.
Define your colors: Use the CSS color property to define the colors you want to use. For example, to set the background color of a webpage to a specific color, you could use the following CSS.
Example:
body {
background-color: #f2f2f2;
}In this example, the background color is set to a light gray color with the hex code #f2f2f2.
Apply the colors to your HTML: Once you have defined your colors in your CSS file, you can apply them to your HTML elements. To do this, you will need to add a class or ID to the HTML element and reference it in your CSS file.
Example:
Index.html
<div class="header">
<h1>Welcome to my website</h1>
</div>Style.css
.header {
background-color: #ff6666;
color: #fff;
}In this example, the header element has a background color of #ff6666 (a shade of red) and a text color of #fff (white).
Test your color scheme: Preview your website in a web browser to see how your color scheme looks in practice. Make any necessary adjustments to your CSS file to ensure that your colors look great on all devices and screens.
Using tools to generate Color schemes
When it comes to choosing a color scheme for your website or application, there are many tools available to help you generate and refine your choices. Here are some of the most popular tools and how to use them:
Adobe Color: This tool allows you to browse through and create color schemes based on color rules such as monochromatic, complementary, and triad. You can also upload an image and use the tool to generate a color scheme based on the colors in the image.
Color Hunt: Color Hunt is a curated collection of color schemes created by designers. You can browse through the collections, search for specific colors, and download the color codes for use in your CSS.
Paletton: Paletton's color wheel allows you to create a color scheme based on color rules such as monochromatic, complementary, and triad. You can also adjust the hue, saturation, and brightness of each color to fine-tune your choices.
Material Design Palette Generator: This tool allows you to create a color scheme based on Google's Material Design guidelines. You can choose a primary color and the tool will generate a palette of colors based on that choice.
Canva Color Wheel: Canva's color wheel tool allows you to select a base color and then adjust the saturation and brightness to generate complementary colors. You can also choose from pre-made color schemes and adjust them to your liking.
Conclusion
In this article above, we learned about the basics of color schemes, and choosing a CSS color scheme requires careful consideration of your brand, audience, and design goals. I hope you learned something new in this lecture, Thank you 🥳.
21 likes
Add to read list
Comments