One of the most fun features of FavePersonal is experimenting with different color palettes.
We’ve made it easy to experiment with different colors and find a set that makes your site feel like it’s your own. No need to fiddle through dozens of color pickers, you can choose from full color palettes, preview them, and instantly apply them to your site.
You can browse through existing color combinations to find some initial inspiration. Use the tabs at the top (and the pagination links at the bottom) to navigate through the most popular, highest rated and newest palettes, or just look at a random set. Not seeing anything that grabs you? Try a search. For example, “desert rose” will bring back just what you might expect.
Whenever you see a palette you think looks interesting, just click the Preview button to see how it might look applied to FavePersonal. If you like what you see, you can Select it to move that palette to the selected colors area at the top of the screen. From there, just hit Save Changes, and the color palette will be applied to your site.
But maybe you’ve found a color palette that is almost right, but you want to tweak it a little bit. No problem. Once the palette is selected (shown at the top of the colors screen) you can customize it however you like.
The first thing you may want to experiment with is how the colors are applied to different areas of the FavePersonal theme. FavePersonal takes the color from each of the five positions and puts it into a specific areas in the site. This is done in a way that should provide an appropriate amount of contrast between different elements on the site (but you’ll see that some themes work better than others). By clicking and dragging on the colors to re-order them, you can have them applied to different areas of your site. Click the Preview button to see how things look after moving them around.
When you have the colors applied to the areas of the site in a way that you like, you might want to apply a few tweaks (or maybe you have an explicit color scheme you want to enter). No problem. Click on each of the colors to reveal a full color picker where you can make minor adjustments (I want a darker or lighter share of blue here) or just choose another color altogether. Then click Preview to get an idea how it might look, and Save Changes to apply it to your site.
Have you come up with an original color combination that you love? Add it to Adobe Kuler and you’ll be able to re-apply it to your site easily by using the search feature (you can search for your username or the name of your palette).
I think we’ve succeeded in providing a good way for folks to choose good looking color schemes without “needing to be a designer”, while also providing the fine grain control that other folks (like me) want for their site.
While we were creating FavePersonal it was fun to see our team experimenting with the Colors feature and really getting sucked in to it – it’s a great way to lose spend a few hours.
Don’t take my word for it though, go try it out for yourself with our online demo (click the Theme Admin button to log in).
I think it was two or three years ago that I first had the idea for using color palettes with a theme in this way. I was pretty sure it would work, but hadn’t really seen it done in the manner I was imagining. I started doing some prototyping and ran into a snag.
In order to apply a color palette to a design with (generally) positive results, you need to be able to reasonably predict the colors that will have contrast between them. When looking at color palettes from a number of sources, I found that they came through without any particular ordering of the colors.
Step one became coming up with an algorithm that would work to get the colors sorted in a reasonable fashion. This is not a trivial problem, but interestingly the more complex we attempted to make the solution, the worse things got. Eventually, after running a few different approaches against a test set of color palettes, the most simple and naive approach seemed to yield the best results.
Basically I took the numeric value of the first digit of the RGB values from the hex color, add them together to get a total numeric value for each color, then sort the colors by that value.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?php | |
| function cf_sort_hex_colors($colors) { | |
| $map = array( | |
| '0' => 0, | |
| '1' => 1, | |
| '2' => 2, | |
| '3' => 3, | |
| '4' => 4, | |
| '5' => 5, | |
| '6' => 6, | |
| '7' => 7, | |
| '8' => 8, | |
| '9' => 9, | |
| 'a' => 10, | |
| 'b' => 11, | |
| 'c' => 12, | |
| 'd' => 13, | |
| 'e' => 14, | |
| 'f' => 15, | |
| ); | |
| $c = 0; | |
| $sorted = array(); | |
| foreach ($colors as $color) { | |
| $color = strtolower(str_replace('#', '', $color)); | |
| if (strlen($color) == 6) { | |
| $condensed = ''; | |
| $i = 0; | |
| foreach (preg_split('//', $color, -1, PREG_SPLIT_NO_EMPTY) as $char) { | |
| if ($i % 2 == 0) { | |
| $condensed .= $char; | |
| } | |
| $i++; | |
| } | |
| $color_str = $condensed; | |
| } | |
| $value = 0; | |
| foreach (preg_split('//', $color_str, -1, PREG_SPLIT_NO_EMPTY) as $char) { | |
| $value += intval($map[$char]); | |
| } | |
| $value = str_pad($value, 5, '0', STR_PAD_LEFT); | |
| $sorted['_'.$value.$c] = '#'.$color; | |
| $c++; | |
| } | |
| ksort($sorted); | |
| return $sorted; | |
| } |
I think this could be refined a little further, perhaps adding a slight bias towards blue or green over red in order to better handle cases where you might prefer certain colors that are close in “brightness” to be considered “darker” than others.1 For FavePersonal I decided that it was better to handle this by allowing people to drag and drop to re-arrange the colors in the palette instead.
We’ve released the colors feature we created for FavePersonal on Github. It’s a designer/developer tool as it’s not something that works as a stand-alone plugin, but it works quite nicely when integrated as a feature of a theme.
- Enhancements welcome, fork away! ↩
This post is part of the project: Personal Theme. View the project timeline for more context on this post.