Skip to content
BlazorUI

Pickers

ColorPicker

Bit.BlazorUI

BitColorPicker is the panel a color is chosen on: a saturation-brightness area, hue and alpha sliders, text fields in hex, RGB, HSL or HSV, a palette of presets and the browser's eyedropper. It reads any CSS color notation and answers in the one it was given, or in the one Format pins. Every part is optional, so the same component is also a palette picker, a tint picker or a row of fields. It is fully keyboard-operable, announces colors by name, mirrors in right-to-left, and every string it writes is translatable.

Usage

Every example is live. Open its code to see exactly what produced the component running underneath.

Basic

Unbound, the picker keeps its own state, starting on white. Label (or LabelTemplate) names the panel. IsEnabled="false" greys it out and takes it out of the tab order; ReadOnly keeps it at full contrast and focusable, and only refuses changes.

Basic:

Label:
Brand color

LabelTemplate:
Accent color

Disabled:

ReadOnly:

Alpha & Preview

ShowAlphaSlider adds the transparency track and ShowPreview the swatch beside it, both drawn over a checkerboard. The alpha is tracked, and readable through Alpha, even without the slider.

Alpha slider and preview:

Preview only:

Inputs

ShowInputs adds text fields that commit on Enter or blur; an invalid value is put back. The hex field takes any CSS color, with or without the #, and grows to eight digits (plus an A% field) with the alpha slider on. InputsMode picks the channels - HexRgb, Hex, Rgb, Hsl or Hsv - and ShowInputsModeSwitch lets the user cycle them (@bind-InputsMode follows). The mode only changes how the color is typed, never the published Format.

Hex and RGB, with alpha:

User-selectable mode (the button at the end of the row):

Fixed to HSL:

Presets

Presets adds one-click swatches in any notation; the current one is ringed. A preset with its own alpha applies it, one without keeps the current alpha, and transparent offers "no color". PresetsPerRow lays them on a grid. The palette is one tab stop walked with the arrow keys, Home and End.

Brand palette:

One hue at four transparencies, plus "no color":

A shade ramp, five to a row:

Eye dropper

ShowEyeDropper adds a button that samples a color from anywhere on the screen. It is only rendered where the browser supports the EyeDropper API (Chromium); Escape cancels without changing the color.

Click the eyedropper, then click anywhere on the screen:

Contrast

ShowContrast shows the WCAG ratio against ContrastColor (white by default) with AA verdicts for normal (4.5:1) and large (3:1) text. A transparent color is composited onto the background first. Each verdict carries a mark as well as a color, and is announced with the saturation area.

Text color against a page background:
4.54:1 AA AA Large

Pick the background it is read on:

Against a dark surface, with transparency:
9.54:1 AA AA Large

Format

Unset, the picker answers in the notation it was given. Format pins one: Hex, Rgb, Hsl, Hsv, Hwb, Oklab or Oklch, each with an alpha-carrying twin (HexAlpha, Rgba, ...) that keeps the transparency in the string. Hsv is not a CSS notation.


Format

Binding

A one-way Color with no callback makes the picker a display: the page drives it and its own controls are inert. @bind-Color makes it two-way. The parser takes hex (3, 4, 6, 8 digits), rgb(), hsl(), hsv(), hwb(), lab(), lch(), oklab(), oklch(), color(srgb ...), keywords and transparent; anything else leaves the color unchanged. @bind-Alpha binds the transparency separately.

One-way:

Two-way (try 'tomato', '#0f8', 'rgb(255 128 0 / 40%)', 'hwb(280 10% 20%)', 'oklch(0.7 0.18 200)'):

Events & API

OnChange fires on every step of a drag; OnChangeEnd once per gesture (drag end, slider release, field commit, preset) - use it for expensive work. Both pass a BitColorChangeEventArgs with the color in every notation. A @ref exposes the same readings (Hex, Rgba, Hsl, Oklch, ColorDescription, ...) and FocusAsync.


Accessibility & localization

The saturation area is a "2D slider": arrows move 1%, Shift or PageUp/PageDown 10%, Home/End jump along the saturation axis, and horizontal arrows follow the reading direction. Colors are announced by name ("light vibrant green, ...") rather than channel numbers. Unnamed, the panel describes its color; AriaLabel overrides that. AutoFocus focuses the first control on render.

Texts translates every string the picker writes - accessible names, field captions and announcements. Its ...Format properties are string.Format templates, so a translation can reorder or drop placeholders.

Tab to the gradient, then use the arrow, Page, Home and End keys:

Read-only: still reachable, still announced, refuses every change.

رنگ برند

Compact pickers

ShowSaturationArea and ShowHueSlider (both on by default) turn off the gradient and the hue track, leaving a palette picker, a tint picker pinned to one hue, or a row of fields. For a dropdown-style picker, put it in a BitCallout: its AutoFocus lands on the picker's first control, and FocusAsync does the same from code.

A palette picker - no gradient, no hue:

A tint picker, pinned to one hue:

Fields only:

In a popover:
Text color

Cascading parameters

BitParams with a BitColorPickerParams sets defaults - shown parts, palette, format - for every picker under it; a picker's own value always wins. Color, Alpha and the callbacks are not cascaded, and the mode is cascaded as DefaultInputsMode so the user can still switch it.

Takes the palette, the inputs, the preview and the format from the cascade:

The same, without repeating any of it:

Its own Size, the cascaded rest:

Outside the cascade, and back to the defaults:

External Icons

EyeDropperIconName and InputsModeSwitchIconName take a bit icon name; EyeDropperIcon and InputsModeSwitchIcon take a BitIconInfo for external libraries (BitIconInfo.Fa, .Bi, .Css) and win when both are set. Reference the library's stylesheet yourself. The eyedropper only appears on supporting browsers.


bit icon set:

FontAwesome:

Bootstrap:

Size

Size scales the whole panel - gradient, tracks, thumbs, preview, swatches and type. Medium is the default.

Small:

Medium:

Large:

Style & Class

Style and Class reach the root; a fixed height shrinks the gradient, not the controls. Styles and Classes address each part by name (see BitColorPickerClassStyles). The public --bit-ColorPicker-* variables (see CSS variables) inherit, so set them on :root, an ancestor, or one picker's Style; they win over Size.

Component's Style & Class:



Styles & Classes:



CSS variables, on one instance:

The same variables on an ancestor, re-skinning both pickers under it:

RTL

Dir="BitDir.Rtl" mirrors the whole panel: the saturation axis, both tracks, the thumbs, the arrow keys, the fields and the presets.

CSS variables

The public custom properties this component reads off its root, for what no parameter covers.

Every variable is read with a fallback and never declared by the component, so it inherits like any other custom property: set one on :root (or in a [bit-theme] block) to restyle every instance, on any ancestor to restyle the ones inside it, or on the Style of one instance to restyle that one alone. Leave a variable unset and the component falls back to the theme token beside it.

BitColorPicker CSS variables

Name Default value Description
--bit-ColorPicker-width Per Size (33.5 spacing units at Medium) Width of the whole panel. A size class never overrides it, so this is how a panel is fitted to a popover or a sidebar the Size presets do not suit.
--bit-ColorPicker-background transparent Background behind the panel, for a picker that has to read as a surface of its own rather than as part of the one it sits on.
--bit-ColorPicker-padding 0 Padding around the panel, usually set together with a background and a radius.
--bit-ColorPicker-radius 0 Corner radius of the panel itself. The parts inside it keep their own radii.
--bit-ColorPicker-gap 1 spacing unit Vertical rhythm between the rows of the panel: under the gradient, under each slider, above the contrast readout and above the palette.
--bit-ColorPicker-font-size Per Size, from the type ramp Text size of the panel, which the label and the text fields inherit.
--bit-ColorPicker-caption-font-size One step below the panel, per Size Text size of the captions under the fields and of the contrast readout.
--bit-ColorPicker-border-color --bit-clr-brd-pri Color of every border the panel draws: the gradient, both tracks, the thumbs, the preview, the fields, the buttons and the swatches.
--bit-ColorPicker-focus-color --bit-clr-pri-focus Color of the keyboard focus ring on every focusable part of the picker.
--bit-ColorPicker-label-color --bit-clr-fg-pri Color of the Label text.
--bit-ColorPicker-saturation-height Per Size (29.5 spacing units at Medium) Height of the saturation-brightness area. It is also the row that gives way when the panel is pinned to a height smaller than its content.
--bit-ColorPicker-saturation-radius --bit-shp-radius-control Corner radius of the saturation-brightness area.
--bit-ColorPicker-thumb-size Per Size (2.5 spacing units at Medium) Diameter of the saturation thumb and of the thumbs of both sliders, which is also what reserves the room they overhang their tracks by.
--bit-ColorPicker-thumb-color --bit-clr-ntr-white Fill of the hue and alpha slider thumbs.
--bit-ColorPicker-thumb-ring-color --bit-clr-ntr-white Inner ring inside the saturation thumb, which is what keeps it readable over a dark area of the gradient the way the shadow keeps it readable over a light one.
--bit-ColorPicker-thumb-shadow --bit-shd-nm Elevation under the saturation thumb, which is what keeps it visible over a light area of the gradient.
--bit-ColorPicker-track-height Per Size (2.5 spacing units at Medium) Height of the hue and alpha tracks.
--bit-ColorPicker-track-radius --bit-shp-radius-control Corner radius of both tracks.
--bit-ColorPicker-preview-size Per Size (6 spacing units at Medium) Width and height of the preview box.
--bit-ColorPicker-preview-radius --bit-shp-radius-control Corner radius of the preview box.
--bit-ColorPicker-button-size Per Size (3 spacing units at Medium) Square of the eye dropper and inputs-mode buttons. Keep it at or above 24px, which is the minimum pointer target WCAG 2.2 asks for.
--bit-ColorPicker-button-color --bit-clr-fg-pri Glyph color of those two buttons.
--bit-ColorPicker-button-radius --bit-shp-radius-button Corner radius of those two buttons.
--bit-ColorPicker-button-hover-background --bit-clr-bg-sec-hover Background of those buttons on hover, on pointer devices only.
--bit-ColorPicker-button-active-background --bit-clr-bg-sec-active Background of those buttons while pressed.
--bit-ColorPicker-icon-size Per Size (--bit-siz-icon-md at Medium) Glyph size inside the eye dropper and inputs-mode buttons.
--bit-ColorPicker-field-color --bit-clr-fg-pri Text color of the hexadecimal and channel fields.
--bit-ColorPicker-field-background --bit-clr-bg-pri Background of those fields.
--bit-ColorPicker-field-radius --bit-shp-radius-control Corner radius of those fields.
--bit-ColorPicker-field-label-color --bit-clr-fg-sec Color of the caption under a field.
--bit-ColorPicker-swatch-size Per Size (3 spacing units at Medium) Square of a preset swatch, and the column width a PresetsPerRow grid is laid out on.
--bit-ColorPicker-swatch-radius --bit-shp-radius-sm Corner radius of a preset swatch. The ring marking the selected one inherits it, so round swatches get a round ring.
--bit-ColorPicker-swatch-gap 0.5 spacing units Space between preset swatches, in both directions.
--bit-ColorPicker-swatch-ring-color --bit-clr-ntr-white Inner ring that marks the swatch the picker is currently on.
--bit-ColorPicker-swatch-ring-shadow --bit-clr-ntr-black Outer ring drawn around the inner one, which is what keeps the mark readable on a swatch of the inner ring's own color.
--bit-ColorPicker-checkerboard-size 0.75 spacing units (0.5 on a swatch) Square of the grid that transparency is read against, under the alpha track, the preview box and the swatches.
--bit-ColorPicker-checkerboard-color --bit-clr-brd-sec Darker square of that grid.
--bit-ColorPicker-checkerboard-background --bit-clr-ntr-white Lighter square of that grid.
--bit-ColorPicker-contrast-color --bit-clr-fg-pri Color of the contrast ratio in the readout.
--bit-ColorPicker-contrast-pass-color --bit-clr-suc Color of a badge whose color clears the WCAG bar. The badge also carries a check mark, so the verdict never rests on color alone.
--bit-ColorPicker-contrast-fail-color --bit-clr-err Color of a badge that does not clear it, which also carries a cross.

API

Every parameter, public member, sub-class and enum this component exposes.

BitColorPicker parameters

Name Type Default value Description
Alpha double 1 Indicates the Alpha value, from 0 (fully transparent) to 1 (fully opaque). The alpha is tracked whether or not ShowAlphaSlider renders a control for it, and a color string that carries its own alpha overrides this parameter.
AutoFocus bool false Whether the picker takes the focus on the first render, landing on the saturation-brightness area - or, on a picker built without it, on whichever of its controls comes first.
Classes BitColorPickerClassStyles? null Custom CSS classes for different parts of the BitColorPicker.
Color string rgb(255,255,255) String describing the color. Hexadecimal in three, four, six or eight digits, rgb() and rgba(), hsl() and hsla(), hwb(), lab() and lch(), oklab() and oklch(), color(srgb ...), a CSS color keyword such as "tomato", and transparent are all understood, in both the comma-separated and the modern space-separated syntax, as are hsv() and hsva(), which are not CSS notations but the model the picker itself is built on.
ContrastColor string? null The color the contrast readout measures the picked color against - the background it is going to be read on. It accepts any of the notations Color does, and defaults to white.
DefaultInputsMode BitColorInputsMode? null The set of channels the text fields start in, for a picker whose InputsMode is not bound. It is read once, while the picker initializes, so the inputs mode switch keeps whatever it moves to.
EyeDropperIcon BitIconInfo? null The icon of the eye dropper button, using custom CSS classes for external icon libraries. Takes precedence over EyeDropperIconName when both are set.
EyeDropperIconName string? null Custom icon name for the eye dropper button. If unset, default will be the Eyedropper icon.
Format BitColorFormat? null The notation the color value is written in, CSS or the non-CSS hsv() and hsva(). When left unset the picker answers in the same notation the Color arrived in.
InputsMode BitColorInputsMode BitColorInputsMode.HexRgb Which channels the text fields are written in. It decides how the color is typed, not how it is published - a picker edited in HSL still answers in whatever Format says. A mode the user is allowed to move belongs in DefaultInputsMode, or in this one bound two ways.
InputsModeSwitchIcon BitIconInfo? null The icon of the inputs mode switch button, using custom CSS classes for external icon libraries. Takes precedence over InputsModeSwitchIconName when both are set.
InputsModeSwitchIconName string? null Custom icon name for the inputs mode switch button. If unset, default will be the Sort icon.
Label string? null The text that names the picker. It is not a label element: with no single input to point a "for" at, one would label nothing, so the panel is named through aria-labelledby instead.
LabelTemplate RenderFragment? null Custom markup in place of the plain Label text, for when the name needs more than a string.
OnChange EventCallback<BitColorChangeEventArgs> Callback for when the value changed. It fires on every step of a drag.
OnChangeEnd EventCallback<BitColorChangeEventArgs> Callback for when the user finishes changing the value: the drag ends, the slider is released, a text field is committed, or a preset is picked.
Presets IEnumerable<string>? null The colors offered as a row of one-click swatches under the picker, in any of the notations the Color parameter accepts. A swatch that carries its own alpha applies that alpha too.
PresetsPerRow int? null How many preset swatches are laid out per row. Left unset they simply wrap; setting it lays them out on a grid instead, which keeps a palette meant to be read in columns in the arrangement it was written in.
ReadOnly bool false Makes the color picker read-only: the value is still shown at full contrast and every control stays in the tab order, so the color can be read out, but nothing about it can be changed. The widgets that hold a value declare aria-readonly or the native readonly, and the buttons that would change the color declare aria-disabled.
ShowAlphaSlider bool false Whether to show a slider for editing alpha value.
ShowContrast bool false Whether to show the contrast readout: how far the picked color stands from the ContrastColor it will be read on, and whether that clears the WCAG bar for text.
ShowEyeDropper bool false Whether to show the button that opens the browser's eyedropper to sample a color from anywhere on the screen. The button is only rendered where the browser actually provides one.
ShowHueSlider bool true Whether to show the hue slider. Turning it off pins the picker to one hue, which is what a tint picker for a brand color is.
ShowInputs bool false Whether to show the hexadecimal and Red-Green-Blue text fields, which is how an exact color is entered or read off without hunting for it on the gradient.
ShowInputsModeSwitch bool false Whether to show the button that moves the text fields from one set of channels to the next, so the user can type the color in whichever model they are thinking in.
ShowPreview bool false Whether to show color preview box.
ShowSaturationArea bool true Whether to show the saturation-brightness area. Turning it off is what makes a palette picker out of the presets, the text fields, or both; AutoFocus and FocusAsync then land on whichever control comes first.
Size BitSize? null The size of the color picker.
Styles BitColorPickerClassStyles? null Custom CSS styles for different parts of the BitColorPicker.
Texts BitColorPickerTexts? null Every piece of text the picker writes for itself: the accessible names of its controls, the captions of its fields, and the sentences it announces the color with. This is the parameter that translates the component; an unset property keeps its English default.

BitColorPicker public members

Name Type Default value Description
Hex string The current color in six-digit hexadecimal notation, e.g. #FF0000.
HexAlpha string The current color in eight-digit hexadecimal notation, whose last pair is the alpha channel, e.g. #FF000080.
Rgb string The current color in functional RGB notation, e.g. rgb(255,0,0).
Rgba string The current color in functional RGB notation with its alpha channel, e.g. rgba(255,0,0,0.5).
Hsl (double Hue, double Saturation, double Lightness) The current color as hue (0-360), saturation and lightness (both 0-1).
Hsv (double Hue, double Saturation, double Value) The current color as hue (0-360), saturation and value (both 0-1).
Hwb (double Hue, double Whiteness, double Blackness) The current color as hue (0-360), whiteness and blackness (both 0-1).
Oklch (double Lightness, double Chroma, double Hue) The current color as Oklab lightness (0-1), chroma (0 to about 0.4) and hue (0-360).
ColorDescription string The current color said in words, e.g. light vibrant blue. It is what the picker announces to a screen reader, and what a page showing the color elsewhere usually names it with.
FocusAsync ValueTask Moves the focus to the picker, landing on the saturation-brightness area - or, on a picker built without it, on whichever control comes first.

BitComponentBase parameters

Name Type Default value Description
AriaLabel string? null Gets or sets the accessible label for the component, used by assistive technologies.
Class string? null Gets or sets the CSS class name(s) to apply to the rendered element.
Dir BitDir? null Gets or sets the text directionality for the component's content.
ForceAnimation bool false Gets or sets a value indicating whether the component's animations play at their full duration even when reduced motion is requested.
HtmlAttributes Dictionary<string, object> new Dictionary<string, object>() Captures additional HTML attributes to be applied to the rendered element, in addition to the component's parameters.
Id string? null Gets or sets the unique identifier for the component's root element.
IsEnabled bool true Gets or sets a value indicating whether the component is enabled and can respond to user interaction.
Style string? null Gets or sets the CSS style string to apply to the rendered element.
TabIndex string? null Gets or sets the tab order index for the component when navigating with the keyboard.
Visibility BitVisibility BitVisibility.Visible Gets or sets the visibility state (visible, hidden, or collapsed) of the component.

BitComponentBase public members

Name Type Default value Description
UniqueId Guid Guid.NewGuid() Gets the readonly unique identifier for the component's root element, assigned when the component instance is constructed.
RootElement ElementReference Gets the reference to the root HTML element associated with this component.

BitColorChangeEventArgs properties

Describes the color the picker has just moved to, in every notation at once.

Name Type Default value Description
Color string? null The main color value of the changed color in the same format as the Color parameter of the ColorPicker.
Alpha double 0 The alpha value of the changed color, from 0 (fully transparent) to 1 (fully opaque).
Hex string? null The changed color in six-digit hexadecimal notation, e.g. #FF0000.
HexAlpha string? null The changed color in eight-digit hexadecimal notation, whose last pair is the alpha channel, e.g. #FF000080.
Rgb string? null The changed color in functional RGB notation, e.g. rgb(255,0,0).
Rgba string? null The changed color in functional RGB notation with its alpha channel, e.g. rgba(255,0,0,0.5).
Hsl (double Hue, double Saturation, double Lightness) The changed color as hue (0-360), saturation and lightness (both 0-1).
Hsv (double Hue, double Saturation, double Value) The changed color as hue (0-360), saturation and value (both 0-1).
Hwb (double Hue, double Whiteness, double Blackness) The changed color as hue (0-360), whiteness and blackness (both 0-1).
Oklch (double Lightness, double Chroma, double Hue) The changed color as Oklab lightness (0-1), chroma (0 to about 0.4) and hue (0-360).
ColorDescription string? null The changed color said in words, e.g. "light vibrant blue".

BitColorPickerClassStyles properties

Custom CSS classes/styles for the parts of the BitColorPicker.

Name Type Default value Description
Root string? null Custom CSS classes/styles for the root element of the color picker.
LabelContainer string? null Custom CSS classes/styles for the element the label is rendered into.
Label string? null Custom CSS classes/styles for the label text of the color picker.
SaturationPicker string? null Custom CSS classes/styles for the saturation-value area of the color picker.
SaturationThumb string? null Custom CSS classes/styles for the thumb of the saturation-value area.
Content string? null Custom CSS classes/styles for the row that holds the sliders, the eye dropper and the preview.
Sliders string? null Custom CSS classes/styles for the column that holds the hue and alpha sliders.
HueSlider string? null Custom CSS classes/styles for the track of the hue slider.
AlphaSlider string? null Custom CSS classes/styles for the track of the alpha slider.
SliderInput string? null Custom CSS classes/styles for the range inputs of both sliders.
EyeDropper string? null Custom CSS classes/styles for the eye dropper button.
EyeDropperIcon string? null Custom CSS classes/styles for the icon of the eye dropper button.
InputsModeSwitch string? null Custom CSS classes/styles for the button that moves the text fields to the next set of channels.
InputsModeSwitchIcon string? null Custom CSS classes/styles for the icon of the inputs mode switch button.
Preview string? null Custom CSS classes/styles for the color preview box.
Inputs string? null Custom CSS classes/styles for the row of the hex and channel text fields.
Field string? null Custom CSS classes/styles for a single field of the inputs row, label included.
FieldInput string? null Custom CSS classes/styles for the text input of a single field.
FieldLabel string? null Custom CSS classes/styles for the caption of a single field.
Contrast string? null Custom CSS classes/styles for the row that holds the contrast readout.
ContrastRatio string? null Custom CSS classes/styles for the contrast ratio itself.
ContrastBadge string? null Custom CSS classes/styles for a pass/fail badge of the contrast readout.
Presets string? null Custom CSS classes/styles for the container of the preset swatches.
Preset string? null Custom CSS classes/styles for a single preset swatch.
SelectedPreset string? null Custom CSS classes/styles for the preset swatch of the current color, applied on top of Preset.

BitColorPickerTexts properties

Every piece of text the BitColorPicker writes for itself. The Format properties are string.Format templates, so a translation is free to reorder what they interpolate - or to leave a placeholder out, which is the way to drop the English ColorDescription from an announcement.

Name Type Default value Description
SaturationAreaLabel string Saturation and brightness The accessible name of the saturation-brightness area.
SaturationAreaRoleDescription string 2D slider What that area calls itself through aria-roledescription, so that both axes it is driven on are announced.
SaturationValueFormat string {0}, Saturation {1}%, Brightness {2}%, {3} What that area announces its value as. {0} the color description, {1} the saturation, {2} the brightness, {3} the hex.
HueLabel string Hue The accessible name of the hue slider, and the tooltip of the hue channel field.
HueValueFormat string Hue {0} degrees, {1} What the hue slider announces its value as, unit included. {0} the hue in degrees, {1} the name of that hue (in English).
HueFieldLabel string H The caption under the hue channel field, which has to fit the width of one field.
AlphaLabel string Alpha The accessible name of the alpha slider, and the tooltip of the alpha field.
AlphaValueFormat string Alpha {0}% What the alpha slider announces its value as. {0} the alpha as a percentage.
AlphaFieldLabel string A% The caption under the alpha percentage field.
HexFieldLabel string Hex The caption under the hexadecimal field.
RedLabel string Red The tooltip of the red channel field, which screen readers read as its description.
RedFieldLabel string R The caption under the red channel field.
GreenLabel string Green The tooltip of the green channel field, which screen readers read as its description.
GreenFieldLabel string G The caption under the green channel field.
BlueLabel string Blue The tooltip of the blue channel field, which screen readers read as its description.
BlueFieldLabel string B The caption under the blue channel field.
SaturationLabel string Saturation The tooltip of the saturation channel field, which screen readers read as its description.
SaturationFieldLabel string S The caption under the saturation channel field.
LightnessLabel string Lightness The tooltip of the lightness channel field of the HSL mode, which screen readers read as its description.
LightnessFieldLabel string L The caption under the lightness channel field.
BrightnessLabel string Brightness The tooltip of the brightness channel field of the HSV mode, which screen readers read as its description.
BrightnessFieldLabel string V The caption under the brightness channel field.
PickerLabelFormat string Color picker, {0}, Red {1} Green {2} Blue {3} selected. What the picker calls itself when it has neither an AriaLabel nor a Label. {0} the color description, {1} red, {2} green, {3} blue.
PickerLabelWithAlphaFormat string Color picker, {0}, Red {1} Green {2} Blue {3} and Alpha {4}% selected. The same, for a picker whose alpha slider is shown. {4} is the alpha as a percentage.
EyeDropperLabel string Pick a color from the screen The tooltip and accessible name of the eye dropper button.
HexRgbModeLabel string HEX & RGB What the inputs mode switch calls the HexRgb set of fields.
HexModeLabel string HEX What the inputs mode switch calls the Hex set of fields.
RgbModeLabel string RGB What the inputs mode switch calls the Rgb set of fields.
HslModeLabel string HSL What the inputs mode switch calls the Hsl set of fields.
HsvModeLabel string HSV What the inputs mode switch calls the Hsv set of fields.
InputsModeFormat string Color inputs: {0} The tooltip of the inputs mode switch. {0} the name of the current mode, which is the matching ...ModeLabel.
InputsModeSwitchFormat string Color inputs: {0}. Switch to the next set. The accessible name of the inputs mode switch, which says what pressing it will do as well. {0} the name of the current mode.
PresetsLabel string Color presets The accessible name of the palette of preset swatches.
PresetLabelFormat string {0}, {1} The accessible name of one swatch. {0} the color description, {1} the preset value as it was written.
ContrastRatioFormat string Contrast ratio {0} to 1 How the contrast ratio is read out, since the bare pair of numbers carries no unit. {0} the ratio.
ContrastAaBadge string AA The caption of the badge for normal text.
ContrastAaFormat string WCAG AA for normal text: {0} How that badge is read out. {0} the pass or fail label.
ContrastAaLargeBadge string AA Large The caption of the badge for large text.
ContrastAaLargeFormat string WCAG AA for large text: {0} How that badge is read out. {0} the pass or fail label.
ContrastPassLabel string pass The verdict of a badge whose color clears the bar.
ContrastFailLabel string fail The verdict of a badge whose color does not.

BitColorFormat enum

Name Value Description
Hex 0 Six-digit hexadecimal notation: #RRGGBB.
HexAlpha 1 Eight-digit hexadecimal notation, whose last pair is the alpha channel: #RRGGBBAA.
Rgb 2 Functional RGB notation: rgb(255,0,0).
Rgba 3 Functional RGB notation with an alpha channel: rgba(255,0,0,0.5).
Hsl 4 Functional HSL notation: hsl(0,100%,50%).
Hsla 5 Functional HSL notation with an alpha channel: hsla(0,100%,50%,0.5).
Hsv 6 Functional HSV notation: hsv(0,100%,100%). It is the model the picker itself is built on, but unlike the others it is not a notation any browser understands.
Hsva 7 Functional HSV notation with an alpha channel: hsva(0,100%,100%,0.5).
Hwb 8 Functional HWB notation: hwb(0 0% 0%). CSS only defines the space-separated syntax for it, so that is the one written.
Hwba 9 Functional HWB notation with an alpha channel: hwb(0 0% 0% / 0.5). CSS has no hwba() function - the alpha is written into hwb() itself, after a slash.
Oklab 10 Functional Oklab notation: oklab(0.6279 0.2249 0.1258). Oklab is a perceptually uniform color space, so the same numeric step covers the same visual difference wherever it is taken.
Oklaba 11 Functional Oklab notation with an alpha channel: oklab(0.6279 0.2249 0.1258 / 0.5).
Oklch 12 Functional Oklch notation: oklch(0.6279 0.2577 29.23). It is the polar form of Oklab, and the notation modern design tokens are increasingly written in.
Oklcha 13 Functional Oklch notation with an alpha channel: oklch(0.6279 0.2577 29.23 / 0.5).

BitColorInputsMode enum

Name Value Description
HexRgb 0 The hexadecimal field alongside the three Red-Green-Blue channels, which is the pair most color pickers show together.
Hex 1 The hexadecimal field on its own.
Rgb 2 The Red, Green and Blue channels, each from 0 to 255.
Hsl 3 Hue in degrees, saturation and lightness as percentages.
Hsv 4 Hue in degrees, saturation and brightness as percentages - the model the picker itself is driven in.

BitSize enum

Name Value Description
Small 0 Display the color picker using small size.
Medium 1 Display the color picker using medium size.
Large 2 Display the color picker using large size.

BitVisibility enum

Name Value Description
Visible 0 The content of the component is visible.
Hidden 1 The content of the component is hidden, but the space it takes on the page remains (visibility:hidden).
Collapsed 2 The component is hidden (display:none).

BitDir enum

Name Value Description
Ltr 0 Ltr (left to right) is to be used for languages that are written from the left to the right (like English).
Rtl 1 Rtl (right to left) is to be used for languages that are written from the right to the left (like Arabic).
Auto 2 Auto lets the user agent decide. It uses a basic algorithm as it parses the characters inside the element until it finds a character with a strong directionality, then applies that directionality to the whole element.

Feedback

Found a mistake, a gap, or something that could be clearer? Every page and every component is one click from its source.