Contrast
How it works
In this section, we'll take a look at the available features and sections on Realtime Colors. There are Three main sections on the site at the moment, including:
- Home Page
- Templates
- Palette Generator
- Documentations
Each section provides insights on colors in a different way.
The tool is also accompanied by a Figma plugin.
Home Page - The Main Tool
The home page of Realtime Colors is the main template for viewing UI color choices in realtime. It serves as an average modern landing page with a simple layout, essential sections, and balanced color distributions.
This template is simple with realistic sections, copies, and CTAs to simulate a real website.
On this page, you can see the standard sections of a modern landing page.
- Hero section with 2 CTAs and visuals
- Proposition
- Bento grid with stats
- Brief info box
- Pricing and plans
- FAQ (more text)
- Testimonials
- Final CTA
- Footer
You can also see several features available on the home page, including:
- Toolbar with fixed position
- Randomization
- Various export options
- Link sharing
- Color locking
- Contrast checking
- Copying and pasting color values
- Undo and Redo actions
- Font setup
- Dark/Light mode switch
Templates
The templates provide more ways for you to test your colors and fonts. Currently there are two templates: a dashboard and a simple blog post.
Documentations
Are documentations meant to be anything more than just 'documentations'?
The answer is yes. The Docs on Realtime Colors are both a gateway to more information about colors and a tool to visualize UI color choices, not on dummy text, but on actual texts you can read yourself.
This helps put yourself in the shoes of an actual reader and make sure the texts are readable on different themes.
In the next sections, we'll discuss each of these sections and features more.
Updated on September 12, 2023