Skip to content
BlazorUI

Pickers

ColorPicker

Bit.BlazorUIColorPaletteSwatch

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. Disabled 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

The color is the picker's Value, a CSS color string. A one-way Value with no callback makes the picker a display: the page drives it and its own controls are inert. @bind-Value 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

OnColorChange 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. The inherited OnChange reports the same moves with the new Value alone. 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. Value, 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:

Validation

Inside an EditForm the picker is a form field like any other: @bind-Value joins the EditContext, every change is reported to it, and while the value is invalid every border the panel draws, and its focus ring, turn red. A picker bound to nothing shows white without taking it as its value, so a Required annotation keeps the form unsubmittable until a color is actually picked. Required on the picker marks its label with an asterisk, and the value travels in a hidden input, so Name also makes it readable by a plain form post.

Brand color

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 restyle the default, not a choice: an explicit Size wins over the size variables.

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 it - and any instance nested inside it, which inherits the value too; a parameter changes one alone, as does the real CSS property on the instance's Style / Styles when that property does not inherit (opacity: 1 keeps one disabled instance undimmed without undimming a disabled one inside it), while an inherited one such as color or font-family also reaches the nested instances that do not set it themselves. 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 33.5 spacing units Width of the whole panel, which is how a panel is fitted to a popover or a sidebar the Size presets do not suit. The Size parameter wins over it, so leave Size unset where it is used.
--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 --bit-tpg-fs-sm Text size of the panel, which the label and the text fields inherit. The Size parameter wins over it.
--bit-ColorPicker-caption-font-size --bit-tpg-fs-xs Text size of the captions under the fields and of the contrast readout. The Size parameter wins over it.
--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. While it is unset, the focus ring is the library's own --bit-shd-focus-ring, so replacing that token re-shapes it too.
--bit-ColorPicker-label-color --bit-clr-fg-pri Color of the Label text.
--bit-ColorPicker-required-color --bit-clr-req Color of the asterisk drawn after the label of a Required picker, after a LabelTemplate as well.
--bit-ColorPicker-invalid-color --bit-clr-err / --bit-clr-err-focus Color of every border the panel draws, and of the keyboard focus ring, while the value fails the validation of the EditForm it is in. It replaces --bit-ColorPicker-border-color and --bit-ColorPicker-focus-color for that time only.
--bit-ColorPicker-saturation-height 29.5 spacing units 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. The Size parameter wins over it.
--bit-ColorPicker-saturation-radius --bit-shp-radius-control Corner radius of the saturation-brightness area.
--bit-ColorPicker-thumb-size 2.5 spacing units Diameter of the saturation thumb and of the thumbs of both sliders, which is also what reserves the room they overhang their tracks by. The Size parameter wins over it.
--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 2.5 spacing units Height of the hue and alpha tracks. The Size parameter wins over it.
--bit-ColorPicker-track-radius --bit-shp-radius-control Corner radius of both tracks.
--bit-ColorPicker-preview-size 6 spacing units Width and height of the preview box. The Size parameter wins over it.
--bit-ColorPicker-preview-radius --bit-shp-radius-control Corner radius of the preview box.
--bit-ColorPicker-button-size 3 spacing units 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. The Size parameter wins over it.
--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 --bit-siz-icon-md Glyph size inside the eye dropper and inputs-mode buttons. The Size parameter wins over it.
--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 3 spacing units Square of a preset swatch, and the column width a PresetsPerRow grid is laid out on. The Size parameter wins over it.
--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.
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 Value 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 Value 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.
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.
OnColorChange EventCallback<BitColorChangeEventArgs> Callback for when the color changed, carrying it in every notation along with its alpha. It fires on every step of a drag. The inherited OnChange reports the same moves with the Value alone; this one also reports a move of the alpha that the notation of the Value has no room for.
Presets IEnumerable<string>? null The colors offered as a row of one-click swatches under the picker, in any of the notations the Value 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.
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. An explicit value wins over the --bit-ColorPicker-* size variables (width, font and caption sizes, saturation height, thumb, track, button, icon, preview and swatch sizes); left unset, the picker is medium unless they say otherwise.
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.
Value string? null The color, as a CSS color string - this is the parameter to bind (@bind-Value). 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. A picked color is written back in the notation the Value arrived in, or in the one Format pins. A null or unrecognized value shows white and is left as it is, so a required picker bound to nothing stays invalid until a color is actually picked.

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.

BitInputBase parameters

Name Type Default value Description
DefaultValue TValue? null The default value of the input to be used in uncontrolled mode (i.e. when the Value is not bound), typically used alongside the OnChange callback.
DisplayName string? null Gets or sets the display name for this field.
InputHtmlAttributes IReadOnlyDictionary<string, object>? null Gets or sets a collection of additional attributes that will be applied to the created element.
Name string? null Gets or sets the name of the element. Allows access by name from the associated form.
NoValidate bool false Disables the validation of the input.
OnChange EventCallback<TValue?> Callback for when the input value changes.
ReadOnly bool false Makes the input read-only.
Required bool false Makes the input required.
Value TValue? null Gets or sets the value of the input. This should be used with two-way binding.

BitInputBase public members

Name Type Default value Description
InputElement ElementReference The ElementReference of the input element.
FocusAsync() () => ValueTask Gives focus to the input element.
FocusAsync(bool preventScroll) (bool preventScroll) => ValueTask Gives focus to the input element.

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.
Disabled bool false Gets or sets a value indicating whether the component is disabled and cannot respond to user interaction.
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. An attribute written on the component wins over an entry of the same name.
Id string? null Gets or sets the unique identifier for the component's root element.
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 Value 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 The small size.
Medium 1 The medium size.
Large 2 The 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.