In this article, you will learn about the 60-30-10 colour rule, how it's used, and see a practical example of it.

What is the 60-30-10 rule?

In the design world, the 60-30-10 rule is a rule that helps to guide designers on choosing and pairing colours for their designs.

To put it simply, this rule says that the dominant/primary colour should take up 60% of your design, the secondary colour should take up 30%, while an accent colour should take up 10% of your design.

Why is This Rule so Important?

• Emphasizing Key Elements: The 60-30-10 rule is great at emphasizing key elements in your design. The dominant colour draws attention to large surfaces and establishes the overall mood of the design. The secondary colour supports it, while the accent colour at 10% highlights specific features or parts of the design.
• Visual Balance: To achieve visual balance in a design, one colour/element should not overpower the others. The 60-30-10 rule ensures that there is a sense of equilibrium and balance, by allocating percentages to each colour.
• Simplicity and Consistency: Having 3 established colours simplifies the design process. It narrows down your choices and prevents overwhelming combinations of colours.

How to Choose Colours for Your Designs

The 60-30-10 rule has three components:

• The Primary Colour: This is the dominant colour of the design. It forms the foundation of the colour scheme and covers the majority of the design (60%). The primary colour is typically a neutral colour and is often used as the background of the design. Colours like white, blue, beige, and so on can be used as primary colours.
• The Secondary Colour: This colour supports the dominant colour and adds more visual interest to the design. It covers about 30% of the design. The secondary colour can be used for typography, icons, and subheadings/subtitles in a design. Colours like teal, black, dark blue, and others can be used as secondary colours.
• The Accent Colour: This colour usually covers about 10% of the design. It helps highlights specific sections of the design like buttons, call-to-action elements, or any element that needs emphasis in a design. Accent colours are usually colours that have high contrast. Colours like yellow, orange, light green, and others make good accent colours.

Illustration of the 60-30-10 rule

It's important to choose colours that complement each other for your designs. This will contribute to the overall aesthetics and create a dynamic and engaging visual experience.

If you are worried about what colours to use while designing, you can always check out free colour palette generators. Some colour palette generators you try out include:

• Coolors.co
• Color Space
• Adobe Color

Example Hero Page Using the 60-30-10 Rule

I designed an hero page to give an illustration of how the rule works.

Step 1- Choosing a Frame

I had to choose what desktop frame I wanted to use for the hero page. I chose Macbook Air.

Macbook Air Desktop frame

Step 2- Adding a Grid

Next, I added a grid to the frame. I used these specifications: Columns-12, Margin-100.

Adding the Grid

Step 3- Adding Content

Next up, I added the logo and the navigation bar.

Adding the logo and nav bar

I already knew how I wanted the structure of my hero page to look like, so I just added the rest of my design content.

My Completed Hero Page Illustrating the 60-30-10 Rule.

For the design above:

• My primary colour is white. It covers the background of the design. It enhances readability and legibility of other elements in the design. Also, I chose white because it's a neutral colour, as I mentioned earlier.
• My secondary colour is a saturated black. It supports the primary colour, and is used for text and typography.
• My accent colour is a shade of brown. It adds some pop, and provides some contrast in the design.

Conclusion

The 60-30-10 rule is used in different design sectors because of how useful it is to designers. Also, it is not a strict requirement and can be adjusted to suit individual preferences and design goals.

By following the 60-30-10 rule, you can achieve a well-balanced color scheme that ensures visual interest and coherence in your design. Basically, just choose:

• Your primary colour – a neutral colour,
• Your secondary colour – a colour that supports the primary colour, and
• Your accent colour – a colour that pops!

Whatever colours you decide to use for your design depend on the design objectives and the overall aesthetic you want to achieve. Remember that mastery of colours come with adequate practice. So make sure to practice more and you will see a lot of improvement in your usage of colours.

To set a background color for a div or related element in CSS, you use the background-color property.

While setting this background color, your creativity is your limit as to how far you want to go.

So in this article, I'm going to show you how you can set this background color.

How to Set Background Color with Named Colors

With named colors, you can set the background color by bringing in the background-color property and assigning it a value expressed in a color name like red, green, blue, and so on.

 div {
      background: green;
    }

You can use the following styles to make the web page look better. Just set a width and height for the div, so the background-color can take effect:

body {
   display: flex;
   align-items: center;
   justify-content: center;
   height: 100vh;
   background-color: #d3d3d3;
 }

div {
   background: green;
 }

Modern browsers recognize around 147 colors, so you're still limited a little.

How to Set Background Color with Hexadecimal Colors

With Hexadecimal values, you can set a background color for a div or any other element with a total of 6 characters.

Hex colors start with the hash sign (#), any number from 0 to 9, and finally any letter from A to F.

The first 2 values stand for red, the next two stand for green, and the last 2 represent blue.

With hex values, you can dive deep into the color wheel and even use colors no one has ever used.

div {
   background: #2ecc71;
 }

You can read more about hex colors here.

How to Set Background Color with RGB Colors

RGB stands for Red Green, and Blue.

To set the background color with RGB, you specify the amount of red, green, and blue you want with numbers between 0 and 255.

div {
      background: rgb(220, 20, 60);
    }

RGB also has a variation called RGBA. The last A means alpha and it lets you determine how opaque you want the color to be.

The alpha takes a value from 0.0 to 1.0. 0.0 means 0% opacity, 0.5 means 50% opacity, and 1.0 means 100% opacity.

div {
    background: rgb(220, 20, 60, 0.6);
 }

You can read more about RGB colors here.

How to Set Background Color with HSL Colors

HSL stands for Hue, Saturation, and Lightness. It is the most dynamic within the ways you can specify a background color for a div or other elements.

• Hue represents the color wheel in 360°. 0° is red, 120° is green and 240° is blue
• Saturation is the amount of gray in the color expressed in percentages. 0% is the shade of gray and 100% is the color itself.
• As the name implies, lightness is the amount of darkness and lightness in the color expressed as a percentage. 0% is black and 100% is white.

  div {
   background: hsl(16, 100%, 50%);
  }
  

  

Conclusion

Since you can apply colors in 4 different ways, you must be wondering which one you should use.

When you use named colors, you're kind of limited in how far you can go in applying different shades of colors.

Each color like red, green, blue, yellow, or any other color has a lot of variations you won't get access to with named colors.

You can only access about 147 predefined colors recognized by browsers. Hexadecimal colors, on the other hand, are very dynamic. They are mostly used among developers, and creativity is the limit. These hex colors allow you to use different shades of the same color.

RGB colors are as dynamic as hexadecimal colors. You can specify the amount of red, green, and blue from 0 to 255, and you can also use the added alpha value to specify the transparency of the color.

HSL is the most dynamic of all of them. You can specify exactly the color from 0 to 360 degrees in the color wheel, set the saturation and darkness as a percentage, and set the opacity to any value between 0.0 and 1.0.

So deciding which to use between named, hex, RGB and HSL colors depends on you and how creative you want to be and what your project's needs are.

Thank you for reading.

At times, they can even make or break a project.

Having a color palette comprised of different shades and hues of a specific color can be really helpful. It helps you visualize how you can combine the colors you want to add to your designs to create a harmonious effect.

This article briefly goes over how to add colors in HTML and shows a table with different hues of the color gray.

If you're interested in only viewing the table with the different shades of gray,here is the link to that.

How to write colors in HTML

HTML (or HyperText Markup Language) lets you add different content to a page and create structure.

The headings, paragraphs, images, and links you see on a webpage are all HTML code.

All HTML code is written in its own file. That file has an .html extension.

When you want to style the content you added with HTML, you use CSS (or Cascading Style Sheets).

It is best practice to keep the content and the styles separate, and write HTML and CSS code in different files. This is what is called separation of concerns.

So, you'll add your CSS code in a file with the .css extension.

To change the color of text, or the foreground color of elements, you use the color property.

When you want to change the background color of an element, you use the background-color property.

Hex Codes

There are a few different options you can choose from to add the color you want.

Some of those are either using the color name, the HEX code or the RGB value that corresponds to a specific color.

HEX codes are alphanumeric characters.

A hexadecimal digit can be one of 16 possible values, ranging from 0 - 9 and a - f.

The codes are preceded by a #, like for example: #ffffff, which is the color white.

RGB Colors

The RGB color values are among the most popular and widely used color models.

Each color is a combination of Red, Green, and Blue, with each color ranging from 0 (the lowest) to 255 (the highest).

The general syntax looks something like this: rgb(red, green, blue), like this example: rgb(0, 0, 255).

Because the numbers for the Red and Green places are 0 (meaning there is no color there), and the highest number is the the Blue place, it means that the color is pure Blue.

Here is an example using all three to change paragraph text to have a red color.

All three rules will have the exact same result visually:

/* using the color name */
p {
color: red;
}

/* using the HEX code for red */
p {
color:    #FF0000;
}

/* using the RGB value for red */
p {
color: rgb(255,0,0);
}

You can learn more about HEX codes here and RGB colors here.

The gray color palette

Below is a table with a wide spectrum of some of the shades of gray recognized in HTML, ranging from darkest to lighest, with their respective HEX codes and RGB values.

Look through and choose any of the colors to use in your next web design project.

Conclusion

I hope you found this article helpful and found some inspiration for your next design project.

If you're interested in learning more about CSS and front-end web development, check out freeCodeCamp's responsive web design certification. In it, you'll build 5 projects for your portfolio while learning web development fundamentals.

Thanks for reading and happy coding!

How to Set Text Color in HTML

In CSS, the background-color property is pretty straightforward for setting the background color of anything.

So what if you want to set the foreground color of something on the page? Especially text, which under normal conditions you wouldn't want to set a background color for.

There's no foreground-color property in CSS, so what makes this possible is the color property.

In this article, I will walk you through how to set the color of text using the color property. We'll also look at the various ways it takes values.

The color property takes values in 4 different ways: named color, hexadecimal color, RGB color, and HSL color. Let's look at each one now.

Named Colors

As the name implies, you bring in the color property and apply the value by naming the color you want. This may be red, green, blue, orange, crimson, cyan, or any other named color. There are around 147 named colors recognized by browsers.

The basic syntax looks like this:

element {
    color: colorName
}

<p>freeCodeCamp</p>

 p {
     color: crimson;
}

Hexadecimal Colors (or just Hex Colors)

Hex values are used to represent colors with a total of 6 characters. They start with the pound/number sign (#), then any number from 0 to 9, and finally any letter from A to F.

The first 2 values stand for red, the next two stand for green, and the last 2 represent blue. With hex values, there's no limit to the shades of colors you can use.

<p>freeCodeCamp</p>

 p {
    color: #dc143c;
 }

RGB Colors

RGB stands for red, green, and blue. With RGB colosr, you specify the color in terms of how much red, green, and blue you want. All three are expressed with numbers between 0 and 255.

There is a type of RGB called rgba. The extra ‘a’ stands for alpha, which lets you specify the opacity of the color. It takes a value from 0.0 to 1.0 – 0.0 means 0% opacity, 0.5 means 50% opacity, and 1.0 means 100% opacity.

The basic syntax is rgba(amountOfRed, amountOfGreen, amountOfBlue, alpha).

You can limit it to rgba(amountOfRed, amountOfGreen, amountOfBlue) if you don't want an alpha value.

Here's the syntax for the regular RGB values:

<p>freeCodeCamp</p>

 p {
   color: rgb(220, 20, 60);
 }

And here it is demonstrating the alpha value in action with 50% (0.5) opacity:

p {
    color: rgb(219, 20, 60, 0.5);
}

HSL Colors

HSL stands for hue, saturation, and lightness. It is another way of specifying color for text (and anything else that takes color) in CSS.

• Hue represents the color wheel in 360°. So, 0° is red, 120° is green and 240° is blue.
• Saturation is the amount of gray in the color, expressed as a percentage. 0% is the shade of gray and 100% is the color itself.
• Lightness is the amount of darkness and lightness in the color expressed as a percentage. 0% is black and 100% is white.

Just like the RGB colors, you can also set the opacity of the color. So, there's also hsla.

The full basic syntax is hsl(colorDegree, saturationPercentage, lightnessPercentage, alpha). You can limit it to hsl(colorDegree, saturationPercentage, lightnessPercentage) in case you don't want an alpha value.

<p>freeCodeCamp</p>

 p {
   color: hsl(348, 83%, 47%);
 }

You can apply a particular opacity to the hsl color like this:

 p {
   color: hsla(348, 83%, 47%, 0.5);
  }

Should You Use Named Colors, Hex Colors, RGB Colors, or HSL Colors to Assign Colors?

One of the wonderful things about CSS is that there are multiple ways of doing the same thing. You've seen this by applying colors to text.

Since you can apply colors in 4 different ways, you must be wondering which is the best to use.

When you use named colors, you're kind of limited in how far you can go in applying different shades of colors. Red, green, blue, yellow, or any other named color has a lot of variations you won't get access to with named colors. You'll only have access to around 147 predefined colors recognized by browsers.

Hexadecimal colors are very dynamic. They are the most commonly used among developers because your limit is your creativity. With hex colors, you can use various shades and even use a color no one has ever used.

RGB colors are as dynamic as hex colors. Apart from being able to specify how much red, green, and blue you want from 0 to 255, you can also set how transparent you want the color to be with the extra alpha value.

HSL is the most dynamic of all. You get to specify the exact color you want in degrees from 0 to 360 within the color wheel, set how saturated and dark you want it to be in percentages, and also set an opacity from 0.0 to 1.0.

So really, it's up to you and your use case – and just how creative or specific you want to get.

Conclusion

Applying colors to text helps make your website more attractive to visitors. The right color combo can also help your content become more readable too.

In this article, you have learned how to apply colors to text with the 4 different kinds of values you can use with the color property.

Thank you for reading, and keep coding.

In this article I'll show you how you can change the background color of a page in a few different ways.

How to Change the Background Color of an HTML Element

You can change the background color of an HTML element using the background-color CSS property and giving it a value of a color.

p {
  background-color: pink;
}

For example, this code will make all paragraph elements in your HTML file have a pink background because the background-color property has a value of pink.

There are about 140 color names that you can use, like teal, hotpink, indigo and many others.

A few of the possible color names you can use

Note: if you give a background-color to an element and don't see it change, it can be a syntax error, or it can also be that the element does not have a width or height. Try to put some content in it, or give it a width and an height using the CSS properties width and height.

There are actually almost 16.8 million colors that you can use. You can use all these colors using RGB values. There are also HSL colors where you have about 3.7 million colors to choose from. In the next section you will learn about all these different ways of creating colors.

Different Color Notations

The background-color property accepts colors as possible values. Here you will see four different notations for color values.

The first will be color names, and there are around 140 keywords that you can use. This is the easiest way to choose a color as it doesn't require understanding special notations – but it has a limited range of options.

The second and third ways to name or choose colors are RGB values and hexadecimal values. In these notations, colors are identified by the amount of red, green, and blue that they contain.

This comes from how a screen produces color. A screen is made of pixels, and each pixel is lighted by LEDs of three different colors, green, blue and red, that can shine at different intensities.

The fourth notation is HSL colors, or Hue-Saturation-Lightness. This notation comes from Graphic Design, as it reflects a more natural way for humans to think about color: a pure color (hue), of which saturation and lightness can be varied.

You can use any of these color notations to give a color to the background, but let's see them in more details, so you can choose the one you prefer.

HTML Color Names

There are 16 basic colors recognised in the first version of HTML. Now there are 140+ named colors you can use.

The 16 basic colors

body {
  background-color: black;
}

An example of an HTML page with the body being given a background-color of black

You can see all the named colors in the appendix at the end of the article.

RGB Colors

RGB stands for Red-Green-Blue. The colors in this format are written rgb(0,0,0), where each value is a number between 0 and 255 representing the amount of red, green, and blue used to make each color, respectively.

For example, if you have rgb(0,0,0) you get black.

To get red, you write rgb(255,0,0), where there is as much red as possible with 255, 0 for blue, and 0 for green.

You can get other variations of red with small amounts of green and/or blue, and a bit less red. For example you can get an orange red with rgb(255,69,0) or a dark red with rgb(139,0,0).

The colors of the rgb values presented above.

div {
  background-color: rgb(139,0,0);
}

An example of an HTML page with the div element being given a background-color of rgb(139,0,0)

Below an example of how the color changes when you adjust two of the RGB values: the top left corner of the colored square is equal to rgb(0,0,0), the top right is equal to rgb(0,0,255), the bottom left corner to rgb(0,255,0) and the bottom right corner to rgb(0,255,255).

Fortunately, you don't need to guess the numbers to get the color you want. You can find various color pickers online that let you choose the color with sliders (or other methods) and give you the RGB color value you want to use.

Hexadecimal Colors

Hexadecimal colors are a different way to write RGB colors. With hexadecimals you also have three numbers, one for each color, with 256 possible values.

In this case, though, each color has two digits that go from 0 to F (that is, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, and A, B, C, D, E, F). One single digit has 16 possible values, and two digits have 256 possible values, from 00, to FF (255).

Hexadecimal colors are written with a # in front of the value. Red is written as #FF0000, dark red as #8B0000, and orange red as #FF4500, for example.

The colors mentioned in the section above.

h1 {
  background-color: #FF4500;
}

An example of an HTML page with the h1 element being given a background-color of #FF4500

You can also use color pickers to generate hexadecimal values.

Hexadecimal shorthand

You can write hexadecimal numbers in shorthand form, using only three digits instead of six. For example, you can write red like #F00. This reduces the number of possible colors to just above 4,000, but it is shorter to write, and sometimes that is what is important.

Each digit is in place of two identical digits, so we can't write #8B0000 in shorthand form, as 8 and B are not identical. But we can write #800 which is equal to #880000, pretty similar to the other dark red. And orange red can be #F40 (equal to #FF4400).

The colors mentioned in the section above.

HSL Colors

HSL means Hue-Saturation-Lightness, and it is a completely different way of writing colors than what we have seen so far.

HSL colors are represented with three numbers: the hue goes from 0 to 360, and saturation and lightness from 0 to 100.

The hue determines the base color, and its value is an angle, a degree on the color wheel. In this case, red is 0, green is 120, blue is 240, and 360 is again red.

All possible colors changing only the hue, with hue of 0 to the left and hue of 360 on the right.

Saturation goes from 0, which makes the color gray, to 100, which shows the full color.

Variation of saturation for red, 0% on the left, 100% on the right.

Lightness is the amount of black or white added to the color. 0 is black, 50 is the color itself, and 100 is white.

Variation of lightness, with 0% on the left, and 100% on the right.

For example, you'd write red as hsl(0,100%,50%), orange red as hsl(16,100%,50%), and dark red as hsl(0,100%,27%).

It can be easier to find similar colors using HSL than with the other color schemes. With red and its variations you have seen that to get a darker red you can just change the lightness percentage, and mixing red with an other color is enough to change its hue value a bit.

Let's see it in action with a mixed color in hexadecimal, like orange (#FFA500 or rgb(255,166,0)), written in HSL as hsl(39,100%,50%). You can get a lighter orange just by increasing the lightness.

So for example you can write hsl(39,100%,65%) to get this lighter orange. With the other notations you would have needed to write rgb(255,193,77) or #FFC14D.

An example of an HTML page with the main element being given a background-color of hsl(39, 100%, 65%)

You can also find color pickers online for HSL colors.

Property name short-hand

You can also set the background color using the short-hand background property.

p {
  background: pink;
}

body {
  background: black;
}

div {
  background: rgb(139,0,0);
}

h1 {
  background: #FF4500;
}

main {
  background: hsl(39,100%,65%);
}

An example of an HTML page with all the elements being given a background color.

This is a more versatile property, as it is shorthand for various background properties, like background-image and background-position. When you use it with a color value it works exactly the same as background-color.

Conclusion

You have learned how to give a background color to your HTML elements using the background-color property and its shorthand background, and using different color notations.

Now you have all the tools you need to add whatever colors you want to your web pages. Enjoy!

Appendix

All 140+ named colors

Spelling Variations

The color names containing the word "Gray" can also be written with the spelling "Grey" as shown below.

Different colors create a different feel for your designs. The right choice of colors can make your designs and creations look clean, aesthetically pleasing, and modern. But the wrong colors can make a project look garish, hard on the eyes, and can be difficult for users to interact with.

The color of the border (border), the background (background-color), or of the foreground (color) – the text and text decorations on the page – have a huge impact, so you should put in some effort to get them right.

Image from Unsplash

CSS lets you use of a wide variety of different colors and color systems. They range from named colors, to hex colors, rgb() colors, hsl colors and more.

How to Use Colors in HTML

The easiest way to apply color to your HTML elements is to write your HTML in a .html file. Then in that file you just link your .css stylesheet with all the colors and styles you specify.

This makes your code easier to read and sepates concerns, which is considered a best practise.

We can have a file, about.html, with some HTML code like this:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- link to our css styles -->
    <link rel="stylesheet" href="style.css">
    <title>About Me</title>
</head>
<body>
     <section class="intro">
     <h2>About Me</h2>
     </section>
</body>
</html>

Then in our style.css we can add the following:

.intro {
 /* changes color of  background */
  background-color: rgb(232, 206, 191);
  max-width: 620px;
  height: 100px;
  padding: 5px;
  margin: 70px auto;
}

h2 {
/* changes color of text   */
  color: rgb(79, 72, 70);
  text-align:center;
}

These styles look something like this when we load them in the browser:

In this example, we used rgb color values to change the colors on the page.

This article primarily covers the rgb() color model. It makes some comparisons with named colors and hex colors, weighing the pros and cons of each, and discusses some differences and similarities between these different color systems.

What are Named Colors in CSS?

Named colors are English words, known as keyword colors. And they're pretty straightforward to use.

In your CSS file, you declare the property you want to target and alter. You then use one of the set and specified color names.

h2 {
    color: cyan;
    }

The code above will make every h2 element in your HTML have a text color value of cyan.

There are approximately 140 named colors that modern browsers support. So your choices are relatively limited and there is not much variety available.

With named colors, we are not able to harness the true power of CSS. So let's look at some other options.

Numerically Named Color Systems

In this case, colors are described with a number system. This allows you to make the most of the whole spectrum of colors available.

Most computer screens use a mix of red, green, and blue colors combined together.

Both hex colors and rgb() colors use a combination of red, green, and blue to create different hues. They work in the same way – the only differences are the numeric systems they use and their syntax.

So let's look at each system in a bit more depth.

What are Hexadecimal Colors in CSS?

Computers count in the hexadecimal counting system compared to we humans who use the decimal counting system.

This system is comprised of alphanumeric values which include these characters : 0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f.

A hex color starts with a # to denote that it is indeed a hex color and is then followed by 6 of the characters mentioned above.

These numbers and letters represent the amount of red, green, and blue in the color.

Converting the keyword color, cyan, from earlier to it's equivalent hex color value would be:

h2 {
    #00ffff;
    }

The first pair (00) represents the amount of red. The next pair (ff) represents the amount of green. And the last one (ff) represents the amount of blue.

The minimum value hex colors can use is 00 which is fully off, and the maxiumum value is ff which is fully on.

The color white in hex is #FFFFFF or FFF for its shorthand notation and the color black is #000000 or #000.

What is The RGB Color Model?

Generally, hex colors and rgb colors are identical – they just use a different numeric system and syntax (but the colors are exactly the same).

It really just comes down to personal preference which one you choose to use.

RGB is an acronym that stands for Red Green Blue.

Instead of using six hexadecimal characters like we did for the hex color values, with RGB each parameter pair defines the intensity and brightness of each color (red, green, and blue), with an integer number ranging from 0-255 or a percantage ranging from (0% - 100%).

It expresses colors in terms of the amount of red, green, and blue they are made up of and uses a human counting system in comparisson to hex colors that speak computer language.

The number is a code to represent how dark or bright the color is.

The minimum value of 0 represents that none of the color is being shown, so it is at its darkest. On the other hand, the maximum value of 255 represents that the full amount of color and the full intensity is on display.

RGB Color Syntax

The general look of an rgb declaration is rgb(red,green,blue);

RGB has the following syntax:

• the keyword rgb followed by a set of parentheses ()
• three numeric decimal values sepated by commas inside the parentheses (which represent the three colors),
• and finally it ends with a semicolon.

Make sure you don't leave any spaces between anything.

Taking again the cyan example, the equivalent rgb code is:

h2 {
    color:  rgb(0,255,255);
    }

The color red is not showing whereas green and blue are at their brightest and at their max.

• White is rgb(255,255,255)
• Black is rgb(0,0,0)
• Red is rgb(255,0,0)
• Green is rgb(0,255,0)
• Blue is rgb(0,0,255)

Lots of Options with RGB

With RGB, each value is mixed in with the rest and together they create a wide range of hues. You can even create new color combinations, making it the designer's dream.

In the rgb color system, there are three values you can use, and each value can be one of 256 possible values.

That makes for 256 256 256 = 16,777,216 color options in total to choose from!

RGB Opacity

By default all rgb colors are fully opaque.

We have the ability to make colors more transparent by changing the opacity with the rgba() selector.

The rgb part stays the same, but the fourth value, a ,stands for alpha.

We can give a a number that is either 0 or 1 to describe how opaque we want our color to be. 0 is totally see-through and trasnparent and 1 is totally opaque.

We'll use the cyan example again, but this time we'll make it have half opacity.

h2 {
    color:  rgba(0,255,255,0.5);
    }

In CSS there is also the opacity selector.

We'll use the previous HTML and add the opacity selector to our section element with a class .intro in our CSS:

.intro {
    background-color: rgb(232, 206, 191);
    max-width: 620px;
    height: 100px;
    padding: 5px;
    margin: 70px auto;
    opacity: 0.3;
    }

Notice that this makes the whole tag transparent, including the background, the heading, the heading's backgorund – everything.

The power of rgba() is that it allows us to make just the background see-through, for example, or we can make just the heading transparent. It will not affect the whole tag and all the content inside it.

Now if we remove the line from above and we update the background-color selector to background-color: rgb(232, 206, 191,0.3);, we see that it doesn't affect the heading:

Conclusion

I hope this has given you a good overview of the RGB color model, its syntax, and how it works. We also briefly compared it to other color models in CSS.

I hope you found this of value and thank you for reading.

Happy coding!

No matter what kind of coding project you are undertaking, chances are that at some point you’re going to start working with colors. This is particularly true if – as many people do – you learn to code using HTML to design web pages.

When you first start out designing in color, you’ll likely be using some kind of graphical interface to choose the colors you want to use before you apply them to the various elements in your page.

As you grow more confident in using HTML, though, and as you start to look at the code itself rather than just your graphical editor, you will notice that the colors you pick are denoted by some strange looking codes such as #ff0000.

These codes are called Hex color codes, and they are a fundamental part of the way that both HTML and CSS work. Learning how they function will not only save you a lot of time, it will also make your code faster, more elegant, and more reliable.

In this guide, we’ll take you through everything you need to know about hex color codes, and show you how to use them in your own project.

What Does Hexadecimal Mean?

First, let’s look at the “hex” part of the term “hex color code”. Hex, in this context, stands for “hexadecimal”, a number system in which there are 16 basic numerals, rather than the more familiar 10.

This is the number system used by HTML, and many other programming languages for that matter, and so it is the way in which colors are recorded in the language.

Hexadecimal, as the name suggests, is a way of encoding a base 16 number system. Decimal, our regular number system you're already familiar with, is base 10. Hexadecimal uses the same numerals as the regular system for the first 10 numbers (so 0 – 9) and then swaps to letters, so the numbers 10 – 15 are encoded using the letters A – F.

As an interesting aside, the primary reason that hexadecimal is used is because it possesses a natural link to the binary system that is used by your computer at a more basic level.

Binary numbers are commonly expressed as a power of 2, and 16 is 2^4. This makes it easy to convert between hexadecimal and binary (though we won’t be doing that today).

You don’t need to know this to use hex color codes, but it might come in handy the next time you want to impress someone.

What Components Make Up a Color?

How do we use the hexadecimal system to encode colors in RGB?

Colors that are displayed on a computer screen are made up of three components, which correspond to the three colors that are present in each pixel of your screen. If you look really, really closely (or you have an ancient screen) you’ll be able to see them – red, green, and blue.

Source

As a consequence, the way that we encode colors is to specify how much light each of the red, green, and blue (RGB) parts of your pixels should give out. So, for instance, an RGB value (a type of value used in many different software systems) might look like this: RGB (255, 0, 0).

255 is the maximum value for a component, and so this value indicates that the first component (red, or R) should be at maximum, and the other two should be at minimum. And that will give us (you’ve guessed it) pure red.

(Incidentally, the reason that 255 is the maximum value is also related to the ease of using this value [or, actually, 256 including 0] in binary. 256 is 2^8. But that’s another factoid you really don’t need to know.)

The observant readers among you will already have spotted that, even at this stage, it’s pretty simple to work with colors in this form. Black, as an RGB value, is RGB (0,0,0), and white is RGB (255,255,255). Green? That’s right, RGB (0,255,0).

How Hex Colors Work

Now that we know how colors work, we can look at a real hex color code. Take, for example, #ff0000, and let’s combine our knowledge from above to work out what it means.

Take a look at your hexadecimal table, and you’ll see that “FF” translates to “255” in standard, base-10 encoding.

Source

This should be a clue. The two first characters of this hex color code (and, in fact, all hex color codes) refer to the red component, and here the value is 255. The second two characters refer to the green component, and the last two to the blue.

From here, you can work out what #ff0000 means when translated to a color – it’s the same as RGB (255,0,0). That is, pure red. Similarly, #ff00ff indicates maximum red and blue simultaneously, which produces magenta:

It’s at this point that you might start to recognize the value and elegance of hex color codes. Because they use hexadecimal, and because 255 is the maximum value for a component, every possible color can be expressed using just 6 digits.

This system also means that there are a huge range of colors available, because each component can take on any value from 0 to 255. Do the math on the number of possible different combinations, and you’ll find that there are 16,777,216 colors available.

How to Use Hex Code Abbreviations

At this point, since you understand hex color codes, you can begin to use them in your web projects instead of using a color picker on your graphical interface.

However, before we get to that, it’s important to realize that these two options are not the only ones open to you.

HTML, because it was designed to be easy to use, also allows you to use abbreviated hex codes. Red, which is #FF0000 in hex code, can be shortened to #F00. That is, one digit for red, one digit for green, one digit for blue. Browsers will interpret #FF0000 and #F00 as exactly the same color.

This reduces the total number of possible colors to around 4,000. However, it has other advantages.

Just as you can use shorthand to optimize CSS delivery, encoding your colors using abbreviations can improve the performance of your web pages. This might not be visible when working with small pages, but can have a significant impact as your projects get more complex.

How to Use Your Own Hex Codes

At this point, you should be ready to start using hex codes instead of the color picker on your web design software. Most web builders will allow you to enter a hex code instead of clicking a color with a mouse, and taking this approach has several key advantages.

Source

One is that it’s easier to keep track of which colors you are using. When designing using a color picker, it’s easy to accidentally use a color that is very close, and therefore all but indistinguishable, from the one you actually want.

This means that before you know it, your pages are in two similar but distinct shades of red. Using a hex code means you’ll get the same color every time.

Secondly, using hex codes allows you a fine level of control over your colors that is not possible with a color picker.

No color picker can contain all 16 million colors available to you when using HTML, but by writing your own color codes you can increment the shades that are available to you one value at a time.

Third, an understanding of the way that colors work on a computer screen is invaluable when it comes to designing web pages, or in fact any piece of software. With just a little insight into the way that your devices interpret code and displays colors, you can begin using hex codes to mix colors, and also ensure that the color you want to display is the one that actually appears on your users’ screens.

Going further

Playing around with hex color codes in HTML might be fun, but it also has a serious objective. Almost all image manipulation software uses the same encoding, and so learning how hex color codes work will add a useful and fundamental skill to your coding knowledge.

Take a look at how JPG works, for instance, and now you’ll already be familiar with some of the terminology. The next time you build a web page, drop the color picker, and code your colors by hand.

We’ve all been there. You’ve been learning the basics of front end Web development, and you are keen to try out some new ideas.

You take the time to code up the perfect HTML page, and add some styles and JavaScript for good measure.

Then you pause. Time to take a moment to step back and see how your efforts look in the browser.

Pretty terrible, right?

That was certainly my experience when I first learned a little front end development.

I’d put a lot of thought into the functionality of the site. But when I put everything together, it looked awful.

I wanted to share my work with a few friends to get feedback. But in its present state, my site wasn’t ready.

You see, functionality is only half the story. We humans for whatever reason are biased towards the appearance or presentation of something.

Perhaps we’re more likely to trust a site that appears professional and well-designed. Or maybe the aesthetic value of a well-designed site can help us overlook minor flaws in functionality.

Whatever the reason, something of a “halo effect” does exist in Web development.

In this article, you’ll learn a few easy tips to make your ugly af front end project look better in no time.

The starting point

Below is an example of a simple HTML page with no styling at all.

This will be the starting point for the rest of the article. Each tip will build on top of the earlier ones until you have a better looking page to work with.

We’ll go in order of impact. That is, we’ll start with the tip that gives you the quickest improvement and make smaller and smaller gains as we go.

Add some negative space

The first tip is easy to picture, but needs to be put into practice carefully.

‘Negative space' refers to the empty space between elements on the page.

Getting the right amount of negative space goes a long way to making your page look better.

Specifically, it does two things:

• It makes the page less cluttered. It is easier to find the different elements, because the negative space helps them stand out from each other.
• It makes better use of the available screen space. Spacing the elements out carefully can help fill parts of the screen that are more central, and reduce content in parts on the edges.

Check the CSS in the example below. This adds some basic negative space to the simple example you saw earlier.

And here is the result:

Notice what has happened here:

• Padding creates space within an element
• Margin creates space between the elements
• Line-size makes text less cluttered

Too much empty space isn’t a good look. It can be tricky to get the balance right.

Pair your fonts

The next tip is another one with a quick impact.

The default system fonts are very safe and sensible. They are guaranteed to work.

But the choice of font makes a huge statement about the purpose and feel of your site.

• Light, playful fonts tell the viewer this page is fun and accessible
• Sensible, simple fonts give a more business-like appearance
• Traditional or display fonts give more of a timeless, classic look.

You get the idea.

But how to put it into practice?

The key is to use font pairs.

The idea is that using two fonts for different elements on the page provides a helpful contrast. Again, this helps make elements stand out and makes your page easier to view.

But you shouldn’t pair up any old fonts.

For a bunch of aesthetic reasons, some font pairings look much better than others.

Don’t worry about figuring this out yourself, though. As usual, there are resources on the Internet to help you.

Check out fontpair.co. It lets you browse different font pairings and see how they look together.

Once you find a pairing you like, the quickest way to use them in your project is to head over to Google Fonts.

• Search for the fonts you want
• Add them to your project
• Include the link in your HTML <head> element
• Reference the fonts in the stylesheet

See below for an example built on top of the basic page you saw earlier.

You can also improve the appearance by controlling the font size and text alignment.

Doesn’t that look considerably better? And after only two easy steps.

Get a colour scheme

I’m no designer, but I appreciate the value of learning the basics of colour theory.

In short, the colours you use on your page go a long way to creating an impression.

For example:

• Bright, exuberant colours create an energetic feel
• Light, toned down shades create a more corporate impression
• Dark, contrasting colours create a more dramatic impression
• Brand colours create a consistent identity

Again, it pays to choose your colours carefully.

The theory goes that the relationship between the colours you use also impacts the appearance of your site.

• Analogous colours can create a consistent, harmonious appearance
• Complementary colours create a pleasing contrast
• Triadic colours provide both contrast and balance

It pays to pick a colour scheme carefully.

Luckily, there are many ways to do this. Just Google "colour scheme generator" and you will be spoiled for choice.

One of my favourite tools is colormind.io. It generates a colour scheme and lets you preview it on a template.

Of course, rules can be broken. Using a more discordant colour scheme can be jarring, but used carefully can give a page an edgier, more stand-out appearance.

See the code below has been updated to use a simple colour scheme.

Add some structure

No matter how well-presented your page is right now, it can be improved by shaking things up a bit.

Adding in sections and structure can break up the monotony of a longer page.

By creating clear bounds between elements, you can create a logical structure and/or hierarchy. This will make it easier for the viewer to understand your page layout.

Keep to the same colour scheme, but vary things up a little.

See the example below has been extended to include more of a structure. The content is divided into <header>, <footer> and <div class="content"> elements.

The example also uses a media query to make the page present better on smaller devices.

If you want to learn more, try looking into:

• CSS Grid for creating a layout
• Flexbox for creating layouts
• Bootstrap for creating responsive designs
• Responsive design with media queries

It didn’t take much rewriting, but the effect is very noticeable.

Add some images and icons

Humans are typically visual creatures. A well placed image or icon can go a long way to making a page easier to view and understand.

The code below adds a simple image to the main content. See how it is included in the <div class="content"> element and the width is set to 100%? This keeps the structure of the page consistent.

Remember, images should be considered in the context of the overall colour scheme.

You don’t need to be a budding CSS artist or Photoshop wizard to do this. If you need access to high quality photos quickly, your can search Unsplash for free-to-use images.

Even a few free icons can make a difference.

The example below adds a simple menu icon to the top right corner. You could also add icons to your Github profile, or other online profiles.

You can quickly add free icons from these resources:

• Fontawesome
• Bootstrap
• Google
• Plenty of others

Add some animations

This final tip is a nice-to-have for sure.

As anyone who used PowerPoint during the 2000s will know, animations need to be used carefully.

Too many animations can be confusing and irritating for users.

But used properly, they can make a page much more interactive and visually appealing.

There are lots of ways to add animations to your site. You can use CSS selectors to change style in response to certain events, such as when the user hovers on that element.

The example below changes the image opacity to 50% when the user hovers over it.

Another option is to use is Animate.css. This provides a number of pre-built animations that you can use straight out-of-the-box.

The code below adds a subtle animation to the buttons when it is clicked.

Remember — with animation, less is usually more!

The final result

See this Github repo for overall evolution of the page.

The design still has a long way to go. But just by following some simple guidelines, it looks much better than it did at the start.

Here’s a quick review of each of the tips:

1. Add some negative space
2. Choose a pair of fonts
3. Pick a coherent colour scheme
4. Add some structure
5. Add a few icons or images
6. (Optionally) add some animation

Leave a response below if you found this quick guide helpful. Do you have any tips or tricks you want to share?

Thanks for reading!

As a developer, choosing colors for my designs has always been one of the more difficult tasks. To help I tend to use tools like Coolors, SASS Color Generator, and this color contrast checker.

My process used to look something like this:

1. Generate a palette using Coolors
2. Pick variants for each color using SASS Color Generator
3. Pair variants together into background/foreground combinations.
4. Check that the pairs are accessible using the color contrast checker.
5. Add my chosen colors to my design tool of choice (Figma).
6. Tweak colors and repeat from step 2.

The old process

So, what was the problem?

My old process involved a lot of back and forth between different applications. I couldn’t tweak my colors and see the impact on accessibility in real time. Instead, I had to copy/paste HEX codes from one app into another. Then when I was ready to start development, I had to manually create the variables in SASS/CSS and copy the values over again.

And the solution?

Create a tool where I could do (almost) everything in one place. My goal was to move towards a process like this:

1. Generate a palette using Coolors
2. Pick variants, pair colors, and make tweaks using a single app.
3. Add the resulting colors to my design tool of choice.

I also wanted the app to be able to export my colors to code so I would have a good starting point for development.

The new process

The initial proof of concept

I wanted to get something up and running as quickly as possible so I could start testing it out. To that end, I set about creating a prototype.

Use Cases

The first step in getting a prototype put together was to define the use cases that would drive it.

1. As a user, I want to generate variants for my base colors.

I wanted to be able to open up the app, add my base colors, pick the variants, and then re-export them back out to my design tool again. Simple ?.

2. As a user, I want to check if a background/foreground color pair is accessible.

From the entered base colors or their variants, I wanted to be able to check if two colors were accessible when paired together.

3. As a user, I should be able to see the impact that changing a base color has on accessibility.

I wanted to be able to get real-time feedback on the color pairs I had picked each time I made tweaks to my base colors.

A (very rough) working version

With the use cases defined, I then set about designing the prototype. I came up with a color palette, designed a limited set of components, and eventually arrived at a solution that had three “modes” or pages, with the user having to switch between them to accomplish their tasks.

Rather than describing it any further, let’s take a look.

My first draft in action

As you can see from the image above, the prototype achieved everything I wanted based on the initial use cases… Sort of.

Click here if you would like to try the prototype for yourself, thanks to the magic of Netlify deploy previews.

The good and bad of the original design

I never intended for the first prototype to be anything other than a stepping stone, and you can see for yourself that it was quite rough and flawed.

For the next version, I started by looking at what I liked about the prototype.

Variant Mode

I was quite happy with how the variant generating part of the prototype turned out. It was quite simple to pick a color and get your list of variants. Also, the tabbed approach worked quite well for adding multiple base colors.

Being able to see changes to accessibility after changing a color

As you can see in the short demo above, there was no need to copy/paste HEX codes between applications. I could now change one of my colors and see how that affected color accessibility really quickly.

Then, I started picking things which I didn’t like and needed to be improved.

Interactions weren’t obvious

Based on arriving at the home page, it wasn’t immediately obvious how you go about picking variants and checking for accessibility. You could probably figure out that you had to click the tiles eventually, but it was really clunky.

The modes were confusing

In the initial designs, you could only add pairs from the palette view, and you could only add/remove variants from the variants view. It all involved a lot of switching between screens and I found myself getting frustrated by how much work the app was making me do. This leads me to my next point.

Too much clicking was needed

You have to click to add a variant. Then you have to click to move to the palette view. Then you have to click multiple times to create a pair. Then you have to click some more to see the pair you just added. As I mentioned above, the whole thing was quite clunky and this was probably the worst part of the prototype and something I knew I needed to change.

Not enough information was visible on the screen at once

The more I used it, the more I started to dislike the “modes” concept I created. I think I was influenced by the original process that inspired the application and I designed the screens in silos rather than designing a unified experience. After using the prototype I decided that I needed to migrate away from the “modes” concept to something that ideally could all be done on a single page.

A second attempt

I took the lessons I had learned from the prototype and set about creating a better version of the app.

In order to reduce the number of interactions required, reduce the ambiguity in the interactions, and to increase the amount of information available to the user at once, I decided to move to a drag and drop based UI where the user would be able to drag tiles around to add to their palette or create accessibility checks.

The drag target would always display and this would avoid the need to switch between screens.

Let’s take a look at what I came up with.

The current version

You can access the current version of the application here.

Next steps

The application is still very much in its infancy and although the second version is much closer to the idea I had in mind, there are still improvements that can be made.

Import from code

As well as exporting the palette I plan to add the ability to read the initial base colors from code containing variables (SASS, and CSS variables to start with)

Export to more formats

Currently, you can only export SASS. I plan to add support for CSS Variables, and other formats in the future.

Integrate with design tools

Exporting to code is great, but it would be even better if I could export the palette and then import it as a layer or shared style in a design tool such as Figma or Sketch.

Refine the UI

Let’s face it, it’s not the best looking application in the world. I plan to tweak the UI components to improve the app visually.

Feedback and bug reporting

This one speaks for itself. I can only improve the app with input from those who use it. To do that, I plan to add a feedback form in the future.

Feedback

Speaking of feedback… I wrote this article for two reasons. The first being to walk you through the process I went through to arrive at the current design in the hopes that you can learn from it.

The second reason is that I wanted to showcase the tool to the development and design community as I believe it can be useful for many people, and also to gather feedback on it in its current state.

So, if you have any thoughts on the design, functionality, the process I went through to create the tool, or anything else, I would love to hear it!

Links

Prototype

Current version

Component library

“Color is a power that directly influences the soul.“— Wassily Kandinsky

Colors are the property possessed by an object of producing different sensations on the eye as a result of the way it reflects or emits light.

Colors are often attributed to our subconscious, our past, and our personal preferences. Selecting the right color can be one of the most crucial parts of designing literally anything ranging from a poster to an app. More importantly, color has the ability to evoke a certain kind of emotion in a person which may vary based on factors like culture and gender.

How can colors impact the way you make decisions?

We have all been socially conditioned by the world we live in. Everything we see has color which is used as a technique to stimulate a certain kind of emotion in people.

The primary colors are basically the parent colors of all the colors that exist; they are like the roots of every color.

_Photo by [Unsplash](https://unsplash.com/@justinlim?utm_source=medium&utm_medium=referral" rel="noopener" target="_blank" title="">Justin Lim on <a href="https://unsplash.com?utm_source=medium&utm_medium=referral" rel="noopener" target="blank" title=")

Red — Energy, Power, Love

Red creates a sense of urgency, thus you’ll notice it being used in posters such as that of clearance sales. Additionally red has the ability to increase your appetite, so it is used quite a lot in the food industry too. It is a very emotionally intense color, so using it as a background color may not be the best idea.

_Photo by [Unsplash](https://unsplash.com/@pgreen1983?utm_source=medium&utm_medium=referral" rel="noopener" target="_blank" title="">Paul Green on <a href="https://unsplash.com?utm_source=medium&utm_medium=referral" rel="noopener" target="blank" title=")

Yellow — Optimism, Intellect, Joy

Yellow is a color associated with the sun, and just like red it is really bright. It would be a better choice to use it in your app logo or your app screenshot design. This color may get too overwhelming so use it less than most.

_Photo by [Unsplash](https://unsplash.com/@conkarampelas?utm_source=medium&utm_medium=referral" rel="noopener" target="_blank" title="">Con Karampelas on <a href="https://unsplash.com?utm_source=medium&utm_medium=referral" rel="noopener" target="blank" title=")

Blue — Stability, Tranquility, Trust

Blue usually indicates coolness and calmness and creates a sense of trust, thus it is popularly used in logos of airlines and hospitals. You will notice a lot of app logos use this color, especially the ones that ask for a lot of your private details.

The secondary colors are the mixtures of two of the three primary colors. They are green, purple and orange.

_Photo by [Unsplash](https://unsplash.com/@oneshotespresso?utm_source=medium&utm_medium=referral" rel="noopener" target="_blank" title="">Hans Vivek on <a href="https://unsplash.com?utm_source=medium&utm_medium=referral" rel="noopener" target="blank" title=")

Green — Growth, Health, Freshness

Green is the color of the environment and is strongly associated with money. It is usually used to advertise healthy foods and fresh products. You will notice that it is famously used in the health & fitness related apps.

_Photo by [Unsplash](https://unsplash.com/@thoughtcatalog?utm_source=medium&utm_medium=referral" rel="noopener" target="_blank" title="">Thought Catalog on <a href="https://unsplash.com?utm_source=medium&utm_medium=referral" rel="noopener" target="blank" title=")

Purple — Royalty, Nobility, Wealth

Purple has the energy of red and the stability of blue; traditionally it is considered to be a feminine color, so you’ll notice it being used in the makeup, fashion, and luxury industries a lot.

_Photo by [Unsplash](https://unsplash.com/@christianw?utm_source=medium&utm_medium=referral" rel="noopener" target="_blank" title="">Christian Wiediger on <a href="https://unsplash.com?utm_source=medium&utm_medium=referral" rel="noopener" target="blank" title=")

Orange — Enthusiasm, Encouragement, Happiness

Orange packs the energy of red and the optimism of yellow. It is a less commonly used color but is typically used in citrus-based products. It also has the ability to increase the flow of oxygen in the brain.

_Photo by [Unsplash](https://unsplash.com/@medhatdawoud?utm_source=medium&utm_medium=referral" rel="noopener" target="_blank" title="">Medhat Dawoud on <a href="https://unsplash.com?utm_source=medium&utm_medium=referral" rel="noopener" target="blank" title=")

Grey, white, and black

These are commonly known as bland colors but still give a very classy look and you will notice them being used often in car brands. Grey is usually considered to be an emotionless color and it levitates on the neutral side. Black is usually associated with power, elegance, mystery while white is associated with safety, purity and faith.

_I[mage credits](https://avalaunchmedia.com/services/infographics/" rel="noopener" target="blank" title=")

Now that you know about the basic colors, you are not limited to just these six. Using the color wheel, you can also create many different types of color palettes as long as you maintain colorful harmony throughout your app.

How to create color palettes using the ‘Color Wheel’

A color wheel is an abstract illustrative organisation of color hues around a circle, which shows the relationships between primary colors, secondary colors, tertiary colors etc. (Source)

_[Image credits](https://oss.adm.ntu.edu.sg/ibrahim001/2015/10/19/color-schemes/" rel="noopener" target="blank" title=")

Monochromatic colors

Monochromatic colors are created by using the same color and combining them with various amounts of white or black to create different tones and shades that stand out from each other.

Pros:

• Trendy
• Useful for modern digital design

_[Image credits](https://oss.adm.ntu.edu.sg/ibrahim001/2015/10/19/color-schemes/" rel="noopener" target="blank" title=")

Analogous colors

Analogous colors are formed when you combine a color on the color wheel with the color immediately next to it.

Pros:

• Easy to look at

_[Image credits](https://oss.adm.ntu.edu.sg/ibrahim001/2015/10/19/color-schemes/" rel="noopener" target="blank" title=")

Complementary colors

Complementary colors are the exact opposite of analogous colors. Their main purpose is to grab the attention of the user, although it may not be ideal to use it for the main interface of the app.

Pros:

• Useful for creating app logos and app screenshot designs.

_[Image credits](https://oss.adm.ntu.edu.sg/ibrahim001/2015/10/19/color-schemes/" rel="noopener" target="blank" title=")

Split-Complementary colors

This is a combination of both analogous and complementary colors where you take one color and pick two colors that are right alongside the opposite color. They are one of my personal favourites.

Pros:

• Attention grabbing
• Easy to look at

_[Image credits](https://oss.adm.ntu.edu.sg/ibrahim001/2015/10/19/color-schemes/" rel="noopener" target="blank" title=")

Triadic colors

You can create a triadic color palette by taking one color on the color palette and drawing an equilateral triangle on the color wheel to form a triadic color.

Pros:

• Attention grabbing
• Well balanced
• Has a vintage feel to it

_[Image credits](https://oss.adm.ntu.edu.sg/ibrahim001/2015/10/19/color-schemes/" rel="noopener" target="blank" title=")

Tetrad colors (Square-based)

A square-based tetrad is used when all four colors are evenly spaced throughout the color wheel.

Pros:

• Works best when colors need to be balanced.

_[Image credits](https://oss.adm.ntu.edu.sg/ibrahim001/2015/10/19/color-schemes/" rel="noopener" target="blank" title=")

Tetrad colors (Rectangle-based)

A rectangle-based tetrad uses four colors that are pairs of two complementary colors on a color wheel.

Pros:

• Useful when only one dominant color is required.

Factors to consider before using a certain color

As I mentioned before, depending on your target audience, your use of colors should differ as they may not always imply the same thing.

Culture

It is one of the vital factors to be considered before using any color; depending on the functionality of what your app does you should select an appropriate dominant color for your app.

For example, if you’re designing a dating app with your dominant color being red, it would get significantly more downloads in Asia than it would in Africa. Here’s a list that shows how different colors are perceived by different countries.

Gender

It has been scientifically demonstrated that men and women prefer certain colors over others. Women tend to prefer primary colors, and love blue, purple and green the most, but hate orange, brown and grey. If you want you can check almost any e-commerce app/website whose target audience is women and you’ll find these colors affirmed. Similarly, men love blue, green and black and hate brown, orange and purple.

Color Blindness

Color blindness affects 1 in 12 men (8%) and 1 in 200 women around the world. This means that ~300 million people are color blind around the world and a mass you shouldn’t neglect. Majority of the population being men, so keeping the above mentioned statistics in mind you should decide your colours accordingly. At the end of the article, i’ve mentioned a tool you can use to see how a color blind person would see an image depending on the type of color blindness a person has.

_[Image credits](https://www.boredpanda.com/different-types-color-blindness-photos/?utm_source=google&utm_medium=organic&utm_campaign=organic" rel="noopener" target="blank" title=")

Shades of the same color

This can also have quite an influence depending on the intensity of it. For example, bright red may signify love, but another shade of the color red, like crimson, probably wouldn’t signify the same thing.

A few great tools for designing

Now that we have covered the main aspects of color theory, here is a list that shows some of the websites that I use to create my own color palettes.

• Colorhunt—a free and open platform for color inspiration with thousands of trendy hand-picked color palettes
• A few other palettes include Coolors, Material Design Palette and Flat UI Colors 2
• ColorZilla — a chrome extension for finding the hex color code from any website.
• Toptal — a great tool for seeing how a color blind person would see a picture.
• If you would like to be inspired by a few websites that use their own unique color palette, you can see them here.

A few final things to keep in mind

• Test various color palettes — Try using different logos on your app to see which one gets you more downloads. Google Play Store offers you an option to show different logos to people so that you can increase your downloads.
• Avoid using too many colors — Colors can be a lot of fun, and we’ve seen that throughout this article. But don’t use them more than required, as it would just annoy your user and they could end up deleting your app from your phone.
• Use bright colors for CTA’s — Bright colors tend to be really attention-seeking so use them in buttons and logos, basically whenever you need the user to perform an action.
• Use colors that sell your brand the best — Although you don’t always have to stick to the rules, at the end of the day you are selling a product and your main purpose is to market it to make it successful. So use the colors that suit your product the best keeping all the factors in mind.

By using all the techniques and tools that we just spoke about in this article, I hope you land up with a good combination of colors for your own website/app. Good luck!

This is my first article, so I would appreciate if you would leave some feedback!

If you found this article helpful, give me some claps ?.

There is a lot of material about color to be found online. But none of us has the time to search and read lengthy series of articles to cover the topic. That’s why I wanted to create this comprehensive guide for applying color in web design. In this post we’ll cover:

• Color psychology
• Color terminology
• Color rules
• How to build and apply a color palette in web design
• Useful tools and resources

Getting started

So, you have a web design project on your hands. One of the first steps you’ll probably have to take in order to kickstart the process is choosing a color palette. If you’re working for an existing brand, then probably your color scope will be limited, especially if this company has a brand guideline. However, if so far you only have a black and white sketch of a brand, waiting for definitions such as color, then keep reading.

The first thing I recommend doing is performing a small exercise with your client or the project’s stakeholders. The exercise consists in having these stakeholders write a short list of attributes that they believe their new brand should have. If you can be on-site for the exercise (I personally work remotely from Argentina for clients in Europe and the US), then have them write each attribute on a sticky note. Then gather all sticky notes and put them on a whiteboard. Soon, you’ll start noticing patterns. Pick up and reorganize the sticky notes so as to cluster the notes that relate to one another. Then, you can name each cluster. In this case, since this is a small exercise, the name would probably be a single word that comprises all those related attributes. In other words, a consensual attribute.

Color psychology

When you finish with this mini-workshop you should have in your hands a list of consensual attributes. Your aim is to get the brand to evoke these attributes. For that, a very strong tool is color psychology. You shouldn’t define a brand’s color just because you (or someone else) likes it. Whichever color you use will surely have an impact on your audience. There is a lot to be said about audiences, enough to cover it in a separate post. For now, let’s just say that your audience matters and that you should design specifically for it.

Back to color psychology. To summarize, color affects people and evokes certain ideas/attributes. The way we relate ideas to colors depends on our culture. Different cultures have different color interpretations (see, I told you the audience matters). There is material to be found on color psychology for many countries/areas of the world. Here is a resource I found.

In this post, we’ll cover western color interpretations:

• Red: Love, danger, anger, war. A darker red could be related to elegance.
• Orange: Energy, vitality, autumn.
• Yellow: Warning, happiness, cowardice, or wealth, in a golden shade.
• Pink: Femininity, romance, sensitivity. Could also convey energy and innovation.
• Purple: Royalty, luxury, creativity, spirituality.
• Blue: Sadness, calm, reliability, trust, corporate.
• Green: Nature, luck, cleanliness (depending on the shade).
• Grey: Conservative, modernity, luxury.
• Black: Elegance, power, strength.
• White: Purity, cleanliness, elegance.

It is important to note that the shade of the color will also affect its interpretations. But then again, not only the “shade”.

Color terminology

Let’s speak properly. If we are going to work with color, we should know how to speak about it, and because of that, how to manipulate it to fit our design needs. Let’s get acquainted with a couple of terms:

• Hue: This is the color.
• Saturation/Chroma: This refers to the purity of a color. A color is most pure when it lacks gray.
• Value: Refers to the lightness or darkness of a color.

With these three parameters, we can create many “versions” of a color. To better explain it, let’s look at the Munsell Sphere:

The “versions” I was referring to earlier actually have names. Yes, more color terminology to learn!

• Tone: When you add gray (desaturate) a color or hue.
• Shade: When you add black (lower the value) of a color or hue.
• Tint: When you add white (increase the value) of a color or hue.

Creating a color palette

So, a quick recap. Until now you have:

1. Defined a list of attributes for your brand.
2. Selected a color to reflect these attributes, through the use of color psychology.
3. Determined a more specific “version” (tone, shade or tint) of your color, through your knowledge of the Munsell Sphere.

Great! Now, it’s time to build a color palette for your website. To do that, we’ll take your brand’s new color as the central color to base your palette on. The next step is to choose some colors to accompany your main color, and therefore, create your palette. In order to do it, there are several color rules that you can choose from and apply. These rules are built upon the Chromatic Circle or Color Wheel, a very useful tool to create color combinations.

Complementary colors

These are colors that are located at opposing sides of the Chromatic Circle.

Analogous colors

These are colors that are next to each other on the Chromatic Circle.

Triadic colors

These are colors obtained by overlapping an equilateral triangle to the Chromatic Circle.

Split-complementary colors

This combination is obtained by matching the main color to the two colors adjacent to its complementary.

Square colors

These are colors obtained by overlapping a square to the Chromatic Circle.

More combinations

The same as with the triadic and square color combinations, you can create even larger palettes by using other geometrical figures such as pentagon, or a hexagon.

Tip: Beware of color vibration

When you create a palette, especially a complementary palette, it’s not only necessary to define the hues. You also need to take into account the saturation/chroma and the value of your colors, in order to get a harmonious palette. Otherwise, you risk your colors vibrating. Literally.

There are some colors, that when placed next to each other, produce a disturbing effect on our eyes. They seem to vibrate. This happens especially with colors that at opposite in the Chromatic Circle, and that have the same level of saturation.

Applying colors in web design

Now that we have one central color and some notions about color rules, we can choose a strategy and define our color palette for our website design. Let’s start from the beginning.

How many colors?

The truth is you can have as many colors as you like, but you should keep in mind that larger color palettes are harder to implement effectively. It may also affect the ability to have a consistent design system in place. However, it’s your choice. I would personally recommend having a simple color palette, especially if you’re just starting.

Which colors should my palette include?

To start, your palette should include a very light color and a very dark color. The idea is that these two colors have a great contrast (I will leave tools to measure contrast at the end of the article). For example, black and white (yes, white counts as a color). Why? Because you will need a color for backgrounds and a color for text. Just that simple. Personally, I prefer choosing neutral colors for this. Neutral colors are versatile and elegant and can compliment any given color palette.

Bottom line, your color palette shouldn’t only include very live and interesting colors. You need base colors too.

The finished color palette

Let’s say that in total we’re going to have 5 colors in our palette. We already know that one color should be really light (e.g. white) and another color should be very dark (e.g. black). That leaves us three open spots for some interesting colors. We also know that we have the main color and that the other two colors will relate to this main color through the use of color rules.

Let’s pretend our main color is blue. Here are some possible palettes with blue as the main color.

Complementary palette

Analogous palette

Triadic palette

How should I apply these colors to my design?

Of course, there are no set rules, and different designers might obtain very different results using the same colors, fonts and so on. This is only meant as a guide for getting started. In other words, if you have no clue whatsoever on what to do with your new color palette.

Let’s continue with our made up palette. Suppose we chose to use the complementary palette.

How can we apply it?

• White: can be used as a base/background color. Of course, you can use other light neutrals (like gray) for some backgrounds, or even a bright color from your palette, but in general, for legibility sake, you should probably have more white real estate in place.
• Black: Can be used for text. Again, you can have quotes or highlighted text in another color.
• Light blue: Pick a color that is very different from the text color but has a good contrast with the main background color. In this case, that color would be the light blue. This color will be perfect for hyperlinks. You want links to be distinguishable from your text, but readable.
• Blue: This is your main color, so it will probably set the tone for your design. You will probably use it for some backgrounds, buttons, graphs and so on.
• Orange: This would be your accent color. You could use it to add a touch of color to your design. Could be used on some buttons, miscellanea, icons, and graphs.

Ok, but what about consistency?

I like rules. Rules for me are what separate designing with a rationale/objective/justification from designing just what you feel like. So, when I was starting I would look for rules to use color. For example:

• Should all (primary) buttons have the same color?
• Should all clickable elements look the same?
• Should all clickable elements have the same color?

And so on. The truth is there is no rule (in this case). You could have (primary) buttons of different colors, and you could use the same color for clickable and non-clickable elements. Not all clickable elements need to look like links or buttons. Something that is necessary is that you clearly show which elements are clickable and which are not. You can achieve this by defining hover states.

Also, however you decide to design your UI elements, you need to make sure that you will keep the design consistent throughout the platform. To do this, you could create:

• A kitchen sink (if you manage HTML/CSS)
• A style guide
• Symbols in your design software (e.g. Sketch symbols). So whenever you need an element, you don’t create it from scratch, you just use an existing symbol. If you make a change on a symbol, this change will reflect on all instances of the symbol.

Practical uses of color

Color is not only meant to make your design attractive. It is also used to convey meaning. For example:

• You can use Red/yellow on warnings/notices.
• You can implement color coding (e.g. all content of X topic will have X color).
• You can show status (green could mean active, red inactive and so on).

This is great and it helps users understand and decode the information you’re showing them. However, you shouldn’t rely solely on color. Why? Because you need to consider color-blind users, who represent an 8% of the world’s population. For their sake, always try to include clear labels and/or icons to convey meaning, and use color to support this meaning.

More complex palettes

Like we said before, you can have more complex palettes, with more colors. For example a square palette, or an analogous palette with a higher number of colors. It can work out perfectly, but as always, the decision to use more colors should be based on things like the objective of your website and its target audience. Let’s look at a couple of examples:

Slack

slack.com

Stripe

stripe.com

Tools and resources

You’ve reached the end of this article, congratulations! (and thank you for reading). I hope you found this article helpful. We’ve covered a lot of ground, but in a summarized way (yes, it could have been longer).

Please find some tools and resources to work with color in web design below:

Choosing colors

• FlatColorsUI
• ColorSupplyyy
• Adobe Color Wheel
• Coolors
• ColorDrop
• Oto255
• Custom CSS builder

Check contrast

• ContrastChecker
• ContrastFinder
• Color contrast tips and tools for accessibility with this contrast checker

Color-blindness

• ColorOracle: With one click see what people with common color vision impairments will see.

You can read more of my blog posts at uxagustina.com.