Hue Grid Color Palette Widget

HueGrid is a minimalist, brutalist-inspired color palette widget – made by Monolyt – that displays colors and allows users to copy their hex values with a single click. The widget is easy to integrate and customize.

Features

Displays a color palette with the provided hex values.
Copies the hex value of a color to the clipboard when clicked.
Automatically adjusts text color for light backgrounds.
Simple and clean design with CSS customization.
Optional description for your palette.
Shareable link to your palette.

Usage

Download the hgwidget.js file and include it in your project: <script src="hgwidget.js"></script>

Create a new HueGrid instance with your colors, palette name, and optional description:

<script>
    new HueGrid(["hexvalue1", "hexvalue2"], "Title", "Description");
</script>

Examples

Widget without description

Code:

<script>
    new HueGrid(["282726", "86817c", "d6cab0"], "Five Colors");
</script>

Result:

Widget with description

Code:

<script>
    new HueGrid(["657f38", "ddbcbc"], "Two Colors", "Here you can describe your palette");
</script>

Result:

Customization

Customize the widget’s appearance by modifying the CSS variables:

:root {
    --hg-background-color: #ffffff;
    --hg-border-color: #000000;
    --hg-font-size: 16px;
    --hg-font-size-description: 14px;
    --hg-font-color: #000000;
    --hg-height: 150px;
    --hg-margin: 2rem auto;
    --hg-info-padding: 0 15px;
    --hg-info-height: 36px;
    --hg-hover-width: 80px;
    --hg-transition-duration: 0.1s;
    --hg-font-weight: bold;
    --hg-light-color: #000000;
    --hg-dark-color: #ffffff;
}

Adjust these variables to match your design needs.

License

This project is open-source and available under the MIT License.