# Quick Start
## Content
This quick start creates a Blazor page with `C1ColorPicker` controls that define colors of a CSS linear-gradient preview.
## 1\. Create the Project
Create a Blazor Web App project with the following options:
* **Interactive render mode:** Server
* **Interactivity location:** Per page/component
Add the  [C1.Blazor.ColorPicker](https://www.nuget.org/packages/C1.Blazor.ColorPicker/10.0.20262.62-beta) NuGet package to the project.
## 2\. Add the namespaces
Add the following namespaces to `Components/_Imports.razor`:
```csharp
@using C1.Blazor.Core
@using C1.Blazor.ColorPicker
@using C1.Blazor.Input
```
## 3\. Add the styles and scripts
Add the ColorPicker style sheets and scripts to `Components/App.razor`. Retain the files generated by the Blazor project template, including application style sheets and the Blazor framework script.
```csharp
```
>type=note
> **Note:****C1.Blazor.Input** is installed automatically as a dependency of **C1.Blazor.ColorPicker**, so you don't need to add a second package. The ColorPicker uses its styles and scripts, so reference them as shown.
## 4\. Add the page
Replace the contents of `Components/Pages/Home.razor` with the following markup:
```csharp
@page "/"
@rendermode InteractiveServer
Color
Color
Color
background: @ColorCss;
@code {
C1Color _color = C1Color.FromArgb(255, 0, 122, 204);
string ColorCss
{
get
{
var color = _color ?? C1Color.Transparent;
var alpha = (color.A / 255d).ToString("0.###", System.Globalization.CultureInfo.InvariantCulture);
return $"rgba({color.R}, {color.G}, {color.B}, {alpha})";
}
}
}
```
>type=note
> Note:**@bind-SelectedColor** keeps **\_color** in sync with the picker. **ColorCss** falls back to **C1Color.Transparent** if the value is ever null. It formats the alpha value with **CultureInfo.InvariantCulture so cultures that use a decimal comma still produce valid CSS.**
## Run the application
Run the application and open the site root.
Select a color. The gradient preview and its CSS value update when the selected color changes.