color-picker

A full-page color picker with mouse cursor and text display.
Explore the documentation »

View Demo · Report a Bug · Request a Feature

Table of Contents

1. About the Project
   • Technologies Used
2. Features
3. Getting started
4. To Do
5. Reporting Bugs
6. License

About the project

This repository contains a color picker project that allows you to select colors ranging from black to white using your mouse cursor, with the selected color displayed as text below. When you click on any color on the page, it will be copied to the clipboard, and a text will appear on the screen confirming the copy. The color picker is hosted on GitHub Pages.

(back to top)

Technologies Used

The project uses the following technologies:

• HTML
• CSS
• JavaScript

The page is optimized for all platforms (cross-browser) and has a Lighthouse score as shown below.

(back to top)

Features

This project includes the following features:

• Easy-to-use color-picker with all the RGB colors.
• Click to copy colors to your clipboard.
• Styling focused on the best acessibility guidelines (using maximum contrast).

(back to top)

Getting started

1. Clone this repository to your machine:

   git clone https://github.com/your-username/color-picker.git
   

2. Open the index.html file in a web browser.

3. Use the mouse to select colors while moving it.

4. If you click on the selected color, a sliding notification will appear and show which color you selected and copy it to the clipboard.

(back to top)

To do

• Add modal with instructios while opening the page.
• Update images of the README.md.
• Transform into a web app.
• Improve page structure, add tags, and optimize JavaScript delivery.

(back to top)

Reporting bugs

Found a bug or issue in the project? Follow the steps below:

1. Check if the bug has already been reported in our "Issues" section on GitHub: link to Issues.

2. If you don't find an existing report about the bug, click on "New Issue" to open a new bug report.

3. Provide a clear and descriptive title for the bug, along with a detailed description of the steps needed to reproduce it.

4. If possible, include screenshots, relevant code snippets, or any other information that may help identify and resolve the bug.

5. Click on "Submit Issue" to create the bug report.

Thank you for reporting bugs! If you would like to contribute with code, you can open a PR, and your participation is more than welcome.

(back to top)

License

This project is licensed under the MIT License.

(back to top)