HelpBot Assistant

How can I help you?

Mode and value in Angular Color Picker component

26 Feb 20263 minutes to read

Rendering palette at initial load

By default, the ColorPicker displays the Picker area when opened. To display the Palette area instead, set the mode property to Palette.

The following sample demonstrates rendering the Palette on initial load.

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { FormsModule } from '@angular/forms'
import { ColorPickerModule } from '@syncfusion/ej2-angular-inputs'
import { enableRipple } from '@syncfusion/ej2-base'



import { Component } from '@angular/core';

@Component({
imports: [
        FormsModule,ColorPickerModule
    ],


standalone: true,
    selector: 'app-root',
    template: `<div class="e-section-control">
                <h4>Select Color</h4>
               <ejs-input ejs-colorpicker type="color" id="element" mode="Palette" /></div>`
})

export class AppComponent { }
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Color value

Use the value property to set the ColorPicker’s selected color. The property accepts hex color codes in the following formats:

  • 3-digit hex: #RGB (e.g., #F00 for red)
  • 6-digit hex: #RRGGBB (e.g., #FF0000 for red)
  • 4-digit hex with alpha: #RGBA (e.g., #F00F for opaque red)
  • 8-digit hex with alpha: #RRGGBBAA (e.g., #FF0000FF for opaque red)

The following sample uses a 4-digit hex code where the last digit represents opacity (alpha).

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { FormsModule } from '@angular/forms'
import { ColorPickerModule } from '@syncfusion/ej2-angular-inputs'
import { enableRipple } from '@syncfusion/ej2-base'



import { Component } from '@angular/core';

@Component({
imports: [
        FormsModule, ColorPickerModule
    ],


standalone: true,
    selector: 'app-root',
    template: `<div class="e-section-control">
                <h4>Choose Color</h4>
               <!-- To set color value. -->
               <ejs-input ejs-colorpicker type="color" id="element" value="035a" /></div>`
})

export class AppComponent { }
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

The value property accepts hex codes with or without the # prefix.

See Also