Selection of flat colors. Flat design and color palette - SkillsUp - handy catalog of design lessons, computer graphics, photoshop lessons, Photoshop lessons. Flat design - preparation
Practical Tips and tools.
Colors, like everything else, are best used in moderation. you will reach best results, if you use a maximum of three primary colors in the color scheme. The effectiveness of color matching in design is largely based on balance, and the more colors, the more difficult it is to achieve.
Color does not shape the quality of the design - it enhances it.
Pierre Bonnard
If you need additional colors beyond what you originally chose for your palette, use tints and shadows. Operate within the chosen range.
Rule 60-30-10
This design rule helps you quickly come up with a color scheme. The proportion 60% + 30% + 10% reflects the balance of colors. This formula works because it creates a sense of balance and allows the eyes to move comfortably from one point to another. In addition, this technique is extremely easy to use.
Wall decoration, furniture, accessories.60% is your dominant color, 30% is your secondary color and 10% is your accent color.
Meaning of colors
Scientists have studied psychological effects for centuries certain colors. In addition to aesthetics, colors create emotions and associations. Depending on the culture and circumstances, the meanings of colors can be different. That's why you see fashion boutiques in black and white. They want to look elegant and noble.
Asos is completely black and white, with green "call to action". And it's not just that. - Red: passion, love, danger
- Blue: peace, responsibility, security
- Black: mystery, elegance, evil
- White: cleanliness, silence, neatness
- Green: novelty, freshness, nature
More about the meaning of colors can be found in Color Culture.
Grayscale first
We like to play with colors and tones in the early stages of design development, but this behavior can get you down very quickly - you can kill 3 hours choosing the main color and then change your mind anyway ... It's certainly tempting, but not very effective.
Instead, force yourself to work on the structure - padding and placement of elements in the layout. This will save a lot of time. This work is very productive. On the other hand, it doesn't have to be boring. Test different shades if you want to look good.
One of my works that you can find on dribbble. Simple monochrome colors and focus on elements. Avoid pure grays and blacks
One of the most important color tricks I've ever come across is avoid gray flowers without saturation. AT real life There are no pure grays. The same goes for blacks.
Most dark color this photo is not #000, but #0A0A10 Remember, you always need to add a little saturation to the color. Subconsciously, it will be perceived more naturally and close to users.
Believe in nature
The best color combinations have already been invented by nature. They always look natural. Best thing to do is just watch surrounding nature and extract from there palettes for your designs, in nature they always change.
To be inspired, you just need to look around
Maintain Contrast
Some colors go well with each other, and some don't. There are defining rules for the interaction of shades, which are best demonstrated by color circle. You should be aware of these methods, but you don't have to use them manually.
Get inspired
When it comes to finding UI examples, dribbble is one of the the best places for this. It has a color search tool. So if you need to conduct a visual research on the use of a particular color by other designers, go to
Video, print design, interior design, fashion... there are just so many places to get inspiration from. Save interesting finds for future ideas.
Often I like to steal colors from KPOP video clips. They are luxurious.
Instruments
To make things easier for myself, here are a few best tools to select color palettes. They will save a lot of your time.
Definitely my favorite color picker. You can just pick one color and generate a palette by hitting the space bar. Coolors allows you to upload an image and create a palette from it. You are not limited to one result - the selector allows you to change the initial reference point.
Kuler
This tool from Adobe is already long time helping designers. It works in the browser, there is also a desktop version. If you're using the desktop version, you can export the color scheme to Photoshop.
It is similar to Kuler, the difference is that you are not limited to 5 shades. Great if you have primary colors and want to play with complementary hues.
design inspiration.net
Imagine that you have an idea for a color palette, but you need to visually compare different variants. Designispiration is perfect for these purposes. You choose up to 5 colors, look for images that match your shades. The service not only successfully searches for images in a given palette, but also helps to choose the right graphics for integration into the design.
You ask - what if I want to search for a photo in the selected color? Shutterstock has a tool called Spectrum where you can find photos of a specific shade. You don't even need a subscription to do this, because previewing images with a watermark will be enough to generate a palette.
Tineye Multicolr
But if you need to find a photo for several given colors, or even set a specific amount of each shade, then use Tineye. This site uses a database of 10 million Creative Commons images from Flickr.
Final Thoughts
Color is a very difficult resource to master, especially in the era of digital design. The tips that I have given in this post will make it easier to find the right shades. The best way to learn how to create amazing color schemes is to practice, so play around with the colors a lot.
Tags: ,A post with some tips and principles for choosing the best palettes for infographics.
"If you find nice palettes It's easy these days, finding the right combination of colors to visualize data is still difficult,” writes Zheng. In finding colors for infographics, she identifies three main challenges.
Flat UI Colors Palette
Flat UI Colors palette in protaponia
Flat UI Colors palette in black and white
First, not all palettes are meant to be rendered. For example, colors from interface design guidelines (such as Google's Material Design) may not be perceived well by colorblind people and simply look slightly different from each other.
Four color palettes from Color Hunt
Secondly, there are not enough colors in many existing palettes. As an example, she cites the Color Hunt website, where you can find successful combinations four colors. But infographics usually need 6 to 12 colors.
Gradient palettes from the Color Hunt site, the colors of which will be difficult to distinguish on infographics
The difference between a gradient palette of four colors and 12
Thirdly, the colors of some palettes differ slightly in brightness, so it will be difficult to distinguish them from each other, especially if they are side by side.
To choose a good color combination for infographics, Zheng recommends using three rules.
From left to right: a palette of blue from material design, it is also in protaponia, it is also in black and white
The ratio of brightness and color for colorblind people and people with normal vision
First, you need to check if the colors from the palette have a sufficiently strong difference in brightness. “The difference in brightness will be universal,” writes the designer. Also, a large difference in brightness will help to adapt the palette for color blind people. You can see how it will be perceived by people with protaponia (reduced sensitivity to red), deuteranopia (reduced sensitivity to green or other colors), and also if you translate it into black and white.
Secondly, it is better to use natural combinations for the palette. As an example, Zheng cites the transition from light yellow to dark purple and from light purple to dark yellow. “From a purely mathematical point of view, they should look about the same,” she writes, noting that the first combination looks more natural than the second. The designer attributes this to the fact that a person is used to seeing combinations from the first palette in nature, for example, during sunset.
Mesh for working with gradients
Thirdly, when forming a palette, it is better to use a gradient in order to better feel the difference in color. To make things easier, Zheng suggests making a grid of colors in Photoshop like the one in the screenshot above. Gradients, she assures, are effective when choosing both two and 12 colors.
Lucky palettes for infographics
Lucky palettes for infographics
The designer also advised 12 useful resources to work with color and palettes. You can see their list
We have already talked a lot about flat design. showed a lot various examples using this method. How about developing your own version? One of the important parts of this method, if not the most important, is the color palette.
Flat design - preparation
Flat design is a method that does not use any additional effects, or the simplest, and also does not contain three-dimensional elements. Effects such as shadows, bevels, embossing and gradients are not used in flat design.
Some call the look and feel of flat design simple, although this is not always the case. Appearance itself is simple, clear and user-friendly, making it an increasingly popular option for mobile user interfaces as well as a trendy design option for web design.
Defining a color palette
Flat design works with bright, bold colors and when it comes to color palette, then most often designers prefer to use a large variety of colors.
Another thing that makes flat design stand out is in terms of color. Designers use color palette one simple shade and add two - three, four or more colors. Most of these options are bright, fully saturated shades that are opposites such as gray and black.
When it comes to colorful flat design, many of the traditional rules about color matching and matching are ignored and palettes are used that span the rainbow with large quantity colors.
All we see in a flat color design is a combination of hue and saturation. Designers can use quite a few hues that will complement each other in terms of how deep the color is set to, whether that color is the primary or the result of a secondary color combination, or maybe that color is from a completely different part. color palette and contains colors of black or white shades.
When it comes to color palette, flat design is often super-saturated with bright colors, retro or monotone. It doesn't mean they're the only ones options, but since the trend is only developing today, these options are now the most popular.
Bright colours
Bright color palette often characterizes flat design as it evokes different feelings. Bright colours work especially well compared to regular ones, also on a dark background, creating contrast and drawing the eye of users.
So where do you start?
FlatUIColors.com has a great starting list of some of the most popular colors in flat design. From bright blue and green to yellow and orange. The site is a great start to use flat design in your project because you can choose and download free colors and different color combinations. (Personally, I like gray and calm tones.)
If you want to combine your own bright colors in flat design, opt for simplicity and colors that share the same Color tone and saturation.
Vivid examples: Try these color combinations together or separately in groups to create a flatter color palette. Each of these colors will be set against a white or black background for maximum impact.
Popular colors: blue, green and purple
Retro colors
Retro colors are also a popular choice when working with flat designs.
These less saturated shades are built on the basis of a bright color palette, but with the addition of white to make them more subdued. The retro color palette often contains a lot of orange and yellow, and sometimes red or blue.
It is more common to see primary and secondary colors used in retro palettes when working with flat designs due to the softening of the color tone.
Retro examples: retro colors work best when brought to the fore as dominant colors. Pair them with images or muted colors for the best results.
Popular colors: orange, peach or dark blue.
monotone colors
Monotone colors paired with flat design are gaining popularity at a rapid pace. These color palettes rely on single colors, black and white, to create a vibrant yet distinct palette.
Most monotonous color schemes use two or three colors as the base. The most popular color choice seems to be blue, but many designers opt for a monotonous color scheme based on black (gray for example), or such as red for buttons.
Another option is to create an effect with monotonous small deviations in color. If you start with blue and add shades of green and create a blue-green scheme.
Monotone colors are especially popular for mobile applications and mobile design.
Monotone examples: As with other color palettes, monotonous schemes also need to use contrast. Mix shades other than the base color. Start with saturated (100%) and tint at 50%, 20% and 8%.
Conclusion
The only thing that really makes flat design work is that the trend is new and interesting.
Creation color palette, which matches the tone of your design, shows users how to use your site, is visually interesting and fun. Pay attention not only to some traditional color matching rules, but also to your own tastes when creating flat color palettes.
Such a trend as flat design is in constant development - new sites are appearing where flat elements are actively used. Flat design has recently been associated with bright colors, but recently you can see that many designers have begun to prefer calmer shades, using brightened or muted color palettes. Experimenting with a combination of different shades allows you to make the design more fashionable and modern and stand out from other sites with a similar arrangement of basic elements.
Using a muted color palette can also help if bright colors clash with the main theme of the site. In some cases, too flashy shades can irritate users, which is not good for the site. A calm color scheme, on the contrary, fits very well with the flat design aesthetic, as it allows you to create a visual hierarchy, highlighting the most important elements.
Bright colors attract attention, they catch the eye, but you need to use them carefully in the design, otherwise there is a risk of confusing the user, whose attention will jump from one element to another. By lightening some of the original colors, you can push some parts of the design into the background, while maintaining the main color scheme site.
LIGHT SHADES
To instruct new shade, you can add white to the original color. A lightened shade is perceived as lighter, such colors are sometimes also called pastels. Saturation of shades can vary from almost white to a shade that is only slightly lighter than the original color. Sites with designs that use a lighter palette are perceived as lighter and "softer" and very often allow the designer's intent to be fully realized. After all, it is far from always necessary to use bright colors - there are great amount those where the clarified gamma is more than appropriate. Light shades go well with photos, as they do not distract the user's attention from viewing the main content.
If you look at the Jack Horner fast food restaurant website, the subtle pale yellow hue contrasts sharply with the black design elements. So the designer is trying to convey to users the main "trick" of the restaurant, which offers visitors traditional dishes prepared according to old recipes. A slight retro reference here fits well with the eco-theme that the company is promoting.
Light shades are also present on the site www.caketeacher.com, where you can find many useful tips for making cakes at home. The hues here are slightly brighter than on Jack Horner's website, but they don't interfere with the user's focus on the centered photos. The contrast of muted tones with bright elements helps the user to focus on viewing the main content - recipes, tips and tricks. In addition, the light color scheme helps to remove some of the negative perception that a visitor may have, who at some point will find that in order to access all the content on the site, he will have to subscribe to $ 18.90 per month.
DARK SHADES
Dark shades are obtained by adding black to the base color. The color scheme becomes more strict and heavy. dirty, dark shades work well if you need to create the right atmosphere on the site. A muted color palette works well on commercial sites, such as Ann Taylor's.
Dark shades give the design solidity and at the same time do not distract attention. On the site you can buy clothes and various accessories that allow a woman to feel comfortable throughout the day. Things from Ann Taylor are casual clothes, comfortable and cozy, which is emphasized by the color scheme. But if the company were a pretentious glamorous brand, it would hardly be possible to do without the use of bright flashy tones.
The design of the Frida Cafe website uses a color scheme that was often used by the Mexican artist Frida Kahlo. These are muted yellow, ocher and green shades. The designer was tasked with expressing main idea cafe owners – a return to simple and affordable kitchen. At the Frida Cafe, visitors can taste freshly brewed coffee with a very rich taste, which is emphasized by the soft colors used in the design.
CONCLUSION
Whether or not to use soft shades in the design depends on the situation. In some cases they will be more than appropriate, in others they will not. The fact that soft color palettes are in fashion today does not mean at all that you can’t do without such shades when creating a design in the flat style. There is always room for experimentation and if bright colors work better then use them. But if you want to create a certain atmosphere on the site, then you can’t do without halftones. Soft colors go well with a wide variety of content, allowing you to more accurately place accents and focus the user's attention on the most important thing.
Flat design is one of the web design trends that has been around for a surprisingly long time. Over the past few years, this design has been actively used in the development of interfaces for desktop, web and mobile applications. Also, flat design is actively used in the creation of printed graphic materials. Learn more facts about flat design in this online guide. Today, the topic of our conversation will not be flat design in general, but its specific part - flat colors.
Flat design got its name for a reason: its concept excludes the use of three-dimensional elements, deep shadows and bright gradients (from English “flat” means “flat”). Buttons, icons, and other graphic elements look simplistic and crisp, but still attractive.
Developing a flat website design is not so easy. The main difficulties arise with interactive elements, because the design must emphasize the difference between static and dynamic content. The only way to tell users which elements are interactive is through subtle shadows and borders. Therefore, to create a “balanced” flat layout, you need to think through every element to the smallest detail, and this is not an easy task.
Choosing flat colors for the color scheme
The importance of colors in web design cannot be overestimated. For example, a successful one can attract more readers. It should be said right away that flat design is unique in all matters relating to color. The bright colors of the flat design immediately capture the attention of users. Unlike traditional color schemes of two or three shades, flat layouts are designed in four or more colors. Very often these are saturated shades in combination with gray or black.
Traditional color combination rules can hardly be applied to flat design. In flat design, it is not the colors themselves that are important, but their tone and saturation. Despite the fact that in the design of one layout you can use several absolutely different colors, they must be combined in depth. Flat colors themselves can be either primary or secondary. It can even be a contrasting combination of white and black.
Moving from theory to practice, I would like to tell you about the W3.CSS flat color set. This collection contains various color schemes for creating websites. Here you will find material design colors, flat colors, Windows metro and Windows phone 8 colors. This collection is accompanied by HTML and CSS code examples so that you can quickly apply the chosen combination.
If you're a complete beginner and don't know where to start, check out Flat UI Colors. On this site, you can copy the color you like, and then find it in a graphics editor by inserting the appropriate value. As you can see, the collection is dominated by bright shades - from green and blue to yellow and orange.
However, even in flat design there are limits to the choice of colors. For example, you are unlikely to see a combination of red, yellow and blue flowers in one layout. Designers prefer more saturated and mixed shades.
Do you want to develop a flat website design? Pay attention to MotoCMS 3.0 templates created with flat design principles in mind. We've compared the templates with various flat color scheme samples to show how they affect UI properties.
Bright colours. Bright blues, greens and purple shades stand out well on a white or black background. These colors are often used in flat website design.
MotoCMS 3.0 Template for Print Services Website
MotoCMS 3.0 Template for Print Services Website - perfect solution for a project related to printing and printing. However, the theme of the template can be easily changed. The design of the template is developed taking into account the principles of flat design. Users are offered 8 options for sliders and galleries along with 20 widgets and modules. All this will help you create a popular and original online project.
Retro colors. Often these are pastel oranges and yellows combined with bright reds and blues. Most often primary flat colors in retro style combined with secondary - it is easier to achieve the effect of mixing.