Skip to content

Latest commit

 

History

History
36 lines (20 loc) · 1.9 KB

README.md

File metadata and controls

36 lines (20 loc) · 1.9 KB

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