https://github.com/chiragbadhe/colorsnap

ColorSnap is a color shade generator that allows you to generate shades from light to dark. You can use the enter key to change the color, or you can pick any color from the color picker.
https://github.com/chiragbadhe/colorsnap

javascript nextjs tailwindcss

Last synced: 3 months ago
JSON representation

ColorSnap is a color shade generator that allows you to generate shades from light to dark. You can use the enter key to change the color, or you can pick any color from the color picker.

• Host: GitHub
• URL: https://github.com/chiragbadhe/colorsnap
• Owner: chiragbadhe
• Created: 2023-04-03T11:44:56.000Z (about 2 years ago)
• Default Branch: main
• Last Pushed: 2023-04-06T19:25:51.000Z (about 2 years ago)
• Last Synced: 2025-01-22T05:15:27.982Z (4 months ago)
• Topics: javascript, nextjs, tailwindcss
• Language: TypeScript
• Homepage: https://colorsnap.vercel.app
• Size: 751 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# ColorSnap

ColorSnap is a color shade generator that allows you to generate shades from light to dark. You can use the enter key to change the color, or you can pick any color from the color picker. You can also copy and paste the generated color shades to Tailwind config, CSS, SCSS, etc.

![ColorSnap Screenshot](/public/screenshot.png)

## How to use ColorSnap

1. Navigate to https://colorsnap.vercel.app/

2. Use the color picker or enter a color value in the input field

3. Use the the enter key to change color

4. Click on the color shades to copy the color value to your clipboard

5. Paste the color value to your desired location (Tailwind config, CSS, SCSS, etc.)

## Features

- Generate shades of any color

- Use enter key to change shades

- Copy color values to clipboard with one click

- Supports HEX formats

## Technologies used

- NextJs

- Tailwind CSS

## How to run locally

1. Clone the repository: `git clone https://github.com/chiragbadhe/colorsnap.git`

2. Navigate to the project directory: `cd colorsnap`

3. Install dependencies: `yarn install`

4. Start the development server: `yarn dev`

5. Open the app in your browser: `http://localhost:3000`

## Credits

ColorSnap was created by ch1rag.eth 

- [NextJs](https://nextjs.org/)

- [Tailwind CSS](https://tailwindcss.com/)