Hue harmony is a single page application (SPA) that allows users to get color palette suggestion based on a base color and a color harmony. Hue Harmony leverages the power of AI to provide color palette suggestion for the user.
Live link is here.
- HTML
- CSS
- Javascript
- iro.js library
- Groq AI API using llama3-70b-8192 model
- Figma
This webpage is responsive and was built based on a "mobile-first" approach. A mobile-first approach is a way to build an app or website by starting with mobile phones and then adding media queries for larger screens, such as tablets and desktops. Media queries allows you to add styles depending on the device type. The mobile-first approach is a personal choice for developers because some prefer to start with the desktop and then add media queries for smaller screens. We decided to use the mobile-first approach because, for mobile, all the items are already stacked one on top of the other, and you just need to add space using margin and padding.
Mobile view
Tablet view
Desktop view
Color Selection: User can select their base color either via the color wheel picker or input the color hexcode into the input field.
Color Harmony Selection: User can then select their color harmony of choice via the drop down menu.
Color Palette Output: After the selection is made, Hue Harmony will display color suggestion onto a color palette when user clicks on "Create Combination" button.
Mobile/Tablet View Demo
Desktop View Demo
Hue Harmony relies on connection to Groq AI API so if the API is down or became deprecated, this webapp will not work and colour suggestion will not be displayed.
Other than that, the quality of the color suggestion relies on the output from llama3-70b-8192 model via connection to Groq AI API. With the current limitation on AI generation, the color suggestion may be inaccurate.
- Ikechukwu Ezeji (Product Owner): GitHub / LinkedIn
- Jennifer Joynt (Scrum Master): GitHub / LinkedIn
- Anita Boakye-Yiadom (Scrum Master): GitHub / LinkedIn
- Liat Cohen (UI/UX Designer): GitHub / LinkedIn
- Michelle Lim (Developer): GitHub / LinkedIn
- Diego Raffa (Developer): GitHub / LinkedIn
- Dusan Djergovic (Developer): GitHub / LinkedIn