Color your Website with Our New Color Picker

Designing with Wix | June 7th 2010

Color Your Wix Website

The idea behind Wix is to give you full control of your Flash website. While Wix provides you with a selection of great templates to get you started, how you design and style your website is up to you. Now that we released a brand new color picker, you have even greater control of your website’s design. Let’s discuss some of things you can do with this new feature.

What’s in a Color

You might be asking yourself: how exciting can choosing a color be? Well, let me tell you: you’re in for a ride. With the new color picker, creating a color scheme can be one of the most creative, challenging and fun parts of web design. So let’s roll up our sleeves and get to work.

Color Picker 101

Choose any graphic object in the editor and click “change color” (alternately, click “color” on the bottom menu bar). The “Fill Picker” box will pop up. This box consists of three options: Solid colors, gradient (a transitional blend between two colors or more) and image filling. You can switch between them using the three tabs on top of the filler.

Solid color - Choose a color from the color palette (you’ll notice the color of the object automatically change). The three bars on the left allow you to tweak the hue, brightness/darkness and saturation values.

The Eyedropper tool is useful for picking a color that already exists in your website and saves you the trouble of trying to reconstruct the exact code. Just click on it, the mouse icon will change; use it to sample your chosen color.

Opacity - controls the transparency of the object.

Wix Color Picker 101

Gradient color - Many people are weary of using gradient in fear of being sucked into a loop of adjusting and readjusting color. But gradient is in fact fairly simple to use and is totally worth the investment. If you take a quick look at these great examples of using gradient effects in web design, you’ll see why getting friendly with this feature can reap great dividends.

Gradient is the middle tab in the “Fill Picker”. Here you can choose transitions between two or more colors. Notice you can alter between linear or radial color transitions.The color bar in the middle represents the two colors. In order to change colors click on the small square and choose a color. To add another color click on the top of the bar: a plus sign will appear.

When you choose the gradient option a square appears on the object with two arrows. Using these two arrows you can scale, stretch or rotate the gradient.

Wix Color Picker 101

A fun way of using the gradient is choosing one of the colors as transparent. Placing the colored object above a photo will give it a cool smooth effect.

Wix Color Picker 101

Image fill - Click on “choose image”. You can add images from the Wix Media Library or upload your own. You can then choose between presets to either show the true size of the image or fit to the graphic element.

Wix color picker 101

Some great ways to use the “Color Filler”:

  • Filling a graphic element such as lines or arrows and giving them an interesting texture.
  • Filling page parts such as menus and buttons.
  • Personalizing your widgets: players, comments, contact forms (notice that not all widgets allow color transformation).

Need help with the color picker? Check out our dedicated help page.


Tagged with:
1 comment

Leave a Reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>