You’re looking for your website to be professional and modern. Creating a color scheme is easy and will make your website look more professional. You don’t need to be a professional designer to put together 5 colors that will work well with each other. Let’s show you how we put together a proper hex-code web design color scheme for your designer or yourself.
Our favorite color scheme tool – Adobe Color
This is the go-to place when working with our clients to decide what style they are looking for. This website from Adobe takes a picture and shows the 5 key colors used to create it. This is especially helpful to see popular or trending color schemes that people have found pleasing to look at. https://color.adobe.com/trends.
We highly recommend using this part of the Adobe Color website as a starting point to get an idea of how colors play well together.
Whether you are designing yourself or giving us the direction you’d like to see, this output of hex color codes is exactly what a web designer needs to put together the website color scheme. Many WordPress themes will have areas that you can put in the website’s primary and secondary colors. When custom coding, you use the same hex codes in the CSS file to create the design.
Create a color scheme from a logo
If you have a logo or favorite image, then you can drop a file into this part of Adobe Color to get an output of hex colors to use for a website: https://color.adobe.com/create/image. As you can see with this example, we chose to keep our logo simple and only use 2 colors. This is an accurate reading of our exact hex colors used on the website. You can drag around the points to find different colors if you have a more complex logo.
Create a color scheme from one color
The color wheel can help you create a fully customized color scheme by providing different Color Harmony Rules, such as Analogous, Monochromatic, Triad, Complementary, etc. For this example, since we only have two colors in our logo, we’re looking for another color to use as a secondary color on the website. We will type in #0066CC to the “A” input of the color wheel and start to choose the different Harmony Rules to find related colors to our primary hex color.
Analogous
Complementary
Just these two give some great ideas for secondary website colors that work with our original color. For anyone who has taken an art class, you’ve heard these terms. You don’t need to be an expert artist to get some complementary colors for your primary with this website. Try it for yourself here: https://color.adobe.com/create/color-wheel
Explore color schemes by keyword
The final place to look at color schemes for your website is through the explore feature. You can type in a keyword and it will return example color schemes that are commonly used for those keywords: https://color.adobe.com/explore. This is another great area from Adobe to explore different color schemes that you can use for your website. Each of the searches will output the same 5-color color scheme with hex codes that you can use for your website.
Applying the color theme to your website
Once you have decided which color theme is going to best represent your company, it’s time to apply. 5 colors can be overwhelming on a website if not used sparingly. The key is to use the primary 2 colors with a 3rd accent with the 4th and 5th colors being used rarely.
If you need help applying the color scheme to your existing website or would like to re-do your website, then please feel free to contact us.