A Tour of the New Color Palette Editor

UPDATE (12/11/2015):  The following info works on Silver, Gold and Platinum Membership Plans .

Sorry, there is no way to Clone a Color Scheme if you are an Intro Plan member.


A couple of weeks ago, we showcased six new color palettes that are available for your FASO website.  What we haven't talked about yet is our new awesome visual color palette editor that lets you create your own color palettes visually in real time.  You can also start off with one of our FASO color palettes and change it to your heart's content until you create your own palette that is perfect for displaying your art.



To get started, click the design button in the upper navigation bar on your FASO control panel home page.





Then, click the link that says "Choose or Create a Different Color Palette".





You'll see a list of the color palettes we have available from oldest to newest.  If you'd like to reverse the order, click the link that says Show Newest.


For this article, I'll be playing around with the new Summer color palette.  You can't edit our original palettes directly (or you would change them for everyone who uses them!) so here's how to copy (we call it "clone") and subsequently modify one of our standard palettes:  


First, click the link that says "Clone."  This makes an exact copy of the color palette that you will be free to modify as you wish.





One of the first things you'll probably want to do is give your new color palette a different name.  






In the new visual color palette editor, we've broken all the major components of your website down into segments.  Notice the plus signs in each segment - clicking the plus sign will open up that segment into a dropdown so that individual features can be edited.  We've also added each corresponding feature to this page so that you can see the changes when you make them in in real time.  





With the segment open, you can see the individual color codes for each component along with a sample thumbnail of the color.  Looking around the page, you should be able to correlate between the feature and where it shows up on your site.




Notice the new palette and plus signs...we were hearing that the old way of editing the palette wasn't necessarily intuitive so we added symbols and separated the color editing options - a color palette to let you edit within the current color scheme and a plus sign to add a completely different color into the current clone you're working on.





If you're simply wanting to tweak your color scheme just a bit, you can click on the hex code (that six digit code in the box - in the example below, it's #D4D0C8) or the colored thumbnail or the palette symbol and a small palette of the colors used in this particular color scheme will appear.




You can see in the image below the background is a sand color but what if I wanted something a little more dramatic?  





Simply click on another color in the color palette, in this case I've chosen a purple/grey color, and the color scheme will change automatically.  




Voila!  A dramatic change that still compliments the color scheme in place without having to try to find the "right" color in a rainbow of choices.  This feature makes it quick and simple to make the quick changes that will make a color scheme uniquely yours.


However, if you're wanting something not currently available in that particular color palette, we have yet another option for you.  


Get into the color editor the same way as described above.  When you're ready to begin editing, click the plus sign and the full color palette editor opens up.   A spectrum bar appears on the side to help you select your base color.  By selecting a color choice in the spectrum, the bigger window shows the various color shades within that realm.  So, if I wanted to change my page background to a blue, I'd click in the blue section to see the color options.  Then, I would click in the big window on the exact color shade I wanted.





In the image above, the background is a stone/grey color.  The image below shows that I've changed it to an entirely new color simply by clicking on a new shade in the bigger window.  It will automatically change the hex code for you and the changes are reflected in real time.  This also adds your new custom color to the color palette so that you can use this same color on different segments of your site.





I recommend that you take your time and go through each segment, identifying where the colors change and really play with any ideas that you may have.  You can create as many clones of a color scheme as you want.  You can even make a clone of a clone, if you want.  None of the changes are saved to your site until you tell it to - this happens when you click the link that says "Apply changes to your site".  If you're not sure about a palette just yet or you want to create a new color palette to compare, simply click save changes and the new custom color is saved to your color palettes.  





Once you create a color palette that you love, apply it to your site in the same manner that you would if you were changing it to one of our pre-made schemes and you're good to go!




If you ever want to edit one of your custom color palettes, just click the link under your palette that says Edit Palette Visually (Beta) and you'll be back in the editor, ready to make changes.


We've also got another feature that may interest many of you...if none of our schemes are what you need for your website, you can create a scheme from scratch.


Click the design link in your navigation bar and then click the link that says Create New Color Palette.  


If you know the hex code you want, you can enter the hex code.  If not, click the colored thumbnail and start selecting your colors.  We'll then jump start a color palette for you.





Once you hit submit, you're taken to the color palette editor page where you can further refine your color choices.  All your color choices will be added to the palette, just like when you're tweaking one of our color schemes.




Be sure to save your changes!


We hope you enjoy working with the new editor and create a wonderful color scheme perfect for your art.  Artists' needs are as varied as the colors in nature and here at FASO, we're happy to help you let your colors shine.


Happy Creating!


14 Responses to A Tour of the New Color Palette Editor

vicki coe
via faso.com
How do I revert to my original palette?

via faso.com
Gee whiz thanks guys...but I think I'll stick with Brain-Surgery-1A,,,it's easier. Remember, I Am only a artist...

via faso.com

Control panel
Choose New color scheme
Pick your old color palette

via faso.com
I blew it,,, should have said,"I are only a artist".

Actually I did save it and when I get the time I'll struggle thru it. I think I already know what it'll look like. thanks folks for all you hard work . RonG

via faso.com
There are no definitions of the list of items to be changed..for example what is a hover..what is a hover..which link is which, etc.

Needs to be a bit more user friendly.

via faso.com
I love it - will save me hours! I did a lot of hit-and-miss trying to figure out what the different categories were called. Finally it occurred to me that my template might not use every choice listed.

Big thanks. I will play around with the designing format when I have more time.

via faso.com

Glad to hear that you're finding the tutorial helpful.

Have a good time with it!

via faso.com
When I click on the boxes to change my text color, it will not show me the + mark on each of the boxes?

via faso.com

Please open a ticket with support so that they can help you figure out why you can't see the plus signs.

via faso.com
I agree with Julie above. I don't understand all the names of the elements. I can figure out what is meant by background color, but I'm not sure about buttons and background.link.hover.

I'm also not sure how one names and saves a color palette. For example, I use Harvest. Could I tweak Harvest and name it "Clone of Harvest v.2" or something like that, and save it and then relocate it by that name? Where are your saved palettes stored?

All that said, I love the flexibility.

via faso.com
Is there a way to drop the shadow box border around my webpage?
Also, what are pagination and image asset styles?

Maisha kenyatta
via faso.com
I would like to make my website more interesting, with more color, and a better design. I would like to enter into a long term relationship with your company, so my website needs to be more attractive. I need your professional assistance.

Stephen Mercer
via faso.com
I love reading these posts by other artists. As a whole, most artists are not HTML-savvy, so it's fun reading about their experiences (e.g., "I'd rather do brain surgery".
That said, I'm impressed by the flexibility offered for editing color pallets. An experienced HTML user understands these things, but FASO makes it easy by providing menus and labels.

donald r britton
via faso.com
I'm afraid this template editing has a problem that is really common to introducing laymen (in IT) to interacting with the guys who can make the changes in the website. For instance, I see a number of categories (site heading, site heading background, etc) in which I can change the color pallet, but I don't know the names of those categories correspond to the areas on my site. When changes are made they don't always show up on the sample page adjacent to the editing panel. When you're designing this editor don't ask your colleagues in IT if it makes sense. Ask the people approaching it from the users position.

I know you've probably heard this before and I know I've said it before in other contexts, but it's a real challenge.