# ColorPicker
## Description
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.
## 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. |
| 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. |
## 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. |
| 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. |
## Enums
### 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. |
## Sub Classes
### 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. |
## CSS Variables
Public CSS custom properties read off the component's root. Set one on `:root` to restyle every instance, on any ancestor to restyle the ones inside it, or on the `Style` of one instance.
| 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. |
## Examples
\n**Basic**:
```razor
```
```csharp
private BitColorFormat selectedFormat = BitColorFormat.Hex;
private string formatColor = "#B34D8C";
```
\n**Binding**:
```razor
@label
}
Focus the picker
@popoverColor
```
```csharp
private static readonly string[] brandPresets =
[
"#E24A4A", "#E2934A", "#E2D24A", "#7EE24A", "#4AE2C0",
"#4A9BE2", "#7E4AE2", "#E24AC0", "#FFFFFF", "#8A8886", "#201F1E"
];
private string paletteOnlyColor = "#E24A4A";
private string tintColor = "#4A9BE2";
private string fieldsOnlyColor = "rgba(126,74,226,1)";
private string popoverColor = "#4A9BE2";
```
\n**Cascading parameters**:
```razor
Color: @alphaColor Alpha: @alphaValue
Color: @previewColor
```
```csharp
private string alphaColor = "#4D8CB3";
private double alphaValue = 0.5;
private string previewColor = "#5B8C5A";
```
\n**Inputs**:
```razor
Color: @inputsAlphaColor
Mode: @inputsMode Color: @inputsModeColor
Color: @hslInputsColor
```
```csharp
private string inputsAlphaColor = "#4DB39980";
private BitColorInputsMode inputsMode = BitColorInputsMode.HexRgb;
private string inputsModeColor = "#B34D6B";
private string hslInputsColor = "hsl(150,45%,45%)";
```
\n**Presets**:
```razor
Color: @presetColor
Color: @alphaPresetColor
Color: @rampPresetColor
```
```csharp
private static readonly string[] brandPresets =
[
"#E24A4A", "#E2934A", "#E2D24A", "#7EE24A", "#4AE2C0",
"#4A9BE2", "#7E4AE2", "#E24AC0", "#FFFFFF", "#8A8886", "#201F1E"
];
private string presetColor = "#4A9BE2";
private static readonly string[] alphaPresets =
[
"rgba(74,155,226,1)", "rgba(74,155,226,0.75)", "rgba(74,155,226,0.5)", "rgba(74,155,226,0.25)", "transparent"
];
private string alphaPresetColor = "rgba(74,155,226,0.5)";
private static readonly string[] rampPresets =
[
"#FDE7E7", "#F7B9B9", "#EE8080", "#E24A4A", "#B02F2F",
"#E7F0FB", "#B9D3F2", "#80B0E8", "#4A9BE2", "#2F6BB0"
];
private string rampPresetColor = "#4A9BE2";
```
\n**Eye dropper**:
```razor
Color: @eyeDropperColor
```
```csharp
private string eyeDropperColor = "#5B8C5A";
```
\n**Contrast**:
```razor
@contrastColor on @contrastBackground
Color: @contrastOnDarkColor
```
```csharp
private string contrastColor = "#767676";
private string contrastBackground = "#FFFFFF";
private string contrastOnDarkColor = "rgba(122,200,255,1)";
```
\n**Format**:
```razor
Color: @formatColor
Alpha: @twoWayAlpha
```
```csharp
private readonly (string Label, string Color)[] oneWayOptions =
[
("Red", "#E24A4A"), ("Green", "#4AE27E"), ("Blue", "#4A7FE2")
];
private string oneWayColor = "#E24A4A";
private string twoWayColor = "#4A9BE2";
private double twoWayAlpha = 1;
```
\n**Events & API**:
```razor
OnChange: @changeCount times, last @changedColor
OnChangeEnd: @changeEndCount times, last @changedHex / @changedRgba
ColorDescription: @colorPickerRef?.ColorDescription
Hex / HexAlpha: @colorPickerRef?.Hex / @colorPickerRef?.HexAlpha
Rgb / Rgba: @colorPickerRef?.Rgb / @colorPickerRef?.Rgba
Hsl: @colorPickerRef?.Hsl
Hsv: @colorPickerRef?.Hsv
Hwb: @colorPickerRef?.Hwb
Oklch: @colorPickerRef?.Oklch
```
```csharp
private int changeCount;
private int changeEndCount;
private string? changedColor;
private string? changedHex;
private string? changedRgba;
private BitColorPicker? colorPickerRef;
private void HandleOnChange(BitColorChangeEventArgs args)
{
changeCount++;
changedColor = args.Color;
}
private void HandleOnChangeEnd(BitColorChangeEventArgs args)
{
changeEndCount++;
changedHex = args.Hex;
changedRgba = args.Rgba;
}
```
\n**Accessibility & localization**:
```razor
Color: @accessibilityColor
Color: @paletteOnlyColor
Color: @tintColor
Color: @fieldsOnlyColor
Color: @cascadedColor
Color: @cascadedOtherColor
@rtlColor
```