2

How to use analogous color scheme in design?

 3 years ago
source link: https://uxplanet.org/how-to-use-analogous-color-scheme-in-design-bf32d18ab05c
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

Responses

Also publish to my profile

There are currently no responses for this story.

Be the first to respond.

You have 2 free member-only stories left this month.

color scheme 2

How to use analogous color scheme in design?

Adjacent to each other.

1*IRzS3nVyckF4C0aqB5ZSGA.png?q=20
how-to-use-analogous-color-scheme-in-design-bf32d18ab05c

Analogous colors are a group of three colors next to each other on a color wheel, such as violet, red-violet, and red. When these colors are grouped we call it an analogous color scheme. The color in the centre of this group of three is sometimes called the mother color since the other two colors contain that centre color.

Analogous color schemes create a visually pleasing and calming display. For instance, the color blue can pair nicely with both teal and green.

They usually match well and create serene and comfortable designs. Analogous color schemes are often found in nature and are harmonious.

1*xTozQpDuAyi_2FerDbODww.jpeg?q=20
how-to-use-analogous-color-scheme-in-design-bf32d18ab05c
moving.com

It always looks very elegant and clear. There is no tension in the palette, and typically it’s uniformly all warm, or all cold. If a base color on the warm-cold border is chosen, the color with opposite “temperature” may be used for accenting the other two colors.

However, analogous color schemes provide a low-contrast experience, since all colors fall in line with one another.

Make sure you have enough contrast when choosing an analogous color scheme. Choose one color to dominate, a second to support. The third color is used (along with black, white or gray) as an accent.

Easy way to create analogous color scheme:

Step 1: Pick any color

I started with color “#475FCB”. And we’re going to change it to HSB, which stands for Hues, Saturation, and Brightness.

1*N_lXuiQ81TZOVTzGVCZ15g.png?q=20
how-to-use-analogous-color-scheme-in-design-bf32d18ab05c

Step 2: Make 5 copies of main color

Just copy paste the same color 5 times so we can make a perfect analogous color scheme.

1*uaUcYvQqEb3i9iil9_iuHA.png?q=20
how-to-use-analogous-color-scheme-in-design-bf32d18ab05c

Step 3: Change the Hue value

Now, increase or decrease the hue (H in HSB) value by 30 points. The color code in hex is “#475FCB” and in HSB is “229 65 80”. The main color is in center and decreased 30 points from the left and increased the 30 points to the right.

You can change accordingly saturation and brightness (S & B) to get better contrast.

1*cVhtONvaALIOh8t5NjqXlw.png?q=20
how-to-use-analogous-color-scheme-in-design-bf32d18ab05c

Step 4: Choose accordingly

Pick adjacent colors around the main color to make a analogous color palette.

1*WSCajX_AxKMzNtMn10orNg.png?q=20
how-to-use-analogous-color-scheme-in-design-bf32d18ab05c

Examples:

1. Blue, blue-purple, purple

Purple can be considered somewhat analogous to blue. Blues that are close to cyan or green look very different from purple. However, short wavelengths of blue light are close to violet.

1*dX-PKnf-wEhSNcrpu4KgNg.png?q=20
how-to-use-analogous-color-scheme-in-design-bf32d18ab05c

2. Red, red-orange, orange

These colors are the longest wavelengths of visible light and these colors are perceived as warm due to their association with sunlight and fire.

1*MKbNt_htgROm4t_XuVUsrQ.png?q=20
how-to-use-analogous-color-scheme-in-design-bf32d18ab05c

3. Teal, teal-green, green

These colors are middle wavelengths of light that are extremely common in nature due to their presence in the sky, bodies of water and vegetation. They are considered cool and calming.

1*RoH91o6sFaYJre6qTP7Veg.png?q=20
how-to-use-analogous-color-scheme-in-design-bf32d18ab05c

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK