https://github.com/ganymedelabs/palettepick

A Chrome extension that highlights color strings (e.g., hex, RGB, HSL) on webpages, with each color highlighted in its own color.
https://github.com/ganymedelabs/palettepick

chrome-extension color-palette-generator color-picker

Last synced: 9 days ago
JSON representation

A Chrome extension that highlights color strings (e.g., hex, RGB, HSL) on webpages, with each color highlighted in its own color.

• Host: GitHub
• URL: https://github.com/ganymedelabs/palettepick
• Owner: ganymedelabs
• License: mit
• Created: 2024-12-26T19:08:58.000Z (14 days ago)
• Default Branch: main
• Last Pushed: 2024-12-27T20:10:38.000Z (13 days ago)
• Last Synced: 2024-12-27T21:20:40.938Z (13 days ago)
• Topics: chrome-extension, color-palette-generator, color-picker
• Language: TypeScript
• Homepage:
• Size: 29.3 KB
• Stars: 0
• Watchers: 0
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# PalettePick Chrome Extension

![Code size](https://custom-icon-badges.demolab.com/github/languages/code-size/ganemedelabs/palettepick?logo=file-code&logoColor=white)

![Webpack](https://custom-icon-badges.demolab.com/badge/Built%20with-Webpack-8DD6F9.svg?logo=webpack&logoColor=white)

![JavaScript](https://custom-icon-badges.demolab.com/badge/JavaScript-Vanilla-F7DF1E.svg?logo=javascript&logoColor=white)

![License](https://custom-icon-badges.demolab.com/github/license/ganemedelabs/palettepick?logo=law)

PalettePick is a Chrome extension that enhances your browsing experience by detecting and highlighting color strings directly on web pages. Whether it's CSS color names, hex codes, RGB, RGBA, HSL, or HSLA, the extension highlights these colors with their actual hues.  

You can also interact with these highlighted colors to transform them into different formats. Additionally, the extension includes a built-in color picker that allows you to select and save colors from any webpage and even generates palettes based on your selected colors.  

## 📋 Table of Contents

- [Features](#-features)

- [Installation](#-installation)

- [License](#-license)

- [Contact](#-contact)

- [Credits](#-credits)

## ✨ Features

- **Dynamic Color Highlighting**: Detects and highlights color strings on webpages, including:  

  - CSS color names (e.g., "red", "blue")  

  - Hexadecimal codes (e.g., "#FF5733")  

  - RGB and RGBA (e.g., "rgb(255, 87, 51)", "rgba(255, 87, 51, 0.5)")  

  - HSL and HSLA (e.g., "hsl(10, 100%, 60%)", "hsla(10, 100%, 60%, 0.5)")  

- **Interactive Color Conversion**: Clicking on a highlighted color string cycles it through different formats:  

  1. CSS Color Name  

  2. RGB  

  3. Hexadecimal  

  4. HSL  

  5. Back to the original format  

- **Built-in Color Picker**:  

  - Pick colors directly from any webpage.  

  - Save selected colors to the extension popup.  

- **Palette Generation**:  

  - Generate color palettes based on saved colors.  

  - Click on saved colors to view harmonious palettes.  

## 🔧 Installation

1. Clone the repository or download the zip file:  

   ```bash

   git clone https://github.com/ganemedelabs/palettepick.git

   ```

2. Navigate to the project directory and build the project by running:  

   ```bash

   npm run build

   ```

3. Open Chrome and go to `chrome://extensions/`.  

4. Enable **Developer Mode** using the toggle in the top-right corner.  

5. Click **Load Unpacked** and select the `dist` folder.  

6. PalettePick is now ready to use!  

## 📜 License

This project is licensed under the MIT License. See the [LICENSE](LICENSE) file for details.

## 📧 Contact

For inquiries or more information, you can reach out to us at [[email protected]](mailto:[email protected]).

## 🙏 Credits

Icons used in this extension is by [Freepik](https://www.flaticon.com/) on Flaticon.