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.

100K+ Users
and counting...
100% Free!
Sponsored by YOU.
5K+ Plugin Users Check it out on Figma
100+ ProductHunt UpvotesLeave a review

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 primary and secondary colors. Primary is for main CTAs and sections, 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.

Happy with the results? Press on “Export” and choose among different options to export in various formats, like .zip, .png, CSS, SCSS, QR Code, and more.

Plans &Pricing

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

Basic

Free

Choose any color

Export all you want

Get Started

Pro

$0.00 / month

Choose any color

Export all you want

Get a big thank you for checking this site out

Get Started

Enterprise

$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

Contact

FAQ

Answers to some questions you might have.

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.

How does the contrast checker work?

The contrast checker shows the contrast ratio between the selected color and its background/foreground.

The contrast checker has 3 lights:

Red: The contrast ratio does not pass either AAA or AA. Therefore, both large and normal texts are hardly readable.
Yellow: The contrast ratio might pass AA but won't pass AAA. Large texts might be readable but normal texts are probably not readable.
Green: The contrast ratio passes both AA and AAA. Both large and normal texts are readable.

Learn more about the contrast checker .

What will I receive after downloading the exported file?

After downloading through export options, 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 set up the fonts?

You can either upload a font file from your device locally in the formats .otf, .ttf, .woff, or .woff2, or you can enter the name of a font from Google Fonts or the fonts installed on your device. Read more about Font Setup .