Colorinator

screenshot of Colorinator
react

A quick color palette generator based on the 60/30/10 rule of UI design.

Overview:

Colorinator is a quick color palette generator that follows the 60-30-10 rule of UI design. It allows users to easily generate primary, secondary, and accent colors for their designs. The colors are derived using a contrast ratio and font colors are calculated based on this ratio as well. The website provides a live preview of an inverted theme, where the primary and secondary colors are swapped. Users can save their themes locally and easily navigate through their color palette history.

Features:

  • Generated Colors: Primary, secondary, and accent colors are generated based on the 60-30-10 rule of UI design.
  • Non-Random Generation: The colors generated are not random; they are derived using a difference of contrast ratio.
  • Font Color Calculation: Font colors used are calculated based on the contrast ratio with the background color.
  • Live Preview: The website provides a live preview of the inverted theme, swapping the primary and secondary colors.
  • Save Themes: Users can save their themes to local storage for future use.
  • Dynamic Look: The dynamic look of the website makes it easy to visualize the look and feel of the color palette.
  • Color Palette History: Users can navigate through the history of their generated color palettes.
  • User-Friendly Interface: The website provides buttons to easily input a primary color, shuffle for a random color, and navigate through the history of generated colors.

Summary:

Colorinator is a useful tool for UI designers to quickly and easily generate a color palette based on the 60-30-10 rule. It provides non-random color generation using contrast ratio and calculates font colors accordingly. The live preview and dynamic look of the website make it easy to visualize the color palette. Users can save themes, navigate through color palette history, and even preview an inverted theme. The tool is user-friendly and provides a simple interface for generating and managing color palettes.

react
React

React is a widely used JavaScript library for building user interfaces and single-page applications. It follows a component-based architecture and uses a virtual DOM to efficiently update and render UI components

template
Templates & Themes

A template or theme refers to a pre-designed layout or structure that provides a basic framework for building a specific type of application or website. It typically includes good design, placeholder content and functional features, allowing developers to customize and fill in the details according to their specific needs.

github-pages
GitHub Pages

Gridsome is a Vue.js-based static site generator that makes it easy to build fast and flexible websites and applications by leveraging modern web technologies like GraphQL, Webpack, and hot reloading