- \n
- Three simple strategies for using color on your website<\/li>\n
- Where to find colors you like and how to find their exact \u201ccolor code\u201d<\/li>\n
- How to apply that color code to your website<\/li>\n
- Examples of other Jimdo websites using color in easy ways<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n
\nThink color pairing, not color palette<\/h2>\n
Many articles on color and web design direct you on how to create a color palette entirely from scratch, using color theory, color wheels, and the like. In this article, I\u2019m going to steer clear of that approach.<\/p>\n
First of all, because it\u2019s unnecessary \u2014there are tons of other ways to find good colors for your website that don\u2019t involve a deep dive into anything with the word \u201ctheory\u201d in it.<\/p>\n
The second reason is that creating a color palette from scratch often results in too many colors, especially if you\u2019re a beginner designer. For most purposes, you really only need at most two or three colors on your website. They will be much easier to manage and use well if you aren\u2019t trying to juggle too many.<\/p>\n
If you\u2019re enjoying playing with color and want to learn more, there are lots of great design resources<\/a> that can go deeper. For this article, we\u2019ll start with the basics.<\/p>\n
<\/p>\n
Create your website<\/a><\/div>\n<\/p>\n
Choosing the right colors for your business<\/h2>\n
A big part of selecting colors is choosing something that you personally like. It\u2019s also a good idea to think about the emotions that certain colors convey, and whether or not those fit with your website\u2019s intended message. Some colors fit better to bright and fun personal blogs<\/a>, meanwhile many professional websites<\/a> tend to have milder or more “serious” tones. Though none of these color rules are carved in stone, they can help you narrow down your choices.<\/p>\n
Flip through the slideshow below of Jimdo websites to see different colors in action.<\/p>\n
\n\t\t\t \n\t\t\t\t![\"\"](\"https:\/\/i0.wp.com\/www.jimdo.com/blog\/wp-content\/uploads\/2017\/04\/1476225052.png?fit=1439%2C778&ssl=1\")
<\/a>\n\t\t\t<\/div>\n\t\t\t\t\n\t\t\t\tRed evokes energy, movement, and love\u2014but can also have some negative symbolism like anger and danger. Used sparingly, red can be a lot of fun. In this Jimdo website, it shows a branding agency that\u2019s edgy, strong, and maybe even a little rebellious. \n\t\t\t\t<\/figcaption><\/figure> \n\t\t\t \n\t\t\t\t![\"\"](\"https:\/\/i0.wp.com\/www.jimdo.com/blog\/wp-content\/uploads\/2017\/04\/1476225052-1.png?fit=1438%2C782&ssl=1\")
<\/a>\n\t\t\t<\/div>\n\t\t\t\t\n\t\t\t\tVibrant and fun, orange often signifies excitement, warmth, and even ambition. Here it\u2019s put to good use on the Freedom & Spirit website. Just remember that orange can also denote a warning or caution, so it\u2019s best to use it in small doses.\n\t\t\t\t<\/figcaption><\/figure> \n\t\t\t \n\t\t\t\t![\"\"](\"https:\/\/i0.wp.com\/www.jimdo.com/blog\/wp-content\/uploads\/2017\/04\/1476223914.png?fit=1440%2C775&ssl=1\")
<\/a>\n\t\t\t<\/div>\n\t\t\t\t\n\t\t\t\tCheerful, hardworking, and energetic\u2014those are just some of the words that yellow brings to mind. It\u2019s hard not to feel a little better after looking at this sample Jimdo website.\n\t\t\t\t<\/figcaption><\/figure> \n\t\t\t \n\t\t\t\t![\"\"](\"https:\/\/i0.wp.com\/www.jimdo.com/blog\/wp-content\/uploads\/2017\/04\/1476224032.png?fit=1438%2C780&ssl=1\")
<\/a>\n\t\t\t<\/div>\n\t\t\t\t\n\t\t\t\t Green is harmonious and calming, and generally signifies nature, health, or even wealth. Because of its associations with the great outdoors, it can be a good match for vacation websites like this one. \n\t\t\t\t<\/figcaption><\/figure> \n\t\t\t \n\t\t\t\t![\"\"](\"https:\/\/i0.wp.com\/www.jimdo.com/blog\/wp-content\/uploads\/2017\/04\/1476224032-1.png?fit=1440%2C778&ssl=1\")
<\/a>\n\t\t\t<\/div>\n\t\t\t\t\n\t\t\t\t There\u2019s a reason why so many business websites gravitate towards blue. It traditionally signifies competence, trust, and security. On the Rosetta Shop website it matches the science and space theme, and their fun font keeps the color from feeling boring. \n\t\t\t\t<\/figcaption><\/figure> \n\t\t\t \n\t\t\t\t![\"\"](\"https:\/\/i0.wp.com\/www.jimdo.com/blog\/wp-content\/uploads\/2017\/04\/1476225052-2.jpg?fit=1416%2C709&ssl=1\")
<\/a>\n\t\t\t<\/div>\n\t\t\t\t\n\t\t\t\t Purple usually evokes creativity, imagination, and calming. It\u2019s also the color of royalty and can feel luxurious. Purple is not as common in web design so if you\u2019re looking for something unique, it’s a fun choice. \n\t\t\t\t<\/figcaption><\/figure> \n\t\t\t \n\t\t\t\t![\"\"](\"https:\/\/i0.wp.com\/www.jimdo.com/blog\/wp-content\/uploads\/2017\/04\/1476224241.png?fit=1439%2C777&ssl=1\")
<\/a>\n\t\t\t<\/div>\n\t\t\t\t\n\t\t\t\t Teal or turquoise often brings to mind emotional balance or serenity, so it\u2019s not surprising to see it in use on this wellness website. \n\t\t\t\t<\/figcaption><\/figure> \n\t\t\t \n\t\t\t\t![\"\"](\"https:\/\/i0.wp.com\/www.jimdo.com/blog\/wp-content\/uploads\/2017\/04\/1476224133.png?fit=1429%2C776&ssl=1\")
<\/a>\n\t\t\t<\/div>\n\t\t\t\t\n\t\t\t\t Pink is sophisticated and soothing, though it can be hard to separate the color from its more feminine tradition. By pairing it with black and white, the Zebrure website feels modern and energetic, with just a hint of softness. \n\t\t\t\t<\/figcaption><\/figure> \n\t\t\t \n\t\t\t\t![\"\"](\"https:\/\/i0.wp.com\/www.jimdo.com/blog\/wp-content\/uploads\/2017\/04\/1476224366-1.jpg?fit=1440%2C770&ssl=1\")
<\/a>\n\t\t\t<\/div>\n\t\t\t\t\n\t\t\t\t Brown conveys ruggedness, steadiness, and nature. This means, (rightly or wrongly!) that it\u2019s typically associated with more masculine websites. Of course, a bearded lumberjack helps send that message home on the GrillGold website. \n\t\t\t\t<\/figcaption><\/figure> \n\t\t\t \n\t\t\t\t![\"\"](\"https:\/\/i0.wp.com\/www.jimdo.com/blog\/wp-content\/uploads\/2017\/04\/1476224414.jpg?fit=1440%2C802&ssl=1\")
<\/a>\n\t\t\t<\/div>\n\t\t\t\t\n\t\t\t\t Grey is formal, timeless, and luxurious, which makes it a great match for the Seidenweiss shop. It won\u2019t reach out and grab your attention, but then again, it doesn\u2019t need to, since the overall effect is sophisticated and professional. \n\t\t\t\t<\/figcaption><\/figure>\n\t\t<\/div>\n\n <\/h3>\n
Reflect your brand personality<\/b><\/h3>\n
Defining your brand personality helps the right people find you, so make sure to evoke the right feeling through color psychology. If you\u2019re not sure which colors paint the right picture, try this interactive color quiz<\/a> from online creative platform 99designs. Depending on the personality you want to emulate, adjust the slides on values from tone, energy, and age and more for an intelligently matched option. Common color choices vary by industry as well, so check out their research on the most common choices in industries from marketing, to real estate<\/a>, to retail and more.”<\/p>\n
Three website color strategies for beginners<\/h2>\n
There are as many ways to approach colors as there are, well, colors in the rainbow. If you\u2019re a web design beginner, I suggest starting with one of these strategies:<\/p>\n
1. Use one bright color with black and white<\/h3>\n
Think of color as a spice for your website\u2014like any strong flavor, a little goes a long way. Bright colors grab attention but they also consume your visitors\u2019 mental energy<\/a>. If you\u2019re new to using colors, one of the best approaches is to keep most of your site black and white, with one accent color that really pops.<\/p>\n
For example, look at how the Unger Music website<\/a> uses the same orange hue in their logo, background, horizontal lines, and navigation menu, while the rest of the site is predominantly black and white. The result is professional and sophisticated, rather than over-the-top.<\/p>\n
The same goes for the Retropot website<\/a>. The red accent color helps the black and white graphic mugs stand out, and makes the site more fun and interesting to look at. Since it’s a bright red, they use it sparingly.<\/p>\n
![\"\"](\"https:\/\/i0.wp.com\/www.jimdo.com/blog\/wp-content\/uploads\/2017\/04\/website-using-orange.png?resize=328%2C514&ssl=1\")
![\"\"](\"https:\/\/i0.wp.com\/www.jimdo.com/blog\/wp-content\/uploads\/2017\/04\/website-using-red.png?resize=328%2C514&ssl=1\")
<\/p>\nWhen you pick an accent color, here’s a few places you might use it on your website:<\/p>\n
- \n
- \n
- \n
- Headings<\/a><\/li>\n
- Hyperlinks<\/a><\/li>\n
- Navigation Menus<\/a><\/li>\n
- Buttons<\/a><\/li>\n
- Horizontal Lines<\/a><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n
2. Use a primary and a secondary color<\/h3>\n
If one color doesn\u2019t seem like enough, choose two. But rather than using both colors equally, the trick is to choose one as your \u201cprimary\u201d color and the other as your secondary, meaning that you\u2019ll use it much less often. That way the colors complement rather than compete with one another.<\/p>\n
Take a look at the two Jimdo websites below. They’re very different websites, but they’re actually using similar colors.<\/p>\n
In the first website, notice how Laur\u00e8ne uses a background image that echoes the turquoise and pink colors in her logo. Then, she used the turquoise (her primary color) in her navigation and Heading Elements too. Over the rest of the site, pink makes an occasional appearance to tie it all together, but it doesn\u2019t appear as often as the turquoise.<\/p>\n
![\"jimdo](\"https:\/\/i0.wp.com\/www.jimdo.com/blog\/wp-content\/uploads\/2017\/04\/website-using-turquoise-and-pink.png?resize=700%2C376&ssl=1\")
<\/p>\nKai uses a similar approach on his band’s website. Most of the site is in black and white, and they use turquoise for their navigation menu and Heading Elements. The pink makes only an occasional appearance in Button Elements and in their Blog Display Element. Using the pink sparingly means that when they do, it really pops out.<\/p>\n
![\"Jimdo](\"https:\/\/i0.wp.com\/www.jimdo.com/blog\/wp-content\/uploads\/2017\/04\/band-website-using-turquoise-and-pink.jpg?resize=700%2C377&ssl=1\")
<\/p>\n3. Present your colors through photographs<\/h3>\n
Most of the color changes we\u2019re talking about here you can do in the Jimdo Style Editor, by changing your background colors, headings, etc. But if you\u2019re into photography, you can also use the photos on your website to tell your color \u201cstory\u201d and complement your brand identity.<\/p>\n
For example, take a look at the Le Velo website, below. Bike shop owner Senad has created what is essentially a black and white website\u2014his background is white and his text is black. The color on his website comes entirely from his photographs, which all share the same blue\/green and brown hues. Cool, right?<\/p>\n
![\"Jimdo](\"https:\/\/i0.wp.com\/www.jimdo.com/blog\/wp-content\/uploads\/2017\/04\/bike-shop-website-with-turquoise-and-brown.jpg?resize=700%2C745&ssl=1\")
<\/p>\nIt takes a bit of discipline to use consistent color in your photographs. To pull it off, it helps to know how to edit your photos or at least put consistent filters on them.<\/p>\n
Here\u2019s one more example of a Jimdo website that\u2019s using a three-color palette and incorporating those colors through all her photography, too. I love how artist Sami Garra uses a distinct green, pink, and yellow throughout her site. Every photograph references at least one of those colors. Check out her About Page too, and you\u2019ll see that even her hair color and real-life workshop use those colors too! Talk about dedication!<\/p>\n
![\"Good](\"https:\/\/i0.wp.com\/www.jimdo.com/blog\/wp-content\/uploads\/2017\/04\/artist-s-website-using-three-colors.jpg?resize=700%2C1001&ssl=1\")
<\/p>\nOk, so you don\u2019t actually have to change your hair color to match your website (if you do, please send us a photo!) But looking at these examples, hopefully you can get a sense of how powerful color can be when you use it consistently, even if your preference is to just use a little splash of color here and there.<\/p>\n
Where to get ideas for website colors<\/h2>\n
Now that you have a better idea of your color strategy, the fun part is actually picking the exact color you\u2019d like to use. The nice thing is that color inspiration is all around you. Here are some ideas:<\/p>\n
What’s a color code?<\/b> When you see a color you like, you can use it on your Jimdo website by finding that color\u2019s RGB or hex value<\/strong><\/b>. These are unique codes that identify the exact color you\u2019re looking for, and they\u2019ll usually look something like RGB (26, 119, 127) or #E82C0C. Once you have the color code, use Jimdo\u2019s Style Editor to recreate the color by pasting the code into the color selector. <\/div>\nLook at material and brand colors you already have<\/h3>\n
If you already have a logo, product packaging<\/a>, or a color that you use consistently in your work, that will be a natural fit for your website. Maybe it\u2019s a color you use in one of your products, or in the case of Dotty About Ice Cream<\/a>, maybe it\u2019s the color of your vintage ice cream truck!<\/p>\n
The color for the Dotty About Ice Cream website comes straight from the vintage pink ice cream truck.<\/p>\n
![\"choose](\"https:\/\/i0.wp.com\/www.jimdo.com/blog\/wp-content\/uploads\/2017\/04\/website-using-pink.jpg?resize=700%2C552&ssl=1\")
<\/p>\nIf you already have a professionally designed logo, your designer can tell you what your color codes are. Or, you can upload your logo file to a free program like Color Code Picker <\/a>and it will tell you the colors in your logo.<\/p>\n
Choose a color from a photograph you like<\/h3>\n
Most Jimdo templates have space for a full-width background or header image. If you already have the perfect photograph in mind (or have found one on the many free stock photo websites<\/a> now available), an easy next step is to choose colors to match it.<\/p>\n
![\"choosing](\"https:\/\/i0.wp.com\/www.jimdo.com/blog\/wp-content\/uploads\/2017\/04\/website-using-yellow.jpg?resize=700%2C297&ssl=1\")
<\/p>\nIn this sample website, we changed the menu bar and buttons to match the yellow tree in the background photograph.<\/p>\n
To match the color in a photograph, upload an image file (or your logo file) to Adobe Color CC<\/a> and this free site will generate a color palette to match. Move the circles over the exact part of the image you\u2019d like to replicate. Here I\u2019ve uploaded a stock photo from Unsplash to the Adobe program to see if I can find the color of that beautiful green typewriter.<\/p>\n
![\"Which](\"https:\/\/i0.wp.com\/www.jimdo.com/blog\/wp-content\/uploads\/2017\/04\/adobe-color-cc-to-match-colors-from-a-photograph.png?resize=700%2C403&ssl=1\")
<\/p>\nFind color inspiration on other people’s websites<\/h3>\n
One of the best ways to start designing your website is to browse other people\u2019s sites to see what catches your eye. If you see a color you like, find out the exact color code using a free tool like ColorZilla<\/a> or EyeDropper<\/a> in Chrome or Firefox. Install it in your browser and turn it on when you want to take a sneak peak under the hood of another website.<\/p>\n
![\"Using](\"https:\/\/i0.wp.com\/www.jimdo.com/blog\/wp-content\/uploads\/2017\/04\/using-colorzilla.jpg?resize=700%2C464&ssl=1\")
<\/p>\nThe ColorZilla browser plugin will tell you exactly what color your favorite websites are using. Just drag your mouse over the color you like, and it will give you the color code at the top. Here it shows that the yellow on Jimdo\u2019s website is #FCEC59.<\/p>\n
Check out online color resources<\/h3>\n
There are lots of fun websites for color connoisseurs to share their favorite palettes and color combinations. Many of them provide the color codes so that you can copy the colors on your own site. Just remember that a lot of these sites will provide extensive palettes with 5-6 colors or more, which is probably more than you need. Just pick a couple from your favorite palette and start from there.<\/p>\n
![\"Jimdo](\"https:\/\/i0.wp.com\/www.jimdo.com/blog\/wp-content\/uploads\/2017\/04\/simple-website-color-palette.jpg?resize=700%2C454&ssl=1\")
<\/p>\nOk, you\u2019ve picked your colors. Now what?<\/h2>\n
Let\u2019s say you have picked one or two colors that you really love, and you have the unique color codes (either RGB or hex value) to go with them. (Wait, what\u2019s a color code? If you missed this step, go back to \u201cWhere to get color ideas\u201d above or check out this more detailed tutorial on how to find a color code<\/a>, because it\u2019s important for this next bit).<\/p>\n
Now you get to decide where you want to use this color on your website. In Jimdo\u2019s Style Editor, you can set the color of your text, links, menus, buttons, horizontal lines, and more. Almost every type of element has a color setting that you can adjust in the Style Editor, including Store Item Elements and Contact Forms.<\/p>\n
If you want to adjust the color of your Large Heading Elements, for example, open up your Style Editor and click on the Heading Element. You\u2019ll see the design options open in the black bar at the top of the screen. Click on the color box to open up the color menu. Then, enter your color code in the box highlighted in red below.<\/strong><\/b> If you type in the hex code, Jimdo\u2019s system will automatically convert it to an RGB code, but the results will be the same.<\/p>\n
![\"Using](\"https:\/\/i0.wp.com\/www.jimdo.com/blog\/wp-content\/uploads\/2017\/04\/adding-a-color-to-your-jimdo-website.png?resize=700%2C404&ssl=1\")
Enter your color code into the color picker.<\/figcaption><\/figure>\n Now that color will always appear in the bottom row of your color palette so you can use it repeatedly for different elements.<\/p>\n
Pro Tip:<\/strong><\/b> Want to change the color of your social media icons to match? Use a site like iconmonstr<\/a> to create free icons with your exact color code, and then upload them to your website as Photo Elements.<\/a><\/p>\n
<\/p>\n
Create your website<\/a><\/div>\n<\/p>\n
Set a color scheme for your entire website<\/h3>\n
If you want, you can repeat this step for each of the element types you\u2019d like to change. Or, you can do this faster by applying that color to your entire website at once. Here\u2019s the trick:<\/p>\n
- \n
- Open the Style Editor and toggle the Style by Element<\/strong><\/b> switch to the \u201cOff\u201d position.<\/li>\n
- When you do this, you\u2019ll see the option to select a Color Scheme<\/strong><\/b> for your entire website.<\/li>\n
- Click on the Color Scheme box, then enter your color code<\/strong><\/b> into the color picker like you did before.<\/li>\n
- Press Choose<\/strong><\/b>, and you\u2019ll see this color appear throughout your website\u2014in your navigation, footer, links, horizontal lines, and more. The exact places the color will appear depend on the template you\u2019re using, so give it a try and see what you think! If you like it, press Save. If you don\u2019t, just select Undo.<\/li>\n
- Once you set your Color Scheme, you can always flip the toggle switch back to the \u201cOn\u201d position and adjust individual elements<\/strong><\/b> as you like.<\/li>\n<\/ol>\n
![\"Color](\"https:\/\/i0.wp.com\/www.jimdo.com/blog\/wp-content\/uploads\/2017\/04\/choose-a-color-scheme-for-your-website.png?resize=700%2C383&ssl=1\")
Use the Style by Element switch to set a color scheme for your whole website<\/figcaption><\/figure>\n Pro Tip:<\/b> Want to play it safe to start? Start by changing the color of your Heading Elements, Horizontal Lines, Buttons, and maybe your Navigation Menu. That will add some fun color to your website without risking it being too overwhelming. Then, when you feel ready, you can try changing more elements and see how that looks!<\/div>\nColor, text, and contrast<\/h2>\n
Okay, the last thing to think about before you get started. When you\u2019re working with color, there\u2019s another factor to consider that goes beyond both aesthetics and emotions, and that\u2019s providing a good user experience for your visitors.<\/p>\n
Before you change your background and fonts to two colors that look nice together, make sure that there is still enough contrast between the two so that the text is still easy to read.<\/p>\n
The higher the color contrast between the text and the background, the better your readability will be<\/a>.<\/p>\n
![\"Contrast](\"https:\/\/i0.wp.com\/www.jimdo.com/blog\/wp-content\/uploads\/2017\/04\/website-text-contrast.jpg?resize=608%2C692&ssl=1\")
Make sure that the contrast between your background and your text is strong enough that text is easy to read. Some color combinations like red and blue are particularly difficult.<\/figcaption><\/figure>\n If black text on a white background doesn\u2019t appeal to you, you can still have some fun with colors, but ideally, it\u2019s best to stick with a dark font on a light background.<\/p>\n
- When you do this, you\u2019ll see the option to select a Color Scheme<\/strong><\/b> for your entire website.<\/li>\n
- Hyperlinks<\/a><\/li>\n
- Headings<\/a><\/li>\n
- \n