ColorPicker

When To Use#

Used when the user needs to customize the color selection.

Import Module#

module:

import { NzColorPickerModule } from 'ng-zorro-antd/color-picker';

standalone:

import { NzColorPickerComponent } from 'ng-zorro-antd/color-picker';

Examples

Basic

The simplest usage.

expand codeexpand code
      Loading...
#1677ff
Show Color Text

The default text of the rendering trigger, effective when nzShowText is true.

expand codeexpand code
      Loading...
Disabled Alpha

Disabled color alpha.

expand codeexpand code
      Loading...
Custom Trigger Event

Triggers event for customizing color panels, provide options click and hover.

expand codeexpand code
      Loading...
HEX: #1677ff
HSB: hsb(215, 91%, 100%)
RGB: rgb(22, 119, 255)
Color Format

Encoding formats, support HEX, HSB, RGB.

expand codeexpand code
      Loading...
#1677ff
Use with forms

<nz-color-picker formControlName="color"></nz-color-picker>

expand codeexpand code
      Loading...




Trigger size

The trigger has three sizes: large, medium and small.

expand codeexpand code
      Loading...
#1677ff
Disabled

Set to disabled state.

expand codeexpand code
      Loading...
Clear Color

Clear Color.

expand codeexpand code
      Loading...
Custom Trigger

Triggers for customizing color panels.

expand codeexpand code
      Loading...
Color Block

Color Block.

expand codeexpand code
      Loading...

API#

nz-color-picker#

ParameterDescriptionTypeDefault
[nzFormat]Format of colorrgb｜hex｜hsbhex
[nzValue]Value of colorstring｜NzColor-
[nzSize]Setting the trigger sizelarge｜default｜smalldefault
[nzDefaultValue]Default value of colorstring｜NzColorfalse
[nzAllowClear]Allow clearing color selectedbooleanfalse
[nzTrigger]ColorPicker trigger modehover｜clickclick
[nzShowText]Show color textbooleanfalse
[nzOpen]Whether to show popupsbooleanfalse
[nzDisabled]Disable ColorPickerbooleanfalse
[nzDisabledAlpha]Disable Alphabooleanfalse
[nzTitle]Setting the title of the color pickerTemplateRef<void>｜string-
(nzOnChange)Callback when value is changedEventEmitter<{ color: NzColor; format: string }>-
(nzOnClear)Called when clearEventEmitter<boolean>-
(nzOnFormatChange)Callback when format is changedEventEmitter<'rgb'｜'hex'｜'hsb'>-
(nzOnOpenChange)Callback for opening the color panelEventEmitter<boolean>-

nz-color-block#

ParameterDescriptionTypeDefault
[nzColor]Module colorsstring#1677ff
[nzSize]Color block sizelarge｜default｜smalldefault
[nzOnClick]Callbacks for clicking on color blocksEventEmitter<boolean>-

NzColor#

ParameterDescriptionTypeDefault
toHexConvert to hex format characters, the return type like: 1677ff() => string-
toHexStringConvert to hex format color string, the return type like: #1677ff() => string-
toHsbConvert to hsb object() => ({ h: number, s: number, b: number, a number })-
toHsbStringConvert to hsb format color string, the return type like: hsb(215, 91%, 100%)() => string-
toRgbConvert to rgb object() => ({ r: number, g: number, b: number, a number })-
toRgbStringConvert to rgb format color string, the return type like: rgb(22, 119, 255)() => string-