Vue Color Picker

Note: We are transitioning MDB4 to a legacy version and focusing on developing MDB5. While we'll continue to support for the transition period, we encourage you to migrate to MDB5. We're offering a 50% discount on MDB5 PRO to help with your transition, enabling you to leverage the full potential of the latest version. You can find more information here.
get 50% discount on MDB5 PRO

Vue Bootstrap 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.

Basic Example

Click the dark square to activate the Color Picker. This is the basic variation of it.

        
            
            <template>
              <div id="app">
                <mdb-card>
                  <mdb-card-body class="text-center d-flex justify-content-center align-items-center flex-column">
                    <p class="pt-2">Click the dark square to activate the Color Picker</p>
  
                      <mdb-color-picker :show="showPicker1" @getValue="color1 = $event" @close="showPicker1 = false">
                        <div class="mdb-cp-btn-wrapper">
                          <div class="mdb-cp-btn" :style="{background: color1}" @click="showPicker1 = !showPicker1"></div>
                        </div>
                      </mdb-color-picker>
  
                  </mdb-card-body>
                </mdb-card>
              </div>
            </template>
          
        
    
        
            
            <script>
              import mdbColorPicker from 'mdb-color-picker'
              import { mdbContainer, mdbCard, mdbCardBody, mdbBtn, mdbRow, mdbCol } from 'mdbvue'
  
              export default {
                name: 'app',
                components: {
                  mdbColorPicker,
                  mdbContainer,
                  mdbCard,
                  mdbCardBody,
                  mdbBtn,
                  mdbRow,
                  mdbCol
                },
                data() {
                  return {
                    color1: '#ff0000ff',
                    showPicker1: false
                  }
                }
              }
            </script>

Using as button

Use Color Picker as a button.

        
            
            <template>
              <div id="app">
                <mdb-card>
                  <mdb-card-body class="text-center d-flex justify-content-center align-items-center flex-column">
                    <p class="pt-2">Click the below button to activate the Color Picker</p>
  
                      <mdb-color-picker :show="showPicker2" @close="showPicker2 = false">
                        <mdb-btn color="primary" size="sm" @click="showPicker2 = !showPicker2">Open picker</mdb-btn>
                      </mdb-color-picker>
  
                  </mdb-card-body>
                </mdb-card>
              </div>
            </template>
          
        
    
        
            
            <script>
              import mdbColorPicker from 'mdb-color-picker'
              import { mdbContainer, mdbCard, mdbCardBody, mdbBtn, mdbRow, mdbCol } from 'mdbvue'
  
              export default {
                name: 'app',
                components: {
                  mdbColorPicker,
                  mdbContainer,
                  mdbCard,
                  mdbCardBody,
                  mdbBtn,
                  mdbRow,
                  mdbCol
                },
                data() {
                  return {
                    color2: '#ff0000ff',
                    showPicker2: false
                  }
                }
              }
            </script>

Change color of the other elements

With Color Picker, it's easy to manipulate colors of the certain elements.

        
            
            <template>
              <div id="app">
                <mdb-row>
                  <mdb-col sm="6">
                    <mdb-card :style="{background: color3}">
                      <mdb-card-body class="text-center d-flex justify-content-center align-items-center flex-column">
                        <p class="pt-2">My background color will be changed</p>
  
                        <mdb-color-picker :show="showPicker3" @getValue="color3 = $event" @close="showPicker3 = false">
                          <mdb-btn color="primary" size="sm" @click="showPicker3 = !showPicker3">Open picker</mdb-btn>
                        </mdb-color-picker>
  
                      </mdb-card-body>
                    </mdb-card>
                  </mdb-col>
                  <mdb-col sm="6">
                    <mdb-card>
                      <mdb-card-body class="text-center d-flex justify-content-center align-items-center flex-column">
                        <p class="pt-2" :style="{color: color4}">My text color will be changed</p>
  
                        <mdb-color-picker :show="showPicker4" @getValue="color4 = $event" @close="showPicker4 = false">
                          <mdb-btn color="primary" size="sm" @click="showPicker4 = !showPicker4">Open picker</mdb-btn>
                        </mdb-color-picker>
  
                      </mdb-card-body>
                    </mdb-card>
                  </mdb-col>
                </mdb-row>
              </div>
            </template>
          
        
    
        
            
            <script>
              import mdbColorPicker from 'mdb-color-picker'
              import { mdbContainer, mdbCard, mdbCardBody, mdbBtn, mdbRow, mdbCol } from 'mdbvue'
  
              export default {
                name: 'app',
                components: {
                  mdbColorPicker,
                  mdbContainer,
                  mdbCard,
                  mdbCardBody,
                  mdbBtn,
                  mdbRow,
                  mdbCol
                },
                data() {
                  return {
                    color3: '#ffffff',
                    color4: '#000000',
                    showPicker3: false,
                    showPicker4: false
                  }
                }
              }
            </script>

Change the site background color

Change the site's background color by choosing a color from Color Picker.

        
            
            <template>
              <div id="app" :style="{background: pageBackground}">
                <mdb-card>
                  <mdb-card-body class="text-center d-flex justify-content-center align-items-center flex-column">
                    <p class="pt-2">Change the background color if this site dynamically by changing the color in Color Picker</p>
  
                      <mdb-color-picker :show="showPicker6" @close="showPicker6 = false" @getValue="pageBackground = $event">
                        <mdb-btn color="primary" size="sm" @click="showPicker6 = !showPicker6">Open picker</mdb-btn>
                      </mdb-color-picker>
  
                  </mdb-card-body>
                </mdb-card>
              </div>
            </template>
          
        
    
        
            
            <script>
              import mdbColorPicker from './components/mdbColorPicker.vue'
              import { mdbContainer, mdbCard, mdbCardBody, mdbBtn, mdbRow, mdbCol } from 'mdbvue'
  
              export default {
                name: 'app',
                components: {
                  mdbColorPicker,
                  mdbContainer,
                  mdbCard,
                  mdbCardBody,
                  mdbBtn,
                  mdbRow,
                  mdbCol
                },
                data() {
                  return {
                    pageBackground: '#ffffff',
                    showPicker6: false
                  }
                }
              }
            </script>

Vue Color Picker - getting started : download & setup

Download

This plugin requires a purchase.

Buy Vue color picker plugin

Options

Name Type Description
show boolean Use this prop to hide or show the palette.
saveLabel string Changes save button label.
clearLabel string Changes clear button label.
options object Allows to turn off each color space. Default values: hex: true, rgba: true, hsla: true, hsva: true, cmyk: true.