Contrast
🎉 VS Code Theme Editor Released → Visualize Your
Visualize Your
Colors & Fonts
On a Real Site
Choosing colors or typography 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.
-
300K+ Users
and counting... -
100% Free!
Forever. -
19K+ Plugin Users
Check it out on Figma -
200+ ProductHunt Upvotes
Leave a review
How Does it Work?
Get your personalized color palette in 4 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
Most Popular
Pro
$0.00 / month
Choose any color
Export all you want
Get a big thank you for checking this site out
Get access to dashboard
Enterprise
$0.00 / month
Choose any color
Export all you want
Get a big thank you for checking this site out
Get access to dashboard
Super duper exclusive members-only content.
Testimonials
What (imaginary) people are saying about this site.
Cool User
Product Designer
Product Designer
"Wow! I love this site. Realtime Colors is all websites at the same time."
Creative Person
Product Owner
Product Owner
"Amazing. I found my favorite colors in literally... 2 minutes? Woah! Totally real review."
Real Reviewer
Developer
Developer
"Astonished. This product is so cool. You should try it and upgrade to Enterprise plan. No kidding."
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:
- x / 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 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 enter the name of a font from Google Fonts or the fonts installed on your device. Read more about Font Setup.
How can I learn more about this tool?
You can find more information about Realtime Colors on the Docs. You can also contact me for any questions you might have.
Featured Articles
Just some interesting guides and posts.
Your Journey Shouldn't End Here.
Follow me on social media to stay tuned on more projects.
Stay TunedVisualize your color choices.
Made with ❤ by @Juxtopposed
No cookies 🍪 Just colors 🎨 and fonts 🔡
Copyright © 2023 All Rights Reserved. CC BY-NC-ND License.