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/.

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/

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