Let's accept this if there is something that can haunt a Front-end Web Developer before starting any new project then that is Selecting the appropriate color scheme unless you are among those fortunate ones (Designers).
If you are like me who always find it difficult to select Color Palette for the projects. Then this 4 Steps Guide will help you. Without any further ado let's jump into the guide:
Step 1
Choose a Base color: This will be the theme color for your project. Some points to keep in mind while selecting a base color.
- Select it from any given requirements by the client
- Select it from the *established logo*of the company
- Don't go for the business Competitors’ colors
- Think of the target audience
- If you are still struggling you can go for any random color Remember no color is bad color if combined properly and used carefully with other colors.
- Or you can refer to these sites : Awwwards, Designinspiration
For the sake of an example, we will take #30c9e8
Now we will make Color Palette around this color.
Step 2
Find a Complementary color: This color will mostly be used for links, buttons, CTA. This will help user to notice the important section of the website clearly.
- Go to Paletton
- Enter your Base color
- Toggle on Complementary color
- You will find a new color on the right side of the screen copy the HEX number from there.
- and use it as complementary color in your project.
Color palette:
Step 3
Select Harmonious color: Harmonious colors are those colors that sit next to each other in the color wheel.
- Create two shapes and fill them with #424242 and #fafafa
- Insert a color fill layer above your two shapes
- Change that fill to your base color (#30c9e8)
- Set the blending mode to overlay, and bring the opacity right down to between 5 and 40% (in the example below, it’s set at 40%)
- Use the color picker and copy your new values
Color palette:
Step 4
Add White color to your palette: If you go through any website then you will find that they all have used white color in one way or another for their website. Because it perfectly balances the overall contrast of the theme.
Final palette:
Hurrah!
Our color palette is ready. Some points to remember:
- Selection of colors, design is all about creativity, and creativity doesn't have hard-and-fast rule. So give wings to your imagination and creativity and Let the work speak for itself.
- These were some of the basic rules to get started with if you are struggling to find the basic color palette.
- You can use as many colors as you want in your color palette. But we know With great power comes great responsibility. So why go to 6-7 colors if you can do it in 4-5 colors.
Simplicity is the key to brilliance.
- Always keep your audience in mind while selecting the colors because ultimately they are on the receiving end.
That's all for this blog. Do let me know if this was helpful.
Also, do share your feedback. Meet you in the next blog. Until then:
Keep learning, Keep moving
Reference:
Top comments (0)