Using Adobe Color to choose a color theme for your project
Choosing a color theme is a critically important step in design. When you are creating anything that is consumer-facing, you want to use colors that work well together and create engagement. To aid in this, Adobe has a great online tool that can be leveraged to create some really beautiful palettes: Adobe Color.
Some of the most useful tools here for you to find inspiration and come up with a theme are Color Wheel, Explore, and Trends.
Explore and Trends are somewhat similar, and both allow you to filter using key keywords, such as “ocean,” “warmth,” or “pizza.” Explore will allow you to see lots of like color palettes along with practical examples of their application in design. Trends lets you look through different categories of design and see some really creative palettes and themes, along with their application.
Color Wheel is where you really get to experiment and play around with different types of color schemes. After deciding on colors you like, it even shows the hex code for each one. To give a little context for the schemes, I’ll quickly touch on types of colors and their relation to one another on a color wheel.
In the following examples, I’ll be referring to the traditional RYB color model. It should be noted that modern color wheels (including digital design) use an RGB or CMYK model, and there is no universal standard.
Types of colors:
- Primary — Colors you can’t create by combining any two or more colors: red, yellow, blue
- Secondary — A combination of equal parts of two Primary colors: orange, green, purple
- Tertiary —A combination of a primary and a secondary color: red-orange, red-purple, yellow-orange, yellow-green, blue-green, and blue-purple
Now, back to the Color Wheel, the left sidebar has radio buttons to select different types of schemes, or Harmonies:
- Analogous — One root color and two neighbors on each side of it on the color wheel. Adobe’s Color Wheel uses a 5-color scheme, which grants a little more flavor in our palette. This scheme gives enough variation to create rich visuals, while staying close enough to one another so as not to be jarring. Some examples would be Instagram, Google Drive, or Calm
- Monochromatic — Different shades and tints of the same color. This is a calming, pleasant type of color scheme. Think Facebook, Venmo, and Youtube.
- Complimentary — Two colors that exist opposite of each other on the color wheel. This creates high contrast and tension, and is great for data representation such as graphs and charts, or buttons and graphic elements you want to stand out to the user.
- Split Complementary — Just like complementary, except that one of the complements is split into its neighboring colors. This scheme is like a mixture of analogous and complementary, and can be very powerful, because it melds the pleasure of analogous colors with the tension and contrast of a complementary element.
The next time you are building a front-end project, try Adobe Color or a similar tool to build a color palette that will make you stand out!
