Generate portal colors from a primary color

This document provides guidelines on how to derive essential colors: hover color, light color, and secondary color from a given primary color.

1. Primary Color

The primary color serves as the base for all derived colors. It should be a well-defined brand or theme color that reflects the design intent.

2. Hover Color

The hover color provides a visual cue when users interact with elements like buttons and links, it’s used when you hover buttons for example:

To generate hover color, you need to slightly darken or lighten the primary color.

3. Light Color

The light color is used for backgrounds, highlights, or softer UI elements like the background of chip button:

To generate the light color, reduce the opacity of the primary color to 20% on a white background.

4. Secondary Color

The secondary color is used to complement the primary color and provide contrast.

Implementation

bioportal_web_ui/app/assets/stylesheets/theme-variables.scss.erb

Tools

A tool to help you generate different colors: https://www.hover.dev/css-color-palette-generator