HTML COLOR UI HOW TO

While the principle has got its origin in interior design, you may apply it successfully in a digital one.

10% – the rest of the room belongs to the accent colorĦ0-30-10 Rule – How It Is Used in UI Design?.

60% – the amount that should belong to the primary color.

The rule is used to find the right balance in colors scheme.Ħ0% + 30% + 10% is the proportion between the used colors:

The Magical 60–30–10 Rule – The way we feel the right balanceĦ0-30-10 Rule is a well-known and timeless decorating principle in the interior design industry. It is difficult to achieve a good result, but they can make the design more appealing. Triadic – color scheme made from 3 hues equally spaced around the color wheel. They may also include tints and shades of these colors. It is easy to create it, and it feels more attractive than monochromatic scheme.Ĭomplementary – the scheme is created when you combine 2 colors from opposite sides of the color wheel. If you are going to use them in the app, be careful – UI may not look so interestingĪnalogous – 3 colors that are next to each other creates analogous color scheme. Monochromatic – schemes are created from the different tones, tints, and shades within the same hue.

HTML COLOR UI HOW TO

There are following color schemes:īelow I will describe 4 the most popular ones, for more feel free to read Color Theory for Designers: How To Create Your Own Color Schemes. They help designers to find the right hue for the remaining ones. This is why the usage of the right color palettes is essential to make the app more attractive. Like in HSL, HSV colors of each hue are placed in a radial slice, around a central axis of neutral colors which ranges from 0% value at the bottom to the 100% at the top.Ĭolors Schemes – Making UI feel more natural HSV/HSB – (Hue, Saturation, Value or Brightness) – this color scheme is often mistaken with HSL, but it is a different and alternative representation of RGB model. In HSL colors of each hue are placed in a radial slice, around a central axis of neutral colors which ranges from black at the bottom to white at the top. HSL – (Hue, Saturation, Lightness) the alternative representation of the RGB model. This means that red, green, and blue light are added together in various ways to reproduce a broad set of colors. RGB – (Red, Green, Blue) is the additive color model. These are the most popular color models for digital design: It is good to know a little bit of theory before we will jump right into more practical tips. In the other hand, the green color of the button may encourage the user to purchase a particular product, because it suggests that this may be a safe process. Thanks to this user will immediately understand that it is a message worth reading. If you would like to warn someone in the app, you will use the right color (often red).

Colors helps to accomplish goals – They may help creators and users to communicate in the right way.

Thanks to this, UI gains trust, and users feel that they are in the right place.

Colors strengthen brand personality – the usage of colors may build a better connection with companies or product brand.

The particular areas and objects gain more meaning, and they are easier to focus on.

Colors improves UX – thanks to the right color palette content may be more comfortable to read.

Benefits of using right Colors in UIĬolors are not only used to make UI more attractive, they have got various benefits for users and business. You will find here also links to the tools that will help you find inspiration for tones of your next UI. The story contains a complete guide of usage colors in UI design. If you have become acquainted with Gestalt Principles and their influence on User Interface, you may now focus on bringing more life to them with colors. Colors have got a significant impact on how digital products are perceived by users.

Html color ui