https://github.com/biplo12/realtime-colors-clone
Create color palettes with Realtime Colors Clone.
https://github.com/biplo12/realtime-colors-clone
nextjs react tailwindcss typescript
Last synced: about 2 months ago
JSON representation
Create color palettes with Realtime Colors Clone.
- Host: GitHub
- URL: https://github.com/biplo12/realtime-colors-clone
- Owner: Biplo12
- Created: 2023-08-10T09:25:39.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2023-09-02T09:38:09.000Z (over 1 year ago)
- Last Synced: 2025-02-07T02:39:05.280Z (4 months ago)
- Topics: nextjs, react, tailwindcss, typescript
- Language: TypeScript
- Homepage: https://realtime-colors-clone.vercel.app
- Size: 852 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
# Realtime Colors Application Clone Documentation
## 1. Introduction
The Realtime Colors Application Clone is a web-based platform that empowers users to explore, visualize, and finalize their color choices. Whether for text, background, primary, secondary, or accent colors, users can experiment and customize their color scheme. The application also supports randomization of colors, allowing users to lock preferred colors and then randomize the remaining ones. The dark and light mode color options provide further flexibility. Exporting color choices is made easy with various format options, including CSS, SCSS, tailwind CSS, images, and CSV. Users can even generate a shareable link to apply saved color choices.
## 2. Features
- Color Selection: Users can customize Text, Background, Primary, Secondary, and Accent colors.
- Randomization: Users can randomize colors, with the option to lock preferred colors.
- Dark/Light Mode: Users can switch between dark and light mode color schemes.
- Export Options: Colors can be exported in various formats including CSS, SCSS, tailwind CSS, images, and CSV.
- Shareable Links: Users can generate links to apply saved color choices.
- Undo/Redo (Future Enhancement): A planned feature to add undo and redo functionality.
- Font Selection (Future Enhancement): A planned feature to incorporate font selection.
## 3. Installation
To run the project, follow these steps:
1. Clone the repository:
```
git clone https://github.com/Biplo12/realtime-colors-clone.git
```
2. Navigate to the project directory:
```
cd realtime-colors-clone
```
3. Install dependencies using Yarn:
```
yarn install
```
## 4. Usage
1. Access the application in your browser at [https://realtime-colors-clone.vercel.app/](https://realtime-colors-clone.vercel.app/).
2. Use the color pickers to adjust different color components.
3. Utilize the randomize button or press the spacebar to generate new color combinations.
4. Lock colors that you want to keep constant during randomization.
5. Explore the dark and light mode color options or press Ctrl + Q to switch between them.
6. Export your color choices in various formats as described in the next section or press Ctrl + E to show the export dialog.
7. Generate and share links to apply saved color choices or press Ctrl + S to copy the link.
## 5. Export Options
- **CSS, SCSS, tailwind CSS**: Copy the generated CSS code for direct integration into your project.
- **HEX, RGB, HSL**: Copy color representations for easy usage in code.
- **Images**: Download an image representing your color choices.
- **CSV**: Export colors as CSV with HEX values, with or without '#' prefix.
## 6. Future Enhancements
- **Undo/Redo Functionality**: Implement the ability to undo and redo color changes.
- **Font Selection**: Integrate font selection options to complete the design customization.
## 7. Deployment
The Realtime Colors Application Clone is deployed to Vercel. Visit the live clone of the Realtime Colors Application at: [https://realtime-colors-clone.vercel.app/](https://realtime-colors-clone.vercel.app/)
## 8. Contact Information
- Robert Siński (Clone Creator)
- Email: [email protected]
- Juxtopposed (Original Application Owner)
- Email: [email protected]
For any questions, feedback, or support, feel free to contact the project creators.
Original Realtime Colors Application: [https://realtimecolors.com](https://realtimecolors.com)