Angular color picker
A color picker widget for Angular with no dependencies.
Demo
Basic usage
View on GitHub<input class="form-control" [style.background]="color" [(nxtColor)]="color" />
import { Component, ViewEncapsulation } from '@angular/core' @Component({ selector: 'app-basic-example', templateUrl: './basic-example.component.html', styleUrls: ['./basic-example.component.css'], encapsulation: ViewEncapsulation.Emulated }) export class BaicExampeComponent { color = '#2889e9' }
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 GitHubYou can introduce a offset of the color picker relative to the html element
<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 GitHubcmyk(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; }
import { Component, ViewEncapsulation } from '@angular/core' import { Cmyk, formatCmyk, stringToCmyk } from 'nxt-color-picker' @Component({ selector: 'app-change-event', templateUrl: './change-event.component.html', styleUrls: ['./change-event.component.css'], encapsulation: ViewEncapsulation.Emulated }) export class ChangeEventComponent { rgbColor = '#0a6211' cmykColor = stringToCmyk(this.rgbColor)! cmykValue = formatCmyk(this.cmykColor, 'enabled') onChangeColorCmyk(color: string) { const cmyk = stringToCmyk(color) return cmyk || new Cmyk(0, 0, 0, 0, 1, true) } }
Preset colors
View on GitHub<input class="form-control" [style.background]="color" [presetColors]="preset" [(nxtColor)]="color" />
import { Component, ViewEncapsulation } from '@angular/core' @Component({ selector: 'app-color-preset', templateUrl: './color-preset.component.html', styleUrls: ['./color-preset.component.css'], encapsulation: ViewEncapsulation.Emulated }) export class ColorPresetComponent { color = '#f2ff00' preset = [ '#fff', '#000', '#2889e9', '#e920e9', '#fff500', 'rgb(236,64,64)' ] }
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" />
import { Component, ViewEncapsulation } from '@angular/core' @Component({ selector: 'app-manage-preset', templateUrl: './manage-preset.component.html', styleUrls: ['./manage-preset.component.css'], encapsulation: ViewEncapsulation.Emulated }) export class ManagePresetComponent { color = 'rgba(0,255,0,0.5)' preset = [ '#fff', '#2889e9' ] }
Use toggle with ignoredElements
View on GitHubToggle 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>
import { Component, ViewEncapsulation } from '@angular/core' @Component({ selector: 'app-toggle-button', templateUrl: './toggle-button.component.html', styleUrls: ['./toggle-button.component.css'], encapsulation: ViewEncapsulation.Emulated }) export class ToggleButtonComponent { color = '#f200bd' toggle = false }
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" />
import { Component, ViewEncapsulation } from '@angular/core' import { formatOutput, stringToHsva } from 'nxt-color-picker' @Component({ selector: 'app-alpha-channel', templateUrl: './alpha-channel.component.html', styleUrls: ['./alpha-channel.component.css'], encapsulation: ViewEncapsulation.Emulated }) export class AlphaChannelComponent { color1 = 'rgb(0,255,255)' color2 = 'rgba(0,255,0,0.5)' color3 = '#a51ad633' color4 = 'rgb(255,0,0)' rgbaText = this.onChangeColorHex8(this.color3) onChangeColorHex8(color: string) { const hsva = stringToHsva(color, true) if (hsva) { return formatOutput(hsva, 'rgba') } return '' } }
Show the dialog permanently
View on GitHubHex
<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"></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; }
import { Component, ViewEncapsulation } from '@angular/core' @Component({ selector: 'app-as-component', templateUrl: './as-component.component.html', styleUrls: ['./as-component.component.css'], encapsulation: ViewEncapsulation.Emulated }) export class AsComponentComponent { colors = [ '#2883e9', '#e920e9', 'rgb(255,245,0)', 'rgb(236,64,64)', 'rgba(45,208,45,1)' ] selectedColor = 0 }