Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/nstechbytes/modern-picker

ModernPicker is a fully-featured color picker Chrome extension designed to assist developers, designers, and anyone working with colors. It offers an intuitive interface, allowing users to easily select colors, convert between various color formats, save color history, and switch between light and dark themes.
https://github.com/nstechbytes/modern-picker

chrome chrome-extension colour colour-palette colur formats hex picker rgb

Last synced: 17 days ago
JSON representation

Host: GitHub
URL: https://github.com/nstechbytes/modern-picker
Owner: NSTechBytes
License: apache-2.0
Created: 2024-10-10T12:09:10.000Z (about 1 month ago)
Default Branch: main
Last Pushed: 2024-10-10T12:17:02.000Z (about 1 month ago)
Last Synced: 2024-10-29T14:49:26.203Z (18 days ago)
Topics: chrome, chrome-extension, colour, colour-palette, colur, formats, hex, picker, rgb
Language: JavaScript
Homepage:
Size: 25.4 KB
Stars: 1
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

README

# ModernPicker - Chrome Extension

## 📸 Screenshots

### Light Mode
![Extension Preview Light Mode](https://github.com/NSTechBytes/Projects-Templates/blob/main/Extensions/Modern%20Picker/Screenshot%20(76).png)

---

### Dark Mode

![Extension Preview Dark Mode](https://github.com/NSTechBytes/Projects-Templates/blob/main/Extensions/Modern%20Picker/Screenshot%20(75).png)

---

### 1. **Color Picker Tool**
ModernPicker offers a built-in color picker tool that enables users to select colors directly from the interface. This color picker is compatible with Chrome's built-in color selection functionality, making it easy to choose colors for design and development work.

### 2. **Multiple Color Formats**
One of ModernPicker's most powerful features is its ability to convert and display colors in a wide variety of formats:
- **HEX**: A hexadecimal color code representation.
- **RGB**: Red, Green, and Blue format for digital displays.
- **HSL**: Hue, Saturation, and Lightness format.
- **HSV**: Hue, Saturation, and Value format.
- **HSB**: Hue, Saturation, and Brightness format.
- **HWB**: Hue, Whiteness, and Blackness format.
- **CMYK**: Cyan, Magenta, Yellow, and Black for print colors.
- **CIELAB**: Perceptual color space designed to be device-independent.
- **CIEXYZ**: Another device-independent color model used in graphics.
- **NCOL**: A normalized color format.
- **VECA**: Vector color space format.
- **Decimal**: Color values in decimal representation.
- **Hex Int**: Integer representation of a hexadecimal color code.

These formats ensure that users can quickly get the right color codes, whether for web design, graphic design, or print.

### 3. **Color History**
The extension saves the user's color selection history, allowing them to revisit and reuse previously chosen colors. Each saved color includes:
- **Copy Button**: Easily copy the color code to your clipboard.
- **Delete Button**: Remove colors from the history if no longer needed.

This feature is especially useful when working on a project and needing to reference previously selected colors without switching back and forth between applications.

### 4. **Light and Dark Mode**
ModernPicker supports both light and dark themes to match your browser and desktop environment. Users can switch between the two modes by using the "Toggle Mode" button, which provides a comfortable viewing experience regardless of your workspace's lighting conditions.

- **Light Mode**: Optimized for brightly lit environments with a white background and dark text.
- **Dark Mode**: Best for low-light environments, offering a dark background and light text to reduce eye strain.

---

### 5. **Copy Notification**
When a color code is copied, a popup notification appears on the screen to confirm the successful copy. This ensures that users can confidently know that their color codes are saved to the clipboard.

### 6. **Dropdown Color Format Selection**
Users can select their preferred color format from a dropdown list rather than showing all the formats at once. This declutters the interface while allowing users to focus on their desired format quickly.

### 7. **Clear History**
The "Clear History" button allows users to remove all saved color history with a single click. This is useful for clearing old or unwanted color selections, enabling a fresh start.

## Installation

To install ModernPicker on your Chrome browser, follow these steps:

1. Clone or download the repository:
```bash
git clone https://github.com/NSTechBytes/Modern-Picker.git
```

2. Open Chrome and navigate to `chrome://extensions/`.

3. Enable **Developer mode** by toggling the switch on the top right corner.

4. Click the **Load unpacked** button and select the folder where the extension files are located.

5. The ModernPicker icon will appear in the Chrome toolbar. Click on it to start using the extension.

## Usage

### Selecting a Color
1. Click the ModernPicker icon in your Chrome toolbar.
2. Use the color input field to select a color.
3. Click "OK" to confirm the color selection.

### Copying a Color Code
- Once a color is selected, it will be displayed in your desired format below the picker.
- Click the **Copy** button next to the color code to copy it to your clipboard.
- A small notification will appear confirming the color has been copied.

### Managing Color History
- Your selected colors will be saved in the **Color History** section.
- Use the **Copy** button next to each color in the history to copy its code.
- Use the **Delete** button to remove individual colors from the history.
- Click **Clear History** to remove all saved colors.

### Switching Between Light and Dark Modes
- To toggle between light and dark themes, click the **Toggle Mode** button at the top of the extension. The extension will automatically apply the theme change.

## Future Features

ModernPicker is continuously being improved. Planned features for future updates include:
- **Color Eyedropper Tool**: Allow users to pick a color directly from any web page.
- **Enhanced Color Schemes**: Automatically generate complementary and analogous color schemes based on the selected color.
- **Custom Palettes**: Let users save their colors into named palettes for quick access.

## Contributing

We welcome contributions to improve ModernPicker! If you'd like to contribute, please follow these steps:

1. Fork the repository.
2. Create a new branch:
```bash
git checkout -b feature-branch
```
3. Make your changes and commit them:
```bash
git commit -m "Add feature"
```
4. Push the changes to your fork:
```bash
git push origin feature-branch
```
5. Create a pull request and explain the changes you made.

We appreciate all contributions, from minor improvements to full features!

## Issues

If you encounter any issues or bugs, please report them on the [Issues](https://github.com/NSTechBytes/Modern-Picker/issues) page. Be sure to include detailed information so we can resolve the problem quickly.