4 Lesser-Known Online Tools to Play Around with Fonts and Colors

Typography and color are the soul of a web design. Without the two, your web page is a just scary skeleton. No one even wants to view it. Let alone staying for long. All page builders already include built-in features to make it easier for you to customize a font and set the color of every element. But still, as the designer, you are the one responsible of defining the font and color settings.

Often times, finding the right color combination for a website project is one of the most time-consuming parts. It’s because color is a part of the brand identity. The same thing applies to typography.

The selection of a font family — as well as the settings — will have a huge role in determining the visitors’ first impression.

Before applying a certain typography and color setting to your design, you can play around with external tools to find the perfect settings. We have compiled some free, useful online tools that you can use to play around with colors and typography settings before you apply them to your web page.

1. Codioful

If you love using gradient on your web designs, then you will love Codioful as well. Codioful is an online tool that allows you to create a gradient. You can use it to create whether a radial or linear gradient. It supports multiple colors, not limited to just two colors. You have a freedom to set the stop point of every color on your gradient — as well as other settings such as gradient angle and blend mode.

Once done creating the gradient, you can download it in three formats: JPG, PNG, and SVG. Also, the gradient you create will generate a CSS code — which you can add to your design using the custom CSS feature offered by your page builder plugins. If you use Elementor, you can read this post to learn how to create a gradient background consisting of more than two colors. We also have ready-to-use gradients that you can use on your Elementor designs:


Instead of using two different colors or more, some web designers prefer to use a certain color as the base color, then use the darker versions as well as the lighter versions on different elements on a page. If you want to apply this approach, you can use to assist you in finding the darker versions as well as the lighter versions of your base color.

The tool is extremely easy to use. All you need to do is to paste the hex code of your base color to the available field and the tool will do rest. The tool will provide the darker versions as well as the lighter versions of your color — complete with the hex codes. It will produce tints (lighter versions) and shades (darker versions) of a given hex color in 10% increments.

3. Huemint

If you want to use multiple colors on your website, yet have no idea which colors to use, Huemint is there to help. Huemint is basically a color palette generator. What makes it different is that it comes with a media to demonstrate how the colors look like once applied. One of the available media types is website as you can see on the screenshot above. Huemint is capable of generating up to 4 different colors for your website projects. The colors are generated using machine learning.

To generate colors, you can first select the website type on the left panel, then click the Generate button on the top-right corner of the screen. The colors will be demonstrated on the website illustration in real-time. Huemint will generate new colors for every palette each time you click the Generate button. You can lock a certain color on the palette to stop Huemint from generating a new color.

4. Type Scale

New designers often get confused to specify the font size on different areas. Especially when they are working on a complex website consisting of multiple pages. An issue you need to aware of when working on a complex website is the consistency of the typography settings. Most page builder plugins already support global fonts feature to address the issue. But again, as the designer, you are the one responsible of defining the typography settings.

Type Scale is a great tool if you are not sure about the font size on each element on your website. With the tool, you can set the proper size for text-related elements. Such as heading (from H1 to H6), title, paragraph, alert, list, and so on. You can set a base size and Type Scale will help you scale it. You can use the pre-defined scale level or use your own. The integration with Google Fonts allows you to pick a font family to be previewed.

The Bottom Line

First impression really matters. In the context of web design, the inappropriate selection of color and font can lead to bad first impression on the visitors’ side. It’s your responsibility as the designer to pick the right colors and typography settings on the websites you are working on. You have a bunch of tools to make use of to address the issues you are facing when designing a page. For color and typography related issues, you can use one of the tools we have just mentioned above.

This page may contain affiliate links, which help support our project. Read our affiliate disclosure.
Aliko Sunawang

Aliko Sunawang

Aliko is a WordPress expert and lead blogger at WPPagebuilders. He has been blogging with WordPress since 2012. He is responsible of all content published on this website.
Want to save yearly expense up to $219? why not?

Leave a Comment