Component

Color Picker

Visual color picker with spectrum canvas, HEX, RGB and HSL formats, and full Angular Forms support.

import { NeuColorPickerComponent } from '@neural-ui/core/color-picker';

RGB mode

HSL mode

HEX mode

#6366f2

import { FormControl, ReactiveFormsModule } from '@angular/forms';
import { NeuColorPickerComponent } from '@neural-ui/core/color-picker';

@Component({
  imports: [NeuColorPickerComponent, ReactiveFormsModule],
  template: `
    <neu-color-picker
      mode="hex"
      [formControl]="primaryColorCtrl"
    />

    <div [style.background]="primaryColorCtrl.value" class="preview-box"></div>
  `
})
export class ThemeEditorComponent {
  readonly primaryColorCtrl = new FormControl('#6366f1', { nonNullable: true });
}