DIY Website Color Picker
Whichever website color picker you use, Keep It Simple!
The color scheme we’re building is to spice up the layouts we’ll build using Beaver Builder and these wire frames I made previously.
If your theme has a prominent color scheme try use that in your Beaver Builder pages or custom pages. If you don’t know what colors your theme uses, the ColorZilla extension for your browser is a good tool for finding colors on any web page.
My advice would be to use no more than three colors as well as black, white and shades of grey.
You will need…
- A primary color
- A secondary color
- An accent color
Use your primary color for the background colors of big bold text boxes etc.
Use your secondary color to add a bit of variation. For instance if you want two colored boxes side by side etc.
Use your accent color for buttons and calls to action that you want to really stand out.
You might be able to set the accent color for your whole site in the WordPress Customizer. Dashboard > Appearance > Customize.
The easiest way to choose colors for your Beaver Builder pages, or any other web project is to browse the styles on Adobe’s Color website, its a great website color picker.
If you have a logo you can use the Adobe Color site to find a color palette that matches your logo.
What colors do the big guns use?
If you want to see what other businesses are using for their color schemes have a look at Brand Colors they’ve listed dozens of color schemes used by big brands. Scroll through business colors used by brands ranging from Amazon and Adobe all the way to YouTube, Zapier and Zendesk.
Go to the Brand Colors website then hover over a color to see the hexadecimal code
List of colors by name
If you don’t want to use the hexadecimal codes to name your colors you can use names such as antique white or aqua marine. This website lists 500 colors by name and hexadecimal code.
Whatever you do, please keep it simple. Three colors plus black, white and grey is an ideal way to start.
Dribbble
Dribbble is a great place to see artwork and find the color scheme that the artist used.
- Go to Dribbble.
- Select a piece of art. (A pop-up opens)
- Look for the color palette on the right of the artwork.
- Hover over the color palette to reveal the hexadecimal code.
- Or download the .aco file to use in Illustrator or Photoshop.
My color palette
I made this color palette using Rafal Tomal’s Photoshop color palette.
