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

The simplest usage.

expand codeexpand code
      Loading...
    
#1677ff

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

expand codeexpand code
      Loading...
    

Disabled color alpha.

expand codeexpand code
      Loading...
    

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)

Encoding formats, support HEX, HSB, RGB.

expand codeexpand code
      Loading...
    
#1677ff

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

expand codeexpand code
      Loading...
    




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

expand codeexpand code
      Loading...
    
#1677ff

Set to disabled state.

expand codeexpand code
      Loading...
    

Clear Color.

expand codeexpand code
      Loading...
    

Triggers for customizing color panels.

expand codeexpand code
      Loading...
    

Color Block.

expand codeexpand code
      Loading...
    

API#

nz-color-picker#

ParameterDescriptionTypeDefault
[nzFormat]Format of colorrgbhexhsbhex
[nzValue]Value of colorstringNzColor-
[nzSize]Setting the trigger sizelargedefaultsmalldefault
[nzDefaultValue]Default value of colorstringNzColorfalse
[nzAllowClear]Allow clearing color selectedbooleanfalse
[nzTrigger]ColorPicker trigger modehoverclickclick
[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 sizelargedefaultsmalldefault
[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-