+50 Shades of Color

A method often used to use different shades of the same color in a design. But there is unfortunately not a source where you can find tones of colors in one place.

That's why I made the Shades of Color page. From light blue to dark red, you can find 50 shades of 11 colors on this page.

Different shades of similar colors are frequently used in user interface designs.

Some examples can be viewed from the dribble page.

Cool shades of color listed on one page. From shades of blue color to shades of green, 11 color palettes will help you to design better work.

All collection colors include names.

Some names were put by us. But some of them are color names that are commonly used by all designers.

We have listed 50 different tones for each color. Okay but why?

It's not a coincidence. We were inspired by that famous film.

If you want to watch 50 shades of gray, go to Netflix. But if you want to explore 50 shades of gray color, you're in the right place.

Best Practice of shades of color

Before diving into the shades of color, you might be got inspired with best practice.

In this section, I will examine some of the good designs to show the importance of using less and relevant colors while designing.

Are you ready? Let’s go!

Our first example from Indie Hacker Articles pages.

As you'll notice, the dominant color on the page is dark blue.

However, different colors are not used on the buttons to create a contrast. Shades of dark blue are used.

Buttons, icons, links and info cards are all colored with shades of blue.

Mostly solid colors are preferred. But there is a light gradient in the background color of the page.

One of the reasons for using the blue gradient is that the blue is already the primary color on the page.

Let's move to our second example.

It’s a book application design sample. The main color in this design is pink.

‍

‍

Most of the design consists of 3-dimensional drawings. Apart from the small yellow and green details, the drawing is made entirely of shades of pink.

To create a contrast, the title and description of the page are designed in white font on a pink background.

Again in this design, there is a gradient as in the other example.

The pink gradient is used on the ground to create depth of field in the drawing.

If we're ready, let's go to our third and final example.

This example was taken from Dribbble. Designed as a header part of a website.

‍

The preferred color on this page is green.

The light emitted by the lamp, the furniture, everything is colored with shades of green.

The title of the page and the buttons are made in white. Only the male figure's pants are blue.

It is possible to duplicate these examples.

The idea that I am trying to summarize is that using different shades of the same color in design can have impressive results.

Thank you for your time. Have a nice day.