Working with Colors
Once you're comfortable using the Style Editor, you can customize your website using any color under the sun. You can change the colors of your fonts, buttons, links, background, horizontal lines, and more. But how do you go about choosing and setting colors in the first place?
Changing color in Style Mode
To pick the color of a certain part of your website, head over to the Style Editor and click on the
part of your website you'd like to change. Keep in mind that any change you make to one type of element will apply to all of those elements. In other words, if you set the
color for one Button Element, it will apply to all the buttons on your website. This keeps your site looking consistent and means you don't have to change them all one by one.
The Jimdo Style Editor comes with 64 preset color options in the color palette on the left. You can choose from any of these by clicking on the color and then pressing "Choose," or you can customize your colors using the color picker on the right (see below for instructions on setting custom colors).
Transparency and opacity
In addition to setting colors, you can also use the Style Editor to make something transparent or change its opacity—in other words, you can set how "see-through" it is.
- Transparency: Anytime you see the white and grey checkered box, that means the object will be transparent. You might choose this option when you style your Navigation or Content areas (say, if you just want the text to show but don't want a background color). You could also make the background of a Button Element transparent.
Opacity: Opacity works on a sliding scale from 0 (completely invisible) to 1 (completely visible). Use the slider to adjust.
In the examples below, the blue Navigation menu has an opacity set to .66, allowing the background image to show through. The bottom example has an entirely transparent Navigation menu.
When making objects opaque or transparent, remember to adjust your font color to keep the text visible against your background. In the example below, we've changed the font to black.
Choosing colors for your website
Color is in the eye of the beholder, so there's no right or wrong answer here. If you're not sure of where to start, we recommend choosing a primary and an (optional) secondary color, and using those throughout your website in addition to good ol' black, white, and grey.
In the Jimdo websites below, the one on the left uses pink as its primary color, along with black, white and grey. The one on the right uses turquoise and light green, mirroring the colors in its logo.
It's best to choose just a couple of colors and use them again and again throughout your site. That will give you a consistent, polished look.
Where to find colors and color inspiration
Colors are known to evoke different kinds of emotions. So you might start by picking colors depending on your brand and the mood or message you want to communicate. For more on how people react to different colors, check out The Psychology of Color in Web Design.
You can also pick colors simply based on what you like best, or on the brand colors you're already using in your logo, business card, etc.
There are many free online tools that can help you pick colors, or identify a color you already like. Here are some of our favorites:
- Adobe Color CC: This color wheel tool can help you choose complementary colors and also match colors from an image you upload.
- Pictaculous: Upload an image and this program will spit out a color palette to match.
- COLOURlovers: Browse thousands of palettes created by fellow color enthusiasts, and copy ones that you like.
- ColorHunt: They post a new palette every day.
- ColorZilla: This browser extension is a color picker that you can use on any website you see. It's basically a way to look under the hood and see which colors other websites are using.
Once you choose a color, how do you recreate it on your website?
You've got a color (or a few) that you like—great! Now how do you get that exact color to show up on your Jimdo site?
1. Find the RGB value and/or hex value
When you see a color you like, you'll need to find the unique number that identifies it. In the web world, each of the zillions of colors out there has a code (or "value") that lets your computer know exactly which color you're talking about. Much more precise than saying "It's sort of a light greenish blueish."
Once you locate this code, you hold the key to replicating this color anywhere on your website (and in other graphics software to boot).
There are actually two different color codes that you can use with your Jimdo site:
RGB Value | RGB Code: This will be three different numbers that specify the exact amount of red, green, and blue that make up a color. It will usually look something like RGB
(26, 119, 127).
- Hex Value | Hex Code: Your color's hex code will be a six digit alpha-numeric code, something like E82C0C. It will sometimes appear with a # sign in front of it.
In all of the color tools listed above, you'll be able to grab the RGB value or hex value when you click on the color you've selected. Copy the number and paste it somewhere safe so you can find it later on.
2. Paste the RGB or hex value into the color picker in your Style Editor
Once you have your color's code somewhere safe, switch over to your website and open up the Style Editor. Click on the part of the website you want to change, and then click on the color box in the top toolbar to open up the color menu.
Then, simply paste the hex value or type the RGB code into the box (see below).
Find the RGB and/or Hex Code...
...and type it into the Style Editor on your Jimdo site.
If you paste the hex code into the Style Editor, you'll see that the Jimdo system will automatically convert it to RGB values.
Once you've set that color, it will appear at the bottom-left of your color palette so that you can select it again and again for different parts of your website.