ColorPicker

When To Use#

Used when the user needs to customize the color selection.

import { NzColorPickerModule } 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...

Clear Color.

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...

Triggers for customizing color panels.

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...

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

expand codeexpand code
Loading...

Color Block.

expand codeexpand code
Loading...
#1677ff

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

expand codeexpand code
Loading...

API#

Install ng-antd-color-picker in your project first:

npm install ng-antd-color-picker

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
[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-