Color in design

    There is no need to paint how important color is in design. A successful color scheme is already half the success of the project. To help developing designers - a little theory of the color wheel and a selection of links to useful resources.



    The basic color wheel will come in handy in choosing the most suitable color combination (or help harmoniously combine certain shades with each other). It depicts the basic and well-known since school rules for mixing primary colors: red, blue and yellow. If you mix red and yellow, you get orange, blue and yellow will give green, and red with blue will turn purple. Orange, green and purple are secondary colors. Tertiary colors, like red-violet and violet-blue, are obtained by mixing the primary with the secondary.



    According to color theory, harmonious combinations use: two colors that are opposite to each other; any three colors evenly distributed around the circle and form a triangle; any four colors forming a rectangle (in fact, two pairs of colors opposite each other).



    Color Matching Rules


    Complementary colors - located opposite each other. For example, blue and orange, or red and green.

    They contrast with each other, well emphasize and highlight the desired element. The best combination comes out when one color is applied as a background and accents are highlighted by another. A game with shades and tones diversifies the color scheme and helps to achieve the desired result.

    Separation of complementary colors is carried out by three colors. They are also opposite each other, but the overall combination looks calmer and more diverse by adding a third color.

    Similar colors are any three colors that are next to each other. For example, orange, yellow orange and yellow.

    Triadformed from three colors evenly spaced from each other. The scheme of the triad creates a contrast, where one color dominates, and the other two emphasize.

    Two pairs use four colors together in the form of two sets of complementary colors.

    Useful websites


    The network has many resources that provide ready-made color palettes, patterns, and templates. Below is a small list of useful “color” resources for the designer.

    СOLOURlovers

    www.colourlovers.com/palettes/most-views/all-time/meta

    Creative community where people from all over the world post ready-made color schemes and templates. Everything posted is rated by users.



    Color Safe

    colorsafe.co

    Website with beautiful and affordable color palettes based on WCAG Guidelines.



    COLORS

    clrs.cc

    A simple color palette for web development.



    UiGradients

    uigradients.com/#PinotNoir

    A large collection of ready-made color gradients.



    Couleurs

    couleursapp.com

    A convenient application for “grabbing” and preserving the colors that are displayed on the screen.



    Web Color Data

    webcolourdata.com

    Makes a breakdown of any site by color (by numbers and samples).



    Material Palette

    www.materialpalette.com

    Generates a design color palette.



    Material Colors

    materialcolors.com

    A selection of color samples from Google's Material Design Guidelines.



    Material Design Colors

    www.designskilz.com/colors

    This small web application helps visualize design colors and copy them in a variety of formats.



    Material Design Palette

    codepen.io/addyosmani/full/jlvoC

    Color palette for 500 color ranges for Android, web and iOS.



    Colors

    colors.neilorangepeel.com

    Color by numbers and location on the palette.



    Rrggbb rrgg.bb

    Color

    swatches with program numbers.



    Fifty Shades Of Gray For Web Designers

    www.mynameisq.com/web-lab/fifty_shades_of_grey

    Grayscale for web design.



    Fifty Shades Of Gray For Web Designers

    hex.colorrrs.com

    A color matching site.



    Material UI Colors

    www.materialui.co/colors

    Google’s UI colors palette includes primary and secondary colors that can be used for illustration or web development.



    Adobe Color CC

    color.adobe.com/en/create/color-wheel Captures

    colors and shades from the environment - just point the phone’s camera at something colorful.



    Coolors

    coolors.co/app/f2ee7a-7c6582-6252aa-f1ffc9-cdc5bb

    Fast color scheme generator for designers.



    BADA55.Io

    bada55.io

    The site offers the most aggressive names for CSS colors.



    Paletton

    paletton.com/#uid=1000u0kllllaFw0g0qFqFg0w0aF

    Color scheme for designers.



    Colourcode

    colourco.de

    Select colors based on hsl. The scheme includes different color combinations.



    Color Palette Generator

    www.degraeve.com/color-palette

    Creates color schemes. You must enter the image URL to get a color palette that matches the selected image.



    Color Palettes Color Schemes

    www.color-hex.com/color-palettes



    ColorSchemer

    www.colorschemer.com/online.html

    On-line color generating scheme.



    Colllor

    colllor.com Color Picker

    Generator.



    Contrast-A

    www.dasplankton.de/ContrastA The

    application allows users to experiment with color combinations, create their own.



    Color Hex

    www.colorhexa.com

    A site providing information about any color. Just enter any color values ​​in the search field and Color Hex will give a detailed description, automatically converting to RGB, CMYK, HSL, HSV, CIE-Lab, Hunter-Lab, CIE-Luv, CIE-LCH, XYZ and XYY.



    ColorExplorer

    www.colorexplorer.com

    A useful site that provides a whole set of on-line tools for working with the color palette.



    ColorLuck

    7act.ru/colorluck.php

    Tool for finding the most diverse colors.


    Also popular now: