Getting Started with Blazor ColorPicker Component

4 Nov 20254 minutes to read

This section explains how to add the Blazor Color Picker component to a Blazor WebAssembly app using Visual Studio and Visual Studio Code.

To get started quickly with the Color Picker in Blazor, watch the following video or explore the GitHub sample:

Prerequisites

Create a new Blazor App in Visual Studio

Create a Blazor WebAssembly App using Visual Studio via Microsoft templates or the Syncfusion® Blazor Extension.

Install Syncfusion® Blazor Inputs and Themes NuGet in the App

To add the Blazor Color Picker component, open NuGet Package Manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), then search for and install Syncfusion.Blazor.Inputs and Syncfusion.Blazor.Themes. Alternatively, run the following Package Manager commands.

Install-Package Syncfusion.Blazor.Inputs -Version 31.2.12
Install-Package Syncfusion.Blazor.Themes -Version 31.2.12

NOTE

Syncfusion® Blazor components are available on nuget.org. Refer to the NuGet packages topic for the list of available packages and component details.

Prerequisites

Create a new Blazor App in Visual Studio Code

Create a Blazor WebAssembly App using Visual Studio Code via Microsoft templates or the Syncfusion® Blazor Extension.

Alternatively, create a WebAssembly app using the following commands in the integrated terminal(Ctrl+`).

dotnet new blazorwasm -o BlazorApp
cd BlazorApp

Install Syncfusion® Blazor Inputs and Themes NuGet in the App

  • Press Ctrl+` to open the integrated terminal in Visual Studio Code.
  • Ensure the terminal is in the project root directory where the .csproj file is located.
  • Run the following commands to install Syncfusion.Blazor.Inputs and Syncfusion.Blazor.Themes, and restore dependencies.
dotnet add package Syncfusion.Blazor.Inputs -v 31.2.12
dotnet add package Syncfusion.Blazor.Themes -v 31.2.12
dotnet restore

NOTE

Syncfusion® Blazor components are available on nuget.org. Refer to the NuGet packages topic for the list of available packages and component details.

Register Syncfusion® Blazor Service

Open ~/_Imports.razor and import the Syncfusion.Blazor and Syncfusion.Blazor.Inputs namespaces.

@using Syncfusion.Blazor
@using Syncfusion.Blazor.Inputs

Now register the Syncfusion® Blazor service in the ~/Program.cs file of the Blazor WebAssembly app.

using Microsoft.AspNetCore.Components.Web;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Syncfusion.Blazor;

var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("#app");
builder.RootComponents.Add<HeadOutlet>("head::after");

builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });

builder.Services.AddSyncfusionBlazor();
await builder.Build().RunAsync();
....

Add stylesheet and script resources

The theme stylesheet and script can be accessed from NuGet through Static Web Assets. Include the stylesheet and script references in the <head> section of the ~/index.html file.

<head>
    ....
    <link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
    <script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
</head>

NOTE

See the Blazor Themes topic for different methods (Static Web Assets, CDN, and CRG) to reference themes. Also see Adding script references for guidance on adding script references in a Blazor application.

Add Blazor ColorPicker component

Add the Syncfusion® Blazor Color Picker component to the ~/Pages/Index.razor file.

<SfColorPicker></SfColorPicker>
  • Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This renders the Syncfusion® Blazor Color Picker component in the default web browser.
Blazor Color Picker component

See also