Needless UI

Components

Color picker

A color in OKLCH, with sliders, swatches, an eyedropper and a contrast check.

Import

import-color-picker.ts
import { NuiColorPicker, nuiParseColor } from '@needless-ui/angular/color-picker';

NuiColorPicker

A color picker in OKLCH.

Selector
nui-color-picker
NameTypeDefaultDescription
valueTwo-waystring''The color, written in the format. Empty until one is picked.
formatTwo-way'hex' | 'rgb' | 'hsl' | 'oklch' | 'p3''hex'How the value is written.
formatsInputNuiColorFormat[]hex, rgb, hsl, oklchThe formats the format button goes through.
gamutInput'srgb' | 'p3''srgb'The colors the area holds: sRGB, or Display P3.
alphaInputbooleantrueShows the opacity slider.
swatchesInputNuiColorSwatch[][]Colors to pick from, with names.
contrastWithInputstringA background to check the contrast against.
eyeDropperInputbooleantrueShows the eyedropper, where the browser has one.
disabledInputbooleanfalseIt can’t be changed.
labelsInputPartial<NuiColorPickerLabels>Every text it says, to translate.
colorPropertySignal<NuiColor>The color picked, in OKLCH.

Helpers

Functions for colors.

NameTypeDefaultDescription
nuiParseColorMethod(text: string) => NuiColor | nullReads a color in any CSS syntax.
nuiFormatColorMethod(color, format?) => stringWrites a color in a format.
nuiToGamutMethod(color, gamut?: 'srgb' | 'p3') => NuiColorBrings a color into sRGB or Display P3, as CSS does.
nuiContrastMethod(color, background) => numberThe WCAG 2 contrast ratio of a color on a background.