Skip to content

A responsive web app that uses Grommet, Unsplash's API, and react-color-extractor to help users find the right color palette for their project.

Notifications You must be signed in to change notification settings

taysea/color-palette-generator

Repository files navigation

Netlify Status

color-palette-generator

About

Let photos you like help you find the right color palette for your project. You can browse automatically loaded photos or search for specific photos. When an image is clicked on, the dominant 6 colors are extracted and displayed, allowing you to copy and paste these HEX codes directly into your project.

What's really going on?

grommet- used to create the UI. The components from its library make it easy to create a responsive layout.

unsplash- used to pull the images that populate the layout. On the home page, a random selection of images categorized by Unsplash as "featured" are displayed. However, a specific topic can also be searched for using the search bar. In all cases, the images displayed are coming from Unsplash. The user who uploaded the image is credited on the page that loads when an image is clicked on.

react-color-extractor- npm package used to extract six dominant colors from a selected image.

Run locally

In the project directory, you can run:

npm start or yarn start

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

Demo

Landing page

Screen Shot 2022-09-01 at 11 35 27 AM

Search results

Screen Shot 2022-09-01 at 11 36 14 AM

Detail page

Screen Shot 2022-09-01 at 11 36 25 AM

About

A responsive web app that uses Grommet, Unsplash's API, and react-color-extractor to help users find the right color palette for their project.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published