Paletton is an awesome web app that has the sole focus of generating color scheme ideas.
Sometimes when you’re starting a new project you might have an idea for how you want your web site to look. You might have even gone so far as to pick your images and decide on a layout.
But what color scheme should you follow?
Paletton has a literally endless supply of color combinations based on a color’s position in the color wheel.
However this seemlingly overwhelming possibilites can be just too much to decide where to start.
In this guide I will walk you through using the Paletton app to enable you to quickly generate a color scheme idea.
Start with a base color
The very least amount of information you need is to start with an idea for a base color.
You can just pick a color, random possibly from the Paletton interface. However a better ideas is to look at any content you are planning to put on the website to see if there is already a base color you can work from.
Places you might be able to look for a base color are:
- The company colors / brand if you are working for a client
- An existing company logo
- An image that is going to be used on the site
- Color based on feeling / moode
Once you picked out a color you will need to get it’s hex code to enter it in to the Paletton app.
If you are working with an existing image file such as a hero image or a company logo. You can use any program that has an eyedropper tool to pick out the hex code or use a browser extension to extract it.
If you are looking for stock photos and other images, check out out these 14 places to find quality images for your projects.
When you have the hex code of your color you can set this in the Paletton app in the bottom left hand corner under the Base RGB section.
Choose a color relationship
The next step is to choose one of the color relationships offered by Paletton; monochromatic, adjacent, triad or tetrad.
Monochromatic palettes are where the additional colors are made up of different shades of the base color. An example of when monochromatic palettes are useful is when you are trying emphasise the >message of the base color. In other words, if you are trying to convey a strong brand color or particular mood / feeling a monochromatic palette will amplify this.
Adjacent palettes are often found in nature and are pleasing to the eye. Using an adjacent palette is probably a good choice for most situations.
Triadic palettes take three main colors that are equally spaced on the color wheel. This creates a much more interesting and vivacious palette. If you are looking for bold stylings on your web page a triadic palette will add some extra impact.
Tetradic palettes use four colors from the color wheel arranged in to two complementary pairs. As the palette is made up of complementing colors, they tend to be very vibrant but possibly over the top especially when it comes to designing web pages.
Choose a Paletton preset
You might be happy with the current color scheme you now have and perhaps you are ready to export?
There are a few other tweaks you can do before you commit to the colors you have generated with Paletton. One of them being choosing a preset for the tone of the colors.
The preset menu in Paletton is probably a bit misleading – you would think that there are lots of pre-made color palettes that you can just start using. However, the presets available actually change the overall tone of the colors you selected in the previous steps.
This optional choice of using a preset isn’t essential but it can be used to enhance the color palette you currently have. For example, maybe the site you are building needs to be light and vibrant – choose one of the pale pastel prests. Or perhaps you are working on a project that needs to have intense colors – choose the dark or deep colors preset.
Make final tweaks
Before you finish up, you might want to make a few final tweaks directly on the color wheel.
This is done by selecting one an individual dot on the color wheel and moving it to the desired location. Gentle and gradual is the key here as you can easily completely change your overall color scheme with a small change.
Tip:It might be worth saving your palette before making any such tweaks. The easiest way to do this is to share the palette from the top left hand corner of the Paletton app. This generates a unique ID which allows you to come back to your palette with those exact settings.
Preview with example
One thing you can do as you are going along making any changes to your is check out the Examples tab at the bottom right of the Paletton app.
You can use this to try out your color scheme with a mock website to see how the colors look. You can also swap between light and dark styles and even generate different artwork styles.
Exporting
Once you are happy with your color palette, it’s time to get the CSS for it in your web page.
You could obviously try and get all of the individual colors yourself however Paletton provides a handy shortcut to get the hex or RGB codes you need.
If you open the Tables/Export tab at the bottom right of the app you will get a list of all the color codes.
You can then choose to export these as HTML/CSS/SASS/LESS to use in your project.
The only downside is the code generated is a little generic as you can see below.
/* CSS - Cascading Style Sheet */
/* Palette color codes */
/* Palette URL: http://paletton.com/#uid=55A0u0kcglL4Zvw8Eq6eXhmkwen */
/* Feel free to copy&paste color codes to your application */
/* As hex codes */
.color-primary-0 { color: #A9686D } /* Main Primary color */
.color-primary-1 { color: #F5CFD1 }
.color-primary-2 { color: #CB9498 }
.color-primary-3 { color: #87484C }
.color-primary-4 { color: #70282D }
.color-secondary-1-0 { color: #AD876B } /* Main Secondary color (1) */
.color-secondary-1-1 { color: #FBE5D4 }
.color-secondary-1-2 { color: #D0B098 }
.color-secondary-1-3 { color: #8A654A }
.color-secondary-1-4 { color: #724829 }
.color-secondary-2-0 { color: #875374 } /* Main Secondary color (2) */
.color-secondary-2-1 { color: #C4A5B9 }
.color-secondary-2-2 { color: #A27692 }
.color-secondary-2-3 { color: #6C3959 }
.color-secondary-2-4 { color: #592044 }
/* As RGBa codes */
.rgba-primary-0 { color: rgba(169,104,109,1) } /* Main Primary color */
.rgba-primary-1 { color: rgba(245,207,209,1) }
.rgba-primary-2 { color: rgba(203,148,152,1) }
.rgba-primary-3 { color: rgba(135, 72, 76,1) }
.rgba-primary-4 { color: rgba(112, 40, 45,1) }
.rgba-secondary-1-0 { color: rgba(173,135,107,1) } /* Main Secondary color (1) */
.rgba-secondary-1-1 { color: rgba(251,229,212,1) }
.rgba-secondary-1-2 { color: rgba(208,176,152,1) }
.rgba-secondary-1-3 { color: rgba(138,101, 74,1) }
.rgba-secondary-1-4 { color: rgba(114, 72, 41,1) }
.rgba-secondary-2-0 { color: rgba(135, 83,116,1) } /* Main Secondary color (2) */
.rgba-secondary-2-1 { color: rgba(196,165,185,1) }
.rgba-secondary-2-2 { color: rgba(162,118,146,1) }
.rgba-secondary-2-3 { color: rgba(108, 57, 89,1) }
.rgba-secondary-2-4 { color: rgba( 89, 32, 68,1) }
/* Generated by Paletton.com © 2002-2014 */
/* http://paletton.com */
You might therefore want to spend a little time reformatting this before you use them in your project.
Conclusion
Paletton is a great way to quickly generate a color palette for your next project.
With the above steps you can generate a useable palette within a few minutes.
Here is a summary of things to consider:
- What is my base color?
- Which color relationship best suits my site?
- Do I need have a light and smooth site or dark and intense?
Have you used Paletton to create any amazing color palettes? Share your Paletton URL below for others to see.
No comments:
Post a Comment