ModernPicker - Chrome Extension

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. The extension comes equipped with a modern user interface and a rich set of features that ensure an excellent user experience.

📸 Screenshots

Light Mode

---

Dark Mode

---

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:

   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:

   git checkout -b feature-branch

3. Make your changes and commit them:

   git commit -m "Add feature"

4. Push the changes to your fork:

   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 page. Be sure to include detailed information so we can resolve the problem quickly.