https://github.com/ant-design/antd-color-editor
🎨 an open-source color editor for designing color system
https://github.com/ant-design/antd-color-editor
ant-design antd color-system hct kitchen token
Last synced: about 1 year ago
JSON representation
🎨 an open-source color editor for designing color system
- Host: GitHub
- URL: https://github.com/ant-design/antd-color-editor
- Owner: ant-design
- License: mit
- Created: 2023-05-24T06:13:12.000Z (about 3 years ago)
- Default Branch: master
- Last Pushed: 2024-06-17T12:00:25.000Z (about 2 years ago)
- Last Synced: 2025-04-15T11:08:11.078Z (about 1 year ago)
- Topics: ant-design, antd, color-system, hct, kitchen, token
- Language: TypeScript
- Homepage: https://ant-design.github.io/antd-color-editor/
- Size: 11.2 MB
- Stars: 32
- Watchers: 1
- Forks: 5
- Open Issues: 16
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
Antd Color Studio
[**🎨 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]
[![contributors][contributors-shield]][contributors-url]
[![forks][forks-shield]][forks-url]
[![stargazers][stargazers-shield]][stargazers-url]
[![issues][issues-shield]][issues-url]
[](https://ant-design.github.io/antd-color-editor/~demos/colorstudio-demo-demo)
Table of contents
#### 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)
####
## 📦 Installation
To install components, run the following command:
```bash
pnpm add antd-color-editor
```
[![][back-to-top]](#readme-top)
## 🎨 Usage
### Base on HCT
Resources: [The Science of Color & Design](https://material.io/blog/science-of-color-design)
| 
| 
|
| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
### Color Space
### Color Accessibility
### Token Mode
### Setting Export
[![][back-to-top]](#readme-top)
## ⌨️ Local Development
You can use Gitpod for online development:
[][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
```
[![][back-to-top]](#readme-top)
## 🤝 Contributing
> 📊 Total: **3**
[![][back-to-top]](#readme-top)
## 🔗 Links
- material-color-utilities:
[![][back-to-top]](#readme-top)
---
#### 📝 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