# 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:

 ![](https://wiki.agroportal.eu/api/files.get?sig=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJrZXkiOiJ1cGxvYWRzL2MyODRmYzA0LTA4ZmUtNGE1Yi05ODM4LWM5MjhmYTFlNjhjNi80YmZjNmFkOC0yYTI2LTQ5NWItOGE0ZS0xYWY0NzM5OGJjNDQvaW1hZ2UucG5nIiwidHlwZSI6ImF0dGFjaG1lbnQiLCJpYXQiOjE3OTM4OTQ0MDAsImV4cCI6MTc5Mzk4MDgwMH0.PLAOo0goZfreFgTVsTSLzYnPOm8mXQvgzIDosHe0nHg " =731x257")

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:

 ![](https://wiki.agroportal.eu/api/files.get?sig=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJrZXkiOiJ1cGxvYWRzL2MyODRmYzA0LTA4ZmUtNGE1Yi05ODM4LWM5MjhmYTFlNjhjNi85NWVhZDZiYi04MWFmLTRiZTgtYTg5ZC0xZjM5MDRhNTMzNDgvaW1hZ2UucG5nIiwidHlwZSI6ImF0dGFjaG1lbnQiLCJpYXQiOjE3OTM4OTQ0MDAsImV4cCI6MTc5Mzk4MDgwMH0.SQ3HiUUpg67x-2Lm_L2WNtv5dFQCYf98zmDRFKp7eVU " =348x121")  

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.

 ![](https://wiki.agroportal.eu/api/files.get?sig=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJrZXkiOiJ1cGxvYWRzL2MyODRmYzA0LTA4ZmUtNGE1Yi05ODM4LWM5MjhmYTFlNjhjNi80YWJmNzJiNS1mMTM5LTQ2MWYtOWZhMi1jMzU1OWU0MDJlNDYvaW1hZ2UucG5nIiwidHlwZSI6ImF0dGFjaG1lbnQiLCJpYXQiOjE3OTM4OTQ0MDAsImV4cCI6MTc5Mzk4MDgwMH0.ykUzrR90ZSr-mHw54yusK0t7HLwdYig9PJqGSNztnuo " =554x322")  

### Implementation

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

 ![](https://wiki.agroportal.eu/api/files.get?sig=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJrZXkiOiJ1cGxvYWRzL2MyODRmYzA0LTA4ZmUtNGE1Yi05ODM4LWM5MjhmYTFlNjhjNi84MjExZmZmNS04ZjYxLTQ3ZGYtOTg3ZS01NjM5ZmE0YjE3ZWYvaW1hZ2UucG5nIiwidHlwZSI6ImF0dGFjaG1lbnQiLCJpYXQiOjE3OTM4OTQ0MDAsImV4cCI6MTc5Mzk4MDgwMH0.DQRoDVM0cybjLguB5TJeXyJDvsjHh_IwzaQLifQyHD4 " =1080x913")

## Tools

> **A tool to help you generate different colors:** [**https://www.hover.dev/css-color-palette-generator**](https://www.hover.dev/css-color-palette-generator)

---

**Documents**

- [💁‍♂️ Acknowledgments](https://wiki.agroportal.eu/s/e6158eda-c109-4385-852c-51a42de9a412/doc/acknowledgments-15GdRXLQdm)
- [📚Publications and references](https://wiki.agroportal.eu/s/e6158eda-c109-4385-852c-51a42de9a412/doc/publications-and-references-87tEoeoGKy)
- [🗽Terms & Conditions](https://wiki.agroportal.eu/s/e6158eda-c109-4385-852c-51a42de9a412/doc/terms-conditions-naDsDo2Zxq)
- [🧞‍♂️Metadata guidelines and recommendations](https://wiki.agroportal.eu/s/e6158eda-c109-4385-852c-51a42de9a412/doc/metadata-guidelines-and-recommendations-pOFbK9sIfp)
- [📜 AgroPortal Release Notes](https://wiki.agroportal.eu/s/e6158eda-c109-4385-852c-51a42de9a412/doc/agroportal-release-notes-btKjZk5tU2)
- [ 👩‍🚀 User Guide](https://wiki.agroportal.eu/s/e6158eda-c109-4385-852c-51a42de9a412/doc/user-guide-ZszoBwfjGF)
- [📎 API Documentation](https://wiki.agroportal.eu/s/e6158eda-c109-4385-852c-51a42de9a412/doc/api-documentation-kMCurGKD97)
- [🤖 Developer Documentation](https://wiki.agroportal.eu/s/e6158eda-c109-4385-852c-51a42de9a412/doc/developer-documentation-LhsrucqGTa)
- [🗃External Documentation](https://wiki.agroportal.eu/s/e6158eda-c109-4385-852c-51a42de9a412/doc/external-documentation-vNPQCdArrr)
- [AgroPortal infrastructure](https://wiki.agroportal.eu/s/e6158eda-c109-4385-852c-51a42de9a412/doc/agroportal-infrastructure-ietsAU4kPs)