Needless UI

Componentes

Selector de color

Un color en OKLCH, con controles deslizantes, muestras, cuentagotas y comprobación de contraste.

Importación

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

NuiColorPicker

Un selector de color en OKLCH.

Selector
nui-color-picker
NombreTipoPredeterminadoDescripción
valueBidireccionalstring''El color, escrito en el formato. Vacío hasta que se elige uno.
formatBidireccional'hex' | 'rgb' | 'hsl' | 'oklch' | 'p3''hex'Cómo se escribe el valor.
formatsInputNuiColorFormat[]hex, rgb, hsl, oklchLos formatos que recorre el botón de formato.
gamutInput'srgb' | 'p3''srgb'Los colores que abarca el área: sRGB o Display P3.
alphaInputbooleantrueMuestra el control deslizante de opacidad.
swatchesInputNuiColorSwatch[][]Colores para elegir, con nombre.
contrastWithInputstringUn fondo con el que comprobar el contraste.
eyeDropperInputbooleantrueMuestra el cuentagotas, si el navegador tiene uno.
disabledInputbooleanfalseNo se puede cambiar.
labelsInputPartial<NuiColorPickerLabels>Todos los textos que anuncia, para traducirlos.
colorPropiedadSignal<NuiColor>El color elegido, en OKLCH.

Helpers

Funciones para colores.

NombreTipoPredeterminadoDescripción
nuiParseColorMétodo(text: string) => NuiColor | nullLee un color en cualquier sintaxis de CSS.
nuiFormatColorMétodo(color, format?) => stringEscribe un color en un formato.
nuiToGamutMétodo(color, gamut?: 'srgb' | 'p3') => NuiColorLleva un color a sRGB o Display P3, como hace CSS.
nuiContrastMétodo(color, background) => numberLa relación de contraste WCAG 2 de un color sobre un fondo.