Colors

A color scheme¹ is used to create the style and appeal of a project. It adds to the logo design a palette of colors for recognition and and identity. Ideally, deciding on colors is a starting point for the visual appearance of a project. However, you may need to go through some iterations to learn the basics of how colors communicate to us psychologically² and what are the technical details of the representation on displays³. Don’t be discouraged, if your color concept isn’t perfect at first. In the following I document the process of choosing the colors for this project.

Inspiration first

If you don’t have a favorite color yet, you may start by browsing through some images and find motifs that appeal to you. Try to identify which color or colors in that image are most appealing. For exmaple, I like parsley. And searching the term parsley at Pixabay yields a nice photograph of a parsley tree:

URL: https://pixabay.com/photos/parsley-tree-food-healthy-nature-741996/

I download and open it in GIMP in order to use the tool color picker for setting the foreground color, double click the foreground color box and finally copy its HTML notation⁴. Alternatively, I would directly research images with my favorite color by using the color name to find images and copy the color value as described above.

Applications such as Paleta allow to directly extract the dominant colors from images and may be an automated option for absolute beginners.

Palette generation

There are online tools such as UI Colors you can use to generate a palette providing shades of your chosen color. The color shades can be exported into several formats. A handy visual reference is the SVG (Figma):

However, the Tailwind (HSL) export provides the values for Hue, Saturation, and Lighting to set the Hugo theme colors, for example. Thus, I copy and paste the text of each export option into single .css files in addition to the .svg (Figma) export:

Variation and conception

As I don’t use automatic palette extraction, I repeat the previously described process with the remaining colors in a Triadic or Tetradic color scheme to obtain three or four colors for variation. The aim is to achieve visual contrast while maintaining balance.

Each color should serve a distinct role in a visual application to provide user orientation. In addition, neutral colors such as black, white and shades of grey are neccessary to complete a full color concept.

Resources

Repository: https://dri.ven.uber.space/thisven/Identity/src/branch/main/colors