As web designers, one of the most decisive steps is the choice of colors in our projects. And if it is for our personal website, that statement rings even truer. According to the color we use, or rather, the range of colors, we can send a kind of message or another to our visitors. This is how important this decision is.
How colors affect our choices
For example, red is generally seen as the color of passion, while blue implies tranquility and peace. To illustrate this point, the colors that we would use for a website that sells baby clothes, and the colors we would use for a law firm are not the same. Choosing soft, pastel colors for a baby clothing shop might work perfectly, but not for a law firm. Picking the right colors helps us portray the image we want to show the world.
We’ve talked about choosing the right colors before, but this time we want to focus on some of the best online tools we have for the choice of colors. To top it all off, all of these online tools a free to use. We will divide this list into three different parts, to which you can reference according to your needs. These parts are the color circle, the color schemes, and the choice of the color of the font according to its background.
Playing with the Chromatic Circle
Surely on more than one occasion, you have used a combination of two colors that did not fit. In the spectrum of colors, there are many that work well together, while there are others who don’t work so much, to put it mildly. For this reason, a color wheel is a spectacular tool for understanding color relationships. Whether we are looking for an analog group or a personalized collection of tonalities, these tools with the color wheel will allow us to create the perfect palette.
Adobe Color CC
What many will know as Adobe Kuler, a few years ago was renamed Adobe Color CC It is one of Adobe’s free tools where anyone can generate color schemes from scratch. You can choose between many different color palettes, where you will surely find the one that best suits your needs. You can also save the different hexadecimal and RGB codes, or create a wheel based on a previously chosen image. Free porn gifs collection on the gifscollection.com.
Paletton
Paletton is a classic that all web designers should know. It has existed for years and remains a reference site. Simply add a base color and let the application do the rest. You can choose between different color relationships and how they should appear in the design. And for each color choice, you’ll find slight variations with variable contrast. This way, we can complete a palette with similar colors.
Choose your Color Scheme
It might be possible that you are in the situation of having a chosen color to use in your project. So, the next thing we have to do is find other colors that work in a complementary way. This way, you will configure the tone of your website in an appropriate way. And thanks to these three color palette generators, this task will be much simpler – in addition to being able to continue experimenting with other colors to create dozens of color palettes. These schemes are very useful, for example, if we are creating a style guide.
Canva
With Canva you can go a step further. What is initially a website to choose our color palette, suddenly becomes a wiki. When you add a color, the web offers a detailed description of it. To which you can add a complete palette with different tonalities. All this in addition to various color combinations you can use. Instructive as well as useful.
COLOURlovers
Personally, it is one of the webs that I use the most to inspire me in search of color palettes. Unlike the two other websites of this section, in COLOURlovers the color palettes are suggested and created by the users themselves. In addition, the community within the web itself votes for their favorite palettes, so you can see them almost in real time as trends are changing.
Coolors
Coolors is a great generator of color palettes. The true value is in the web browser application that automatically generates color schemes in an almost automatic way. You can mix and match colors, change settings, make adjustments for color blindness, or randomize your own schemes according to certain criteria. It is also available as an extension for Chrome, or even as an app for iOS.
Make your Text Readable
What good is it for your website to have the perfect colors, if the text can hardly be read? Color and accessibility is something that a lo0t of people have tried to perfect, and it is essential for anyone to have an acceptable and enjoyable browsing session on the web. These resources will ensure that your content is visible to any reader and that the texts have sufficient readability.
Color Safe
Color Safe is a tool that allows designers to take advantage of accessible color palettes, according to the WCAG Guidelines. To use it, you just have to select the background color, the typeface, the font size, its weight, and the WCAG standard. Next, you choose a color for the text. You can preview the color of the text in the top toolbar by clicking on a box and selecting the HEX or RGB value in the toolbar to copy it to the clipboard.
Accessible Colors
Accessible Colors works in a very similar way to Safe Color, it just has a simpler and cleaner interface. Some will appreciate this, as it will keep you away from unnecessary distractions. In a line, you will insert the necessary data: color, size, and weight of the typography. In another the background color. And that’s it. The website will return the results as we want it to be AA or AAA, following the guidelines of the WCAG.
The conclusion
As you can see, there are a few ways to make sure the colors on your website perfectly match the overall theme, and each other, while at the same time it meets certain standards of legibility and friendliness with respect to our visitors. All these tools allow you to have a huge base of color choices in your projects. Or simply be a commonplace to experiment.
Leave a Reply