diff --git a/website/src/routes/guide/recommendation/README.md b/website/src/routes/guide/recommendation/README.md
index 404edcfaae..e61292f7f1 100755
--- a/website/src/routes/guide/recommendation/README.md
+++ b/website/src/routes/guide/recommendation/README.md
@@ -12,7 +12,7 @@
 拖拽 | [![](https://img.shields.io/github/stars/atlassian/react-beautiful-dnd.svg?label=react-beautiful-dnd)](https://github.com/atlassian/react-beautiful-dnd) [![](https://img.shields.io/github/stars/gaearon/react-dnd.svg?label=react-dnd)](https://github.com/gaearon/react-dnd) [![](https://img.shields.io/github/stars/mzabriskie/react-draggable.svg?label=react-draggable)](https://github.com/mzabriskie/react-draggable) [![](https://img.shields.io/github/stars/clauderic/react-sortable-hoc.svg?label=react-sortable-hoc)](https://github.com/clauderic/react-sortable-hoc)
 代码编辑器 | [![](https://img.shields.io/github/stars/uiwjs/react-codemirror.svg?label=react-codemirror)](https://github.com/uiwjs/react-codemirror) [![](https://img.shields.io/github/stars/jaywcjlove/react-monacoeditor.svg?label=react-monacoeditor)](https://github.com/jaywcjlove/react-monacoeditor)
 富文本编辑器 | [![](https://img.shields.io/github/stars/facebook/draft-js.svg?label=draft-js)](https://github.com/facebook/draft-js) [![](https://img.shields.io/github/stars/zenoamaro/react-quill.svg?label=react-quill)](https://github.com/zenoamaro/react-quill) [![](https://img.shields.io/github/stars/jpuri/react-draft-wysiwyg.svg?label=react-draft-wysiwyg)](https://github.com/jpuri/react-draft-wysiwyg) [![](https://img.shields.io/github/stars/leejaen/react-lz-editor.svg?label=react-lz-editor)](https://github.com/leejaen/react-lz-editor) [![](https://img.shields.io/github/stars/margox/braft-editor.svg?label=braft-editor)](https://github.com/margox/braft-editor) [![](https://img.shields.io/github/stars/ProseMirror/prosemirror.svg?label=ProseMirror)](https://github.com/ProseMirror/prosemirror) [![](https://img.shields.io/github/stars/ckeditor/ckeditor5.svg?label=ckeditor5)](https://github.com/ckeditor/ckeditor5) [![](https://img.shields.io/github/stars/codex-team/editor.js.svg?label=editor.js)](https://github.com/codex-team/editor.js)
-拾色器 | [![](https://img.shields.io/github/stars/casesandberg/react-color.svg?label=react-color)](https://github.com/casesandberg/react-color)
+拾色器 | [![](https://img.shields.io/github/stars/casesandberg/react-color.svg?label=react-color)](https://github.com/casesandberg/react-color) [![react-colorful](https://img.shields.io/github/stars/omgovich/react-colorful.svg?label=react-colorful)](https://github.com/omgovich/react-colorful) [![react-color](https://img.shields.io/github/stars/uiwjs/react-color.svg?label=react-color)](https://github.com/uiwjs/react-color)
 响应式 | [![](https://img.shields.io/github/stars/contra/react-responsive.svg?label=react-responsive)](https://github.com/contra/react-responsive) [![](https://img.shields.io/github/stars/ReactTraining/react-media.svg?label=react-media)](https://github.com/ReactTraining/react-media)
 复制到剪贴板 | [![](https://img.shields.io/github/stars/nkbt/react-copy-to-clipboard.svg?label=react-copy-to-clipboard)](https://github.com/nkbt/react-copy-to-clipboard)
 页面 meta 属性 | [![](https://img.shields.io/github/stars/nfl/react-helmet.svg?label=react-helmet)](https://github.com/nfl/react-helmet) [![](https://img.shields.io/github/stars/gaearon/react-document-title.svg?label=react-document-title)](https://github.com/gaearon/react-document-title)