nxt-components logo nxt-components
Github

Angular color picker

GitHub license  npm  scope

A color picker widget for Angular with no dependencies.


Demo

Basic usage

View on GitHub
<input class="form-control"
    [style.background]="color"
    [(nxtColor)]="color" />

Grayscale color mode

View on GitHub
<input class="form-control"
    [style.background]="color"
    [(nxtColor)]="color"
    mode="grayscale" />

Show the color in the input field

View on GitHub
<input class="form-control"
    [value]="color"
    [style.background]="color"
    [style.color]="picker.textColorMode('#fff') == 'light' ? '#f8f9fa': '#212529'"
    #picker="nxtColorPicker"
    [(nxtColor)]="color" />

Output format

View on GitHub

<input class="form-control"
    [value]="color1"
    [style.background]="color1"
    [style.color]="picker1.textColorMode('#fff') == 'light' ? '#f8f9fa': '#212529'"
    #picker1="nxtColorPicker"
    outputFormat="rgba"
    [(nxtColor)]="color1" />
<br>
<input class="form-control"
    [value]="color2"
    [style.background]="color2"
    [style.color]="picker2.textColorMode('#fff') == 'light' ? '#f8f9fa': '#212529'"
    #picker2="nxtColorPicker"
    outputFormat="hsla"
    [(nxtColor)]="color2" />

Changing dialog position

View on GitHub
<input class="form-control"
    [value]="color"
    [style.background]="color"
    [style.color]="picker.textColorMode('#fff') == 'light' ? '#f8f9fa': '#212529'"
    #picker="nxtColorPicker"
    position="bottom"
    [(nxtColor)]="color" />

Dialog offset

View on GitHub

You can introduce a offset of the color picker relative to the html element

Change me!
<span [style.color]="color"
    class="change-me"
    position="bottom"
    [positionOffset]="0.5"
    [(nxtColor)]="color">Change me!</span>
.change-me {
    cursor: pointer;
    font-size: 30px;
    font-weight: bolder;
}

Show cancel button

View on GitHub
<input class="form-control"
    [value]="color"
    [style.background]="color"
    [style.color]="picker.textColorMode('#fff') == 'light' ? '#f8f9fa': '#212529'"
    #picker="nxtColorPicker"
    [cancelButton]="true"
    [(nxtColor)]="color" />

Show OK button

View on GitHub
<input class="form-control"
    [value]="color"
    [style.background]="color"
    [style.color]="picker.textColorMode('#fff') == 'light' ? '#f8f9fa': '#212529'"
    #picker="nxtColorPicker"
    [okButton]="true"
    [saveClickOutside]="false"
    [(nxtColor)]="color" />

Change color event

View on GitHub
cmyk(90,0,83,62)
CMYK
<input class="form-control"
    [style.background]="rgbColor"
    [nxtColor]="rgbColor"
    [cmykEnabled]="true"
    (cmykColorChange)="cmykValue = $event; cmykColor = onChangeColorCmyk($event)"
    (nxtColorChange)="rgbColor = $event" />
<div>{{ cmykValue }}</div>
<div class="cmyk-container">
    <span class="cmyk-text"
        style="color: rgb(0,255,255);"
        [style.font-size.px]="96 * cmykColor.c">C</span>
    <span class="cmyk-text"
        style="color: rgb(255,0,255)"
        [style.font-size.px]="96 * cmykColor.m">M</span>
    <span class="cmyk-text"
        style="color: rgb(255,255,0)"
        [style.font-size.px]="96 * cmykColor.y">Y</span>
    <span class="cmyk-text"
        style="color: rgb(0,0,0)"
        [style.font-size.px]="96 * cmykColor.k">K</span>
</div>
.cmyk-container {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    width: 144px;
}
 
.cmyk-text {
    width: 72px;
    font-weight: bolder;
    line-height: 72px;
    text-align: center;
    text-shadow: 1px 1px 2px #bbb;
    vertical-align: middle;
}

Preset colors

View on GitHub
<input class="form-control"
    [style.background]="color"
    [presetColors]="preset"
    [(nxtColor)]="color" />

Add and remove preset colors

View on GitHub
<input class="form-control"
    [style.background]="color"
    alphaChannel="always"
    outputFormat="rgba"
    [(presetColors)]="preset"
    [presetColorsEditable]="true"
    [maxPresetColors]="6"
    [(nxtColor)]="color" />

Use toggle with ignoredElements

View on GitHub



Toggle status: false
<input class="form-control"
    #ignoredInput
    [style.background]="color"
    fallbackColor="#f200bd"
    [ignoredElements]="[ignoredButton, ignoredInput]"
    [(toggle)]="toggle"
    [(nxtColor)]="color" />
<br>
<button #ignoredButton
    class="btn btn-primary"
    (click)="toggle =! toggle;">Toggle</button>
<br><br>
<strong>Toggle status: {{ toggle }}</strong>

Change alpha channel behavior

View on GitHub



<input class="form-control"
    [value]="color1"
    [style.background]="color1"
    [style.color]="picker1.textColorMode('#fff') == 'light' ? '#f8f9fa': '#212529'"
    #picker1="nxtColorPicker"
    alphaChannel="always"
    outputFormat="rgba"
    [(nxtColor)]="color1" />
<br>
<input class="form-control"
    [value]="color2"
    [style.background]="color2"
    [style.color]="picker2.textColorMode('#fff') == 'light' ? '#f8f9fa': '#212529'"
    #picker2="nxtColorPicker"
    alphaChannel="disabled"
    outputFormat="rgba"
    [(nxtColor)]="color2" />
<br>
<input class="form-control"
    [value]="color3"
    [style.background]="rgbaText"
    [style.color]="picker3.textColorMode('#fff') == 'light' ? '#f8f9fa': '#212529'"
    #picker3="nxtColorPicker"
    alphaChannel="always"
    outputFormat="hex"
    [nxtColor]="color3"
    (nxtColorChange)="rgbaText = onChangeColorHex8($event); color3 = $event" />
<br>
<input class="form-control"
    [value]="color4"
    [style.background]="color4"
    [style.color]="picker4.textColorMode('#fff') == 'light' ? '#f8f9fa': '#212529'"
    #picker4="nxtColorPicker"
    alphaChannel="forced"
    outputFormat="hex"
    [(nxtColor)]="color4" />

Show the dialog permanently

View on GitHub
Hex
<div>
    <ng-container dialogDisplay="inline"
        [cancelButton]="true"
        [(nxtColor)]="colors[selectedColor]"></ng-container>
</div>
<div>
    <div *ngFor="let color of colors; index as i"
        class="color-box"
        [style.background]="color"
        (click)="selectedColor = i"
        (keydown.enter)="selectedColor = i"
        tabindex="0"></div>
</div>
:host {
    display: flex;
    flex-wrap: wrap;
    gap: 32px;
    justify-content: space-around;
}
 
.color-box {
    width: 100px;
    height: 24px;
    cursor: pointer;
}
 
.color-box + .color-box {
    margin-top: 16px;
}