```html
<div class="demo-block" id="color-picker-demo1">
  <div style="padding: 15px;">
    <lx-color-picker
      v-model="color1"
      :colors="colors1"
    ></lx-color-picker>
    <br>
    <lx-color-picker
      v-model="color1"
      :colors="colors1"
      size="middle"
    ></lx-color-picker>
  </div>
  <lx-group title="as a cell's content">
    <lx-cell :title="'Color:' + color1">
      <lx-color-picker
        slot="value"
        v-model="color1"
        :colors="colors1"
        size="small"
      ></lx-color-picker>
    </lx-cell>
  </lx-group>
  <lx-group title="a cell without title">
    <lx-cell primary="content">
      <lx-color-picker
        slot="value"
        v-model="color1"
        :colors="colors1"
        size="middle"
      ></lx-color-picker>
    </lx-cell>
  </lx-group>
  <lx-group title="enable single and null">
    <lx-cell primary="content">
      <lx-color-picker
        slot="value"
        v-model="color2"
        :colors="colors2"
        size="middle"
        :enable-null="true"
      ></lx-color-picker>
    </lx-cell>
  </lx-group>
</div>

<script>
// ColorPicker.md
new Vue({
  el: '#color-picker-demo1',
  data: {
    color1: '#FFEF7D',
    colors1: ['#FF3B3B', '#FFEF7D', '#8AEEB1', '#8B8AEE', '#CC68F8', '#fff'],
    color2: '#FF3B3B',
    colors2: ['#FF3B3B']
  }
})
</script>
```