256 Shades of Gray

Description

256 Shades of Gray is a simple project that visually represents all 256 possible grayscale shades in an 8-bit grayscale system. Each shade is displayed as a square with its corresponding HEX color code, allowing users to see the gradual transition from black (#000000) to white (#FFFFFF).

Features

• 🎨 256 Shades of Gray – Displays all grayscale shades from 0 to 255.
• 🖱 Click to Copy HEX Code – Click any shade to copy its HEX value.
• 📱 Responsive Design – Adjusts grid layout based on screen size.
• 🌈 Animated Gradient Text – Eye-catching title animation.
• ✨ Smooth Hover Effects – Enhances UI experience.

Installation & Usage

Local Setup:

1. Clone the repository:

   git clone https://github.com/rulit-site/256ShadesOfGray.git

2. Navigate to the project folder:

   cd 256ShadesOfGray

3. Open index.html in your browser:

   open index.html

   or simply double-click the file.

Project Structure

256ShadesOfGray/
├── index.html       # Main HTML file
├── styles.css       # Stylesheet for layout & effects
├── script.js        # JavaScript for generating shades & copy feature
└── README.md        # Project documentation

Technologies Used

• HTML5
• CSS3
• JavaScript (ES6+)

How It Works

• script.js dynamically generates 256 grayscale shades and inserts them into the grid.
• Clicking a color box copies its HEX code to the clipboard.
• CSS animations enhance the user experience with hover and text gradient effects.

Screenshots

Contributing

Contributions are welcome! If you find a bug or have an improvement suggestion:

1. Fork the repository.
2. Create a new branch (git checkout -b feature-name).
3. Commit your changes (git commit -m "Description of changes").
4. Push to your branch (git push origin feature-name).
5. Open a pull request.

License

This project is licensed under the MIT License - see the LICENSE file for details.

Author

Developed by Rulit.site 🚀.