Color Picker

BsColorPicker is a component that allow users to select a color using a variety of input methods.

Updated in v2.2.0

Usage

Swatches

Use the swatches property to display an array of color swatches that users can pick from.

Popup Dialog

<bs-color-picker> can be displayed as a popup dialog and use BsPopover internally.

CSS Variables

As CSS technology evolves, Vue MDBootstrap introduces local CSS variables on .md-color-picker for better customization.

Added in v2.2.0

.md-color-picker {
  --md-color-picker-bg: var(--background-tertiary);
  --md-color-picker-border-radius: var(--md-radius);
  --md-color-picker-input-bg: #{colors.$gray-100};
  --md-color-picker-input-border: 1px solid oklch(0.867 0.011 247.949);
  --md-color-picker-input-color: inherit;
  --md-color-picker-input-focus-bg: var(--background-secondary, #{colors.$white});
  --md-color-picker-input-focus-color: inherit;
  --md-color-picker-input-focus-outline: 2px solid var(--md-field-active-indicator);
  --md-color-picker-input-focus-shadow: oklch(0.578 0.228 260.025 / 0.25);
  --md-color-picker-slider-thumb-color: #{color.scale(colors.$neutral-base, $lightness: -40%)};
}

API Reference

Property	Type	Default	Description
activator	Element|String		Display this ColorPicker as a popup dialog and calculate its display position from the activator element. Leave it undefined to display persistent/inline ColorPicker.
container-color deprecated	String		This ColorPicker container background color. Updated in v2.2.0 Since v2.2.0 the container background color is integrated with global CSS variables.
cover	Boolean	false	Display ColorPicker at a position that covers the activator element.
hide-alpha	Boolean	false	Hide alpha slider and alpha input field.
hide-inputs	Boolean	false	Hide the input fields.
hide-mode-button	Boolean	false	Hide toggle mode buttons.
input-label-class	String|String[]		Optional css classname to apply to the input field label.
mode v-model	String		This ColorPicker mode. Valid values: HEX, RGB, HSL, OKLCH. Updated in v2.2.0
mode-button-color	String	'secondary'	Apply custom color to the toggle button. Updated in v2.2.0 Built-in color variants are: default, primary, secondary, success, warning, danger, info, light and dark.
mode-button-outlined	Boolean	false	Render the toggle mode buttons with outlined style. See Button Style Variants
mode-button-toggle-color	String		Color to apply to the active button. Updated in v2.2.0 Built-in color variants are: default, primary, secondary, success, warning, danger, info, light and dark.
mode-button-tonal	Boolan	false	Render the toggle mode buttons with filled tonal style. v2.2.1 See Button Style Variants
model-value v-model	String		Monitored by v-model to maintain the component's value.
open v-model	Boolean	false	This ColorPicker popup state: show or hide. Only works if activator element is defined.
placement	String	'bottom-left'	This ColorPicker display placement when property activator is defined.
space	Number		Number of pixel to shift the ColorPicker display position from the activator element.
swatches	String[]		Custom color swatches to display at the bottom ColorPicker.
swatches-max-height	Number	80	Sets the maximum height of the swatches section.
transition	String	'scale'	Transition animation when displaying the ColorPicker. This animation is effected by placement property.

Name	Arguments	Description
update:model-value	(value:String)	Fired when this component's model-value is updated.
update:mode	(value:String)	Fired when the mode property is updated.
update:open	(value:Boolean)	Fired when the open property is updated.