Needless UI

Componentes

Seletor de cor

Uma cor em OKLCH, com controles deslizantes, amostras, conta-gotas e verificação de contraste.

Importação

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

NuiColorPicker

Um seletor de cor em OKLCH.

Seletor
nui-color-picker
NomeTipoPadrãoDescrição
valueBidirecionalstring''A cor, escrita no formato. Vazia até que uma seja escolhida.
formatBidirecional'hex' | 'rgb' | 'hsl' | 'oklch' | 'p3''hex'Como o valor é escrito.
formatsInputNuiColorFormat[]hex, rgb, hsl, oklchOs formatos pelos quais o botão de formato passa.
gamutInput'srgb' | 'p3''srgb'As cores que a área contém: sRGB ou Display P3.
alphaInputbooleantrueMostra o controle deslizante de opacidade.
swatchesInputNuiColorSwatch[][]Cores para escolher, com nomes.
contrastWithInputstringUm fundo contra o qual verificar o contraste.
eyeDropperInputbooleantrueMostra o conta-gotas, onde o navegador tem um.
disabledInputbooleanfalseNão pode ser alterado.
labelsInputPartial<NuiColorPickerLabels>Todo texto que ele anuncia, para traduzir.
colorPropriedadeSignal<NuiColor>A cor escolhida, em OKLCH.

Helpers

Funções para cores.

NomeTipoPadrãoDescrição
nuiParseColorMétodo(text: string) => NuiColor | nullLê uma cor em qualquer sintaxe CSS.
nuiFormatColorMétodo(color, format?) => stringEscreve uma cor em um formato.
nuiToGamutMétodo(color, gamut?: 'srgb' | 'p3') => NuiColorTraz uma cor para sRGB ou Display P3, como o CSS faz.
nuiContrastMétodo(color, background) => numberA relação de contraste WCAG 2 de uma cor sobre um fundo.