Color picker

Vue Color Picker

Color Picker plugin allows you to select different colors. You can successfully use it in various product wizards, clothing sales, or other situations where you need to be able to choose a color.

Note: Read the API tab to find all available options and advanced customization

Native color picker

If you need the simplest form - use a native color picker.

<template>
  <MDBColorPicker label="Color picker" v-model="nativeColorPickerValue" />
</template>
<script>
  import { MDBColorPicker } from "mdb-vue-color-picker";
  import { ref } from "vue";

  export default {
    components: {
      MDBColorPicker
    },
    setup(){
      const nativeColorPickerValue = ref('#563d7c');

      return {
        nativeColorPickerValue
      }
    }
  };

</script>
<script setup lang="ts">
  import { MDBColorPicker } from "mdb-vue-color-picker";
  import { ref } from "vue";

  const nativeColorPickerValue = ref('#563d7c');
</script>

Advanced color picker - basic example

The Advanced Color Picker can be placed anywhere on the page. You can initialize it by adding advanced prop to the MDBColorPicker component. 

<template>
  <MDBColorPicker advanced v-model="advancedColorPickerValue" />
</template>
<script>
  import { MDBColorPicker } from "mdb-vue-color-picker";
  import { ref } from "vue";

  export default {
    components: {
      MDBColorPicker
    },
    setup(){
      const advancedColorPickerValue = ref('');

      return {
        advancedColorPickerValue
      }
    }
  };

</script>
<script setup lang="ts">
  import { MDBColorPicker } from "mdb-vue-color-picker";
  import { ref } from "vue";

  const advancedColorPickerValue = ref('');
</script>

Disable state example

To add a Color picker as read-only use disabled prop in the MDBColorPicker component. 

<template>
  <MDBColorPicker advanced disabled v-model="disabledColorPickerValue" />
</template>
<script>
  import { MDBColorPicker } from "mdb-vue-color-picker";
  import { ref } from "vue";

  export default {
    components: {
      MDBColorPicker
    },
    setup(){
      const disabledColorPickerValue = ref('');

      return {
        disabledColorPickerValue
      }
    }
  };

</script>
<script setup lang="ts">
  import { MDBColorPicker } from "mdb-vue-color-picker";
  import { ref } from "vue";

  const disabledColorPickerValue = ref('');
</script>

Swatches

You can add ready-made samples for the user. Put swatches prop in MDBColorPicker component and pass an array of colors in that prop . If you want to add colors in several columns, add them in separate tables. 

<template>
  <MDBColorPicker advanced :swatches="swatchesColors" v-model="swatchesColorPickerValue" />
</template>
<script>
  import { MDBColorPicker } from "mdb-vue-color-picker";
  import { ref } from "vue";

  export default {
    components: {
      MDBColorPicker
    },
    setup(){
      const swatchesColorPickerValue = ref('');

      const swatchesColors = [
        ['#0d6efd', '#6610f2', '#6f42c1 ', '#b23cfd', '#d63384', '#dc3545', '#fd7e14', '#ffc107'],
        ['#198754', '#20c997', '#0dcaf0', '#39c0ed', '#757575', '#4f4f4f', '#262626', '#000'],
      ];

      return {
        swatchesColorPickerValue,
        swatchesColors,
      }
    }
  };

</script>
<script setup lang="ts">
  import { MDBColorPicker } from "mdb-vue-color-picker";
  import { ref } from "vue";

  const swatchesColorPickerValue = ref('');

  const swatchesColors = [
    ['#0d6efd', '#6610f2', '#6f42c1 ', '#b23cfd', '#d63384', '#dc3545', '#fd7e14', '#ffc107'],
    ['#198754', '#20c997', '#0dcaf0', '#39c0ed', '#757575', '#4f4f4f', '#262626', '#000'],
  ];
</script>

Swatches Height

If the defined samples take up a lot of space, you can set their maximum height using the swatchesHeight prop. 

<template>
  <MDBColorPicker
    advanced
    :swatches="swatchesColors"
    :swatchesHeight="100"
    v-model="swatchesHeightColorPickerValue"
  /></template>
<script>
  import { MDBColorPicker } from "mdb-vue-color-picker";
  import { ref } from "vue";

  export default {
    components: {
      MDBColorPicker
    },
    setup(){
      const swatchesHeightColorPickerValue = ref('');

      const swatchesColors = [
        ['#0d6efd', '#6610f2', '#6f42c1 ', '#b23cfd', '#d63384', '#dc3545', '#fd7e14', '#ffc107'],
        ['#198754', '#20c997', '#0dcaf0', '#39c0ed', '#757575', '#4f4f4f', '#262626', '#000'],
      ];

      return {
        swatchesHeightColorPickerValue,
        swatchesColors
      }
    }
  };

</script>
<script setup lang="ts">
  import { MDBColorPicker } from "mdb-vue-color-picker";
  import { ref } from "vue";

  const swatchesHeightColorPickerValue = ref('');

  const swatchesColors = [
    ['#0d6efd', '#6610f2', '#6f42c1 ', '#b23cfd', '#d63384', '#dc3545', '#fd7e14', '#ffc107'],
    ['#198754', '#20c997', '#0dcaf0', '#39c0ed', '#757575', '#4f4f4f', '#262626', '#000'],
  ];
</script>

Default value

To set the default value use the defaultValue prop. 

<template>
  <MDBColorPicker
  advanced
  defaultValue="rgba(15,219,104,1)"
  v-model="defaultValueColorPickerValue"
/></template>
<script>
  import { MDBColorPicker } from "mdb-vue-color-picker";
  import { ref } from "vue";

  export default {
    components: {
      MDBColorPicker
    },
    setup(){
      const defaultValueColorPickerValue = ref('');

      return {
        defaultValueColorPickerValue
      }
    }
  };

</script>
<script setup lang="ts">
  import { MDBColorPicker } from "mdb-vue-color-picker";
  import { ref } from "vue";

  const defaultValueColorPickerValue = ref('');
</script>

Dropdown

You can use color picker as dropdown, just add dropdown prop to MDBColorPicker. 

<template>
      <MDBColorPicker advanced dropdown v-model="dropdownColorPickerValue" />
</template>
<script>
  import { MDBColorPicker } from "mdb-vue-color-picker";
  import { ref } from "vue";

  export default {
    components: {
      MDBColorPicker,
    },
    setup(){
      const dropdownColorPickerValue = ref('');

      return {
        dropdownColorPickerValue,
      }
    }
  };

</script>
<script setup lang="ts">
  import { MDBColorPicker } from "mdb-vue-color-picker";
  import { ref } from "vue";

  const dropdownColorPickerValue = ref('');
</script>

Disable section

If you want to use only some picker elements you can disable unnecessary elements. The following example shows the use of the disableColorPalette prop. Other options can be found in the API tab. 

<template>
  <MDBColorPicker advanced disableColorPalette v-model="disableSectionColorPickerValue" />
</template>
<script>
  import { MDBColorPicker } from "mdb-vue-color-picker";
  import { ref } from "vue";

  export default {
    components: {
      MDBColorPicker
    },
    setup(){
      const disableSectionColorPickerValue = ref('');

      return {
        disableSectionColorPickerValue
      }
    }
  };

</script>
<script setup lang="ts">
  import { MDBColorPicker } from "mdb-vue-color-picker";
  import { ref } from "vue";

  const disableSectionColorPickerValue = ref('');
</script>

Color picker - API

Import

Edit in sandbox 
<script>
  import { MDBColorPicker } from "mdb-vue-color-picker";
</script>

Properties

Properties can be passed to the MDBColorPicker component.

Name Type Default Description
tag String div Defines tag of the MDBColorPicker component
disableColorPickerInputs Boolean false Add disableColorPickerInputs prop to hide the input sections
disableChangeFormat Boolean false Add disableChangeFormat prop to hide the change color type icons
disableCopyIcon Boolean false Add disableCopyIcon prop to hide copy code icon
disableColorPalette Boolean false Add disableColorPalette prop to hide color palette
swatches Array [] By adding swatches props to MDBColorPicker you are able to define the colors of the swatches
swatchesHeight Number 0 swatchesHeight prop allow you to define swatches max height
defaultValue Boolean / String false By adding defaultValue prop you can set default color value
disabled Boolean false Add disabled prop to use read-only Color picker
dropdown Boolean false Add dropdown prop to use color picker as dropdown
dropdownBtnName String Close Add dropdownBtnName prop to change the text in the dropdown button
disableHue Boolean false Add disableHue prop to remove the hue range input
disableAlpha Boolean false Add disableAlpha prop to remove the alpha range input
disableAlphaRangeInput Boolean false Add disableAlphaRangeInput prop to disable the alpha range input
disableHueRangeInput Boolean false Add disableHueRangeInput prop to disable the hue range input
removeAlphaInput Boolean false Add removeAlphaInput prop to remove the alpha input
colorFormat String "hsla" Add colorFormat prop to set a default color format

Events

Name Description
onOpen Emitted when Color picker dropdown is open.
onClose Emitted when Color picker dropdown is close.
onChange Emitted when the color is changed.
Edit in sandbox 
<template>
  <MDBColorPicker
    advanced
    v-model="eventsColorPickerValue"
    @onChange="handleOnChangeColorPicker"
  />
</template>
<script>
  import { MDBColorPicker } from "mdb-vue-plugin";

  export default {
    components: {
      MDBColorPicker
    },
    setup(){
      const eventsColorPickerValue = ref('');

      const handleOnChangeColorPicker = () => {
        // do something
      };

      return {
        eventsColorPickerValue,
        handleOnChangeColorPicker,
      }
    }
  };

</script>