If you’re design-challenged and need some help coming up with a color scheme for your website, or if you’re a design pro just looking for another tool for your trade, the Paletton website can be a great place to go for inspiration and details for a cohesive look.
For those familiar with Adobe’s Kuler service, you’d be tempted to say this looks a lot like that. Yes, and no. It does allow you to choose your colors on a color wheel and select from some tried and true color combinations such as Monochromatic, Adjacent Colors, Triad, Tetrad, and Free Style.
However, is geared for website color combinations and adds a few more features that can be really handy. First is the inclusion of various shades of the main colors which can be quite useful in improving the user experience with hover and active state feedback. One of my favorite features can be found if you click the “Examples” tab at the bottom where a sample web page is displayed using the colors you’ve selected. You’ll get an instant feel for whether those colors are provoking the right look and feel for your site, or if they’re just plain garish. Both positive and negative combinations are available for review.
Also available under the Examples tab are Artwork and Animated options to see how the colors appear if used to design graphic elements. Further down the sidebar is an option for Vision Simulation too. It includes a simulation of various color blind scenarios (which can be quite educational), plus simulations of how the colors would appear with various display issues to account for non-optimal monitors and environments.
Finally in the Examples tab are some options to swap secondary colors if you want to keep the main color but change the use of the rest of the colors in the palette. You can also fine tune the colors based on hue, saturation, brightness, or contrast. If the colors are close, but not quite right, you can also play with the Randomize option, which isn’t really accurately named. Your “random” choices are Similar Colors Unlike Style, Unlike, Similar, and Unlike Colors Similar Style. I rather liked some of the results from this “randomization.”
When you’ve got everything just the way you want it, click on the Color Tables tab and you’ll be able to get all the details you’ll ever need about your selections. A Color List is presented first and has hexadecimal, RGB, RGB(%), and CMYK information. Plus – and this is huge – there are also options for HTML, CSS, LESS, XLM, and Text outputs. The HTML output is worthy of sharing with clients or including in a style guide. The CSS output is clean and clear and offers both hex and RGB options. These outputs are well done and will save you time (and errors) in converting these colors to code yourself. Very, very handy!
Bottom line, if you do any work with colors, Paletton should be your go-to source for getting things done. It’s fun, easy, and such a time saver!