Vue Color Picker

Vue Bootstrap color picker plugin

Note: This documentation is for an older version of Bootstrap (v.4). A newer version is available for Bootstrap 5. We recommend migrating to the latest version of our product - Material Design for Bootstrap 5.
Go to docs v.5

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.