Visualize Your Colors
On a Real Website

Choosing a color palette for your website?
Use the Toolbar below to realize your choices.

Scroll to see more sections

Why Realtime Colors?

Saves time

No need to spend hours implementing different variations of colors. Decide right away!

It’s Realistic

Color Palettes make it hard to pick. This tool distributes the colors on a real website.

It’s simple

Push a few buttons, and there you have it! Your very own branding colors, ready to export.

How Does it Work?

You’ll get your finalized color palette in 4 simple steps.

Start with two neutral colors for the text and the background.

Choose your buttons. Primary is for main CTAs, and Secondary is for less important buttons and info cards.

Accent color is an additional color. It appears in images, highlights, hyperlinks, boxes, cards, etc. It can be the same as your third color (primary button) or another color.

Happy with the results? Press on “Export” and receive a .zip file with your color palette in .png and your color codes in .txt files.

Plans & Pricing

The tool is 100% free! This is just a generic section.



Choose any color

Export all you want

Get Started

Most Popular


$0.00 / month

Choose any color

Export all you want

Get a big thank you for checking this site out

Get Started


$0.00 / month

Choose any color

Export all you want

Get a big thank you for checking this site out

Super duper exclusive chat via email



Answers to some questions you might have.

What is the font picker? New!

Now, you can also upload your favorite font files and view them in real time, along with your favorite colors. Seeing fonts in dummy texts might not be helpful with your decisions. So, now you can simulate the fonts on this website.

How should I use the font picker? New!

For now, you can find the file associated with your favorite font on the internet, download it, and upload it here to view it. These files are often in the following formats: .otf, .ttf, .woff, or .woff2.

You might want to use two different fonts for the headings and the texts, but if you don't, just upload the same file for both the heading and the texts.

How many colors should I choose?

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.

Why does the text color change sometimes?

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.

What will I receive after exporting my colors?

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.

Why do some colors have some transparency?

This website allows you to choose only opaque colors. However, to make the design more appealing, I’ve made 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.

What does the hero image represent?

The hero image is inspired by Piet Mondrian's Composition with Large Red Plane, Yellow, Black, Grey and Blue. This composition keeps the ratio of the main colors (red, blue, and yellow) very close to the 60-30-10 rule of UI design. This is mainly why I've chosen this composition to visualize the distribution of the colors on the page.

How can I learn more about this tool?

You can find more information about Realtime Colors on the About page. You can also email me any questions you might have.

Your Journey Shouldn't End Here.

Follow me on social media to stay tuned on more projects.

Stay Tuned
Colors Color Setup
(CTRL + Z)
(CTRL + E)
Fonts New! Font Setup

Tip: Press the Spacebar to randomize faster!