Blazor-Color-Picker

Sometimes HTML5 colorpicker doesn't suit me for an application. I prefer to offer the user a predefined color palette

DEMO : https://tossnet.github.io/Blazor-Color-Picker/

Opens a palette with the Material colors

Installation

Warning

The implementation has been improved: version 4.0 uses a service declared via dependency injection

Latest version in here:

To Install

Install-Package BlazorColorPicker

or

dotnet add package BlazorColorPicker

For client-side and server-side Blazor - add script section to index.html or _Host.cshtml (head section)

<link href="_content/BlazorColorPicker/colorpicker.css" rel="stylesheet" />

In program.cs, declare

builder.Services.AddColorPicker();

ColorPicker are rendered by the <BlazorColorPicker.ColorPicker />. This component needs to be added to the main layout of your application/site. You typically do this in the MainLayout.razor file at the end of the

section.

Usage

@page "/"
@using BlazorColorPicker

@inject IColorPickerService ColorPickerService

<button class="btn btn-primary" @onclick="OpenModal">
    <div style="background-color:@color" class="buttonColor"></div> Select a Color
</button>

@code {
    private string color = "#F1F7E9";

    private async Task OpenModal()
    {
        var parameters = new ColorPickerParameters
        {
        	ColorSelected = color,
        };
        color = await ColorPickerService.ShowColorPicker(parameters);
    }
}

Z-Index

By default the color picker modal uses z-index: 9999. If your app has a parent element with a higher z-index, the palette may appear behind it. Two override options are available:

Option 1 — CSS custom property (global, no code change needed):

:root {
    --color-picker-z-index: 999999;
}

Option 2 — ZIndex parameter (per call):

var parameters = new ColorPickerParameters
{
    ColorSelected = color,
    ZIndex = 999999,
};
color = await ColorPickerService.ShowColorPicker(parameters);

Find Closest Color

When the selected color doesn't exist in the palette, you can enable automatic matching to the closest available color using the FindClosestIfNotFound parameter:

var parameters = new ColorPickerParameters
{
    ColorSelected = "#8B4513",  // SaddleBrown - not in the default palette
    FindClosestIfNotFound = true,
};
color = await ColorPickerService.ShowColorPicker(parameters);

The algorithm uses a weighted Euclidean distance in RGB color space, which accounts for human color perception (green differences are more noticeable than red or blue).

Note

Color comparison is case-insensitive: #ec407a will match #EC407A in the palette.

Release Notes

Version 4.4.0

• Configurable z-index via ZIndex parameter or CSS custom property --color-picker-z-index (default: 9999)

Version 4.2.0

• New feature: FindClosestIfNotFound parameter - when the selected color is not in the palette, automatically highlights the closest matching color
• Color comparison is now case-insensitive (#ec407a matches #EC407A)
• Uses weighted Euclidean distance algorithm for perceptually accurate color matching

Version 4.1.1

• Performance & memory optimization: default colors are now static and shared across all instances
• Fixed memory leak in OnParametersSet() that caused unbounded list growth
• Zero allocations when using default color palette

Version 4.0.2

>- Added AddColorPicker() to simplify declaration

Version 4.0.1

>- increase the z-index to 9999

Version 4.0.0

>- the implementation has been improved: version 4.0 uses a service declared via dependency injection

⚠️ Breaking changes ⚠️

Version 3.1.0

>- you can customise the size of the palette using your CSS styles >- A red colour of the first column was not correct >- Re-addition of .NET7 compatibility

Version 2.2.0

• Remove the internal use of IJSRuntime

Version 2.1.0

• no need to declare the _content/BlazorColorPicker/colorpicker.js file