### 何时使用

当用户需要对形状、字体或可修改的元素自定义更改颜色时。

### 与页面布局相关

##### 固定布局：可布局于左侧或右侧编辑栏上，区分内容读取区和工具操作区，高效引导用户发现和使用。

<div class="legend">
  <div class="item">
    <img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/guide/colorpicker7.png" />
    <em>图示：置于左侧编辑栏</em>
  </div>
   <div class="item">
    <img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/guide/colorpicker8.png" />
    <em>图示：置于右侧编辑栏</em>
  </div>
</div>
<hr />

##### 自由布局：以浮窗的形式呈现，拖拽任意移动位置，防止浮窗遮挡页面内容，增强页面布局灵活性。

<div class="legend">
  <div class="item">
    <img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/guide/colorpicker9.png" />
    <em></em>
  </div>
</div>
