Visualise Your Colours
On a Real Website

Normally, 3 colors are absolutely fine (meaning background, text, and one accent color).However, if you want, you can have more. Usually, we don’t add more than 6 colors across a platform. It would just make things too... complicated. Plus, it makes it hard to keep the colors consistent throughout the design.

The tool is supposed to show you a realistic image of your colors of choice. However, sometimes, there might be too little contrast between the background color and the text color of some elements. In that case, the text color swaps accordingly to prevent the text from being unreadable. This is activated when the AA and AAA color contrast check doesn’t pass. Keep in mind: The text color will only swap between the background and text colors you’ve chosen to try and pass the contrast check. It won’t select any color outside of your choices.

After exporting, you will receive a .zip file. This file is compressed, so you will have to extract it.After extracting it, you will see a .png file and a .txt file. The .png image shows your color palette in squares next to each other. The .txt file includes the color codes in HEX and RGB. You can send these files to designers or developers, or just use them in your project.

This website allows you to choose only opaque colors. However, to make the design more appealing, I’ve make some parts more transparent by adding a bit of opacity to them. Of course, you can use these colors however you want in your own projects