diff --git a/README.md b/README.md
index 2172f75..b6baf65 100644
--- a/README.md
+++ b/README.md
@@ -129,17 +129,17 @@ export enum Status {
 
 ### CSS 变量
 
-| 变量名 | 说明 | 默认值 |
-| --- | --- | --- |
-| --rcsc-primary | 主色 | `#1991fa` <span style="display: inline-block; width: 16px; height: 16px; background: #1991fa; border-radius: 2px; vertical-align: middle; margin: 0 4px;"></span> |
-| --rcsc-primary-light | 主色-浅 | `#d1e9fe` <span style="display: inline-block; width: 16px; height: 16px; background: #d1e9fe; border-radius: 2px; vertical-align: middle; margin: 0 4px;"></span> |
-| --rcsc-error | 错误色 | `#f57a7a` <span style="display: inline-block; width: 16px; height: 16px; background: #f57a7a; border-radius: 2px; vertical-align: middle; margin: 0 4px;"></span> |
-| --rcsc-error-light | 错误色-浅 | `#fce1e1` <span style="display: inline-block; width: 16px; height: 16px; background: #fce1e1; border-radius: 2px; vertical-align: middle; margin: 0 4px;"></span> |
-| --rcsc-success | 成功色 | `#52ccba` <span style="display: inline-block; width: 16px; height: 16px; background: #52ccba; border-radius: 2px; vertical-align: middle; margin: 0 4px;"></span> |
-| --rcsc-success-light | 成功色-浅 | `#d2f4ef` <span style="display: inline-block; width: 16px; height: 16px; background: #d2f4ef; border-radius: 2px; vertical-align: middle; margin: 0 4px;"></span> |
-| --rcsc-border-color | 边框色 | `#e4e7eb` <span style="display: inline-block; width: 16px; height: 16px; background: #e4e7eb; border-radius: 2px; vertical-align: middle; margin: 0 4px;"></span> |
-| --rcsc-bg-color | 背景色 | `#f7f9fa` <span style="display: inline-block; width: 16px; height: 16px; background: #f7f9fa; border-radius: 2px; vertical-align: middle; margin: 0 4px;"></span> |
-| --rcsc-text-color | 文本色 | `#45494c` <span style="display: inline-block; width: 16px; height: 16px; background: #45494c; border-radius: 2px; vertical-align: middle; margin: 0 4px;"></span> |
+| 变量名               | 说明      | 默认值                                                    |
+| -------------------- | --------- | --------------------------------------------------------- |
+| --rcsc-primary       | 主色      | `#1991fa` <input type='color' value='#1991fa' disabled /> |
+| --rcsc-primary-light | 主色-浅   | `#d1e9fe` <input type='color' value='#d1e9fe' disabled /> |
+| --rcsc-error         | 错误色    | `#f57a7a` <input type='color' value='#f57a7a' disabled /> |
+| --rcsc-error-light   | 错误色-浅 | `#fce1e1` <input type='color' value='#fce1e1' disabled /> |
+| --rcsc-success       | 成功色    | `#52ccba` <input type='color' value='#52ccba' disabled /> |
+| --rcsc-success-light | 成功色-浅 | `#d2f4ef` <input type='color' value='#d2f4ef' disabled /> |
+| --rcsc-border-color  | 边框色    | `#e4e7eb` <input type='color' value='#e4e7eb' disabled /> |
+| --rcsc-bg-color      | 背景色    | `#f7f9fa` <input type='color' value='#f7f9fa' disabled /> |
+| --rcsc-text-color    | 文本色    | `#45494c` <input type='color' value='#45494c' disabled /> |
 
 [site]: https://caijf.github.io/rc-slider-captcha/index.html
 [npm]: https://img.shields.io/npm/v/rc-slider-captcha.svg
diff --git a/src/index.md b/src/index.md
index 3f867c2..0e9b06e 100644
--- a/src/index.md
+++ b/src/index.md
@@ -153,17 +153,17 @@ export enum Status {
 
 ### CSS 变量
 
-| 变量名 | 说明 | 默认值 |
-| --- | --- | --- |
-| --rcsc-primary | 主色 | `#1991fa` <span style="display: inline-block; width: 16px; height: 16px; background: #1991fa; border-radius: 2px; vertical-align: middle; margin: 0 4px;"></span> |
-| --rcsc-primary-light | 主色-浅 | `#d1e9fe` <span style="display: inline-block; width: 16px; height: 16px; background: #d1e9fe; border-radius: 2px; vertical-align: middle; margin: 0 4px;"></span> |
-| --rcsc-error | 错误色 | `#f57a7a` <span style="display: inline-block; width: 16px; height: 16px; background: #f57a7a; border-radius: 2px; vertical-align: middle; margin: 0 4px;"></span> |
-| --rcsc-error-light | 错误色-浅 | `#fce1e1` <span style="display: inline-block; width: 16px; height: 16px; background: #fce1e1; border-radius: 2px; vertical-align: middle; margin: 0 4px;"></span> |
-| --rcsc-success | 成功色 | `#52ccba` <span style="display: inline-block; width: 16px; height: 16px; background: #52ccba; border-radius: 2px; vertical-align: middle; margin: 0 4px;"></span> |
-| --rcsc-success-light | 成功色-浅 | `#d2f4ef` <span style="display: inline-block; width: 16px; height: 16px; background: #d2f4ef; border-radius: 2px; vertical-align: middle; margin: 0 4px;"></span> |
-| --rcsc-border-color | 边框色 | `#e4e7eb` <span style="display: inline-block; width: 16px; height: 16px; background: #e4e7eb; border-radius: 2px; vertical-align: middle; margin: 0 4px;"></span> |
-| --rcsc-bg-color | 背景色 | `#f7f9fa` <span style="display: inline-block; width: 16px; height: 16px; background: #f7f9fa; border-radius: 2px; vertical-align: middle; margin: 0 4px;"></span> |
-| --rcsc-text-color | 文本色 | `#45494c` <span style="display: inline-block; width: 16px; height: 16px; background: #45494c; border-radius: 2px; vertical-align: middle; margin: 0 4px;"></span> |
+| 变量名               | 说明      | 默认值                                                    |
+| -------------------- | --------- | --------------------------------------------------------- |
+| --rcsc-primary       | 主色      | `#1991fa` <input type='color' value='#1991fa' disabled /> |
+| --rcsc-primary-light | 主色-浅   | `#d1e9fe` <input type='color' value='#d1e9fe' disabled /> |
+| --rcsc-error         | 错误色    | `#f57a7a` <input type='color' value='#f57a7a' disabled /> |
+| --rcsc-error-light   | 错误色-浅 | `#fce1e1` <input type='color' value='#fce1e1' disabled /> |
+| --rcsc-success       | 成功色    | `#52ccba` <input type='color' value='#52ccba' disabled /> |
+| --rcsc-success-light | 成功色-浅 | `#d2f4ef` <input type='color' value='#d2f4ef' disabled /> |
+| --rcsc-border-color  | 边框色    | `#e4e7eb` <input type='color' value='#e4e7eb' disabled /> |
+| --rcsc-bg-color      | 背景色    | `#f7f9fa` <input type='color' value='#f7f9fa' disabled /> |
+| --rcsc-text-color    | 文本色    | `#45494c` <input type='color' value='#45494c' disabled /> |
 
 > \* 注意 IE11 不支持 css 变量，如果你的项目需要兼容 IE11，尽量不使用 css 变量改变样式。