antd-color-editor

<a name="readme-top"></a> <div align="center"> <img width="160" src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg"> <h1>Antd Color Studio</h1> [**🎨 Quick Start >>**](https://ant-design.github.io/antd-color-editor/~demos/colorstudio-demo-demo) An open-source color editor for designing color system [Changelog](./CHANGELOG.md) · [Report Bug][issues-url] · [Request Feature][issues-url]  [![release][release-shield]][release-url] [![releaseDate][release-date-shield]][release-date-url] [![ciTest][ci-test-shield]][ci-test-url] [![ciRelease][ci-release-shield]][ci-release-url] <br/> [![contributors][contributors-shield]][contributors-url] [![forks][forks-shield]][forks-url] [![stargazers][stargazers-shield]][stargazers-url] [![issues][issues-shield]][issues-url] [![](https://raw.githubusercontent.com/ant-design/antd-color-editor/master/public/preview1.webp)](https://ant-design.github.io/antd-color-editor/~demos/colorstudio-demo-demo) </div> <details> <summary><kbd>Table of contents</kbd></summary> #### TOC - [📦 Installation](#-installation) - [🎨 Usage](#-usage) - [Base on HCT](#base-on-hct) - [Color Space](#color-space) - [Color Accessibility](#color-accessibility) - [Token Mode](#token-mode) - [Setting Export](#setting-export) - [⌨️ Local Development](#️-local-development) - [🤝 Contributing](#-contributing) - [🔗 Links](#-links) #### </details> ## 📦 Installation To install components, run the following command: ```bash pnpm add antd-color-editor ``` <div align="right"> [![][back-to-top]](#readme-top) </div> ## 🎨 Usage ### Base on HCT Resources: [The Science of Color & Design](https://material.io/blog/science-of-color-design) | <img src="https://lh3.googleusercontent.com/FgfF6od_qjYXbXowPPgL3IQ8T0QnEAZnoehlRcXHSXK7QXfHe_LvBm3SeYIkxhSRn3gBjjH4GEO6DYOex8btaN34lVDSzP7ZULMMSqoE7bsxyCWA0Q=w1400-v0" height="240" /> | <img src="https://lh3.googleusercontent.com/PWM-JWdCtOxcGHHoiZfm1HkSNNcMRXyGE4CRapU1lrFHo93W1dqHACB24x7FCuqFKA-6LTBMhEtSHsMkZcu8EsOrNaUWE6ixtknM1Sv7hhpHwvLWcG1-=w1400-v0" height="240" /> | | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ### Color Space ![](https://raw.githubusercontent.com/ant-design/antd-color-editor/master/public/preview2.webp) ### Color Accessibility ![](https://raw.githubusercontent.com/ant-design/antd-color-editor/master/public/preview5.webp) ### Token Mode ![](https://raw.githubusercontent.com/ant-design/antd-color-editor/master/public/preview3.webp) ### Setting Export ![](https://raw.githubusercontent.com/ant-design/antd-color-editor/master/public/preview4.webp) <div align="right"> [![][back-to-top]](#readme-top) </div> ## ⌨️ Local Development You can use Gitpod for online development: [![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)][gitpod-url] Or clone it for local development: ```bash $ git clone https://github.com/ant-design/antd-color-editor.git $ cd antd-color-editor $ pnpm install $ pnpm start ``` <div align="right"> [![][back-to-top]](#readme-top) </div> ## 🤝 Contributing  > 📊 Total: <kbd>**3**</kbd> <a href="https://github.com/apps/dependabot" title="dependabot[bot]"> <img src="https://avatars.githubusercontent.com/in/29110?v=4" width="50" /> </a> <a href="https://github.com/canisminor1990" title="canisminor1990"> <img src="https://avatars.githubusercontent.com/u/17870709?v=4" width="50" /> </a> <a href="https://github.com/actions-user" title="actions-user"> <img src="https://avatars.githubusercontent.com/u/65916846?v=4" width="50" /> </a>  <div align="right"> [![][back-to-top]](#readme-top) </div> ## 🔗 Links - material-color-utilities: <https://github.com/material-foundation/material-color-utilities> <div align="right"> [![][back-to-top]](#readme-top) </div> --- #### 📝 License This project is [MIT](./LICENSE) licensed.  [gitpod-url]: https://gitpod.io/#https://github.com/ant-design/antd-color-editor  [back-to-top]: https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square  [release-shield]: https://img.shields.io/npm/v/antd-color-editor?logo=npm [release-url]: https://www.npmjs.com/package/antd-color-editor  [release-date-shield]: https://img.shields.io/github/release-date/ant-design/antd-color-editor?style=flat [release-date-url]: https://github.com/ant-design/antd-color-editor/releases  [ci-test-shield]: https://github.com/ant-design/antd-color-editor/workflows/Test%20CI/badge.svg [ci-test-url]: https://github.com/ant-design/antd-color-editor/actions/workflows/test.yml  [ci-release-shield]: https://github.com/ant-design/antd-color-editor/workflows/Build%20and%20Release/badge.svg [ci-release-url]: https://github.com/ant-design/antd-color-editor/actions/workflows/release.yml  [contributors-shield]: https://img.shields.io/github/contributors/ant-design/antd-color-editor.svg?style=flat [contributors-url]: https://github.com/ant-design/antd-color-editor/graphs/contributors  [forks-shield]: https://img.shields.io/github/forks/ant-design/antd-color-editor.svg?style=flat [forks-url]: https://github.com/ant-design/antd-color-editor/network/members  [stargazers-shield]: https://img.shields.io/github/stars/ant-design/antd-color-editor.svg?style=flat [stargazers-url]: https://github.com/ant-design/antd-color-editor/stargazers  [issues-shield]: https://img.shields.io/github/issues/ant-design/antd-color-editor.svg?style=flat [issues-url]: https://github.com/ant-design/antd-color-editor/issues/new/choose