# @melloware/coloris
> A lightweight and elegant color picker.
Latest version **0.25.0** (published 2025-06-02) · MIT license · 0 weekly downloads
## Install
```sh
npm install @melloware/coloris
pnpm add @melloware/coloris
yarn add @melloware/coloris
bun add @melloware/coloris
```
## Health
**Score 50/100 (C)** — status: stable.
Positive: has types; esm support; no vulnerabilities; high maintenance score.
Warnings: low downloads; pre 1.0.
Negative: stale.
## Facts
| | |
|---|---|
| Version | 0.25.0 |
| Published | 2025-06-02 |
| First published | 2021-11-05 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 153.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 48 |
| Author | Momo Bassit |
| Maintainers | blutorange, melloware |
| Keywords | color, picker, color picker, color-picker, colorpicker, accessible, accessibility, aria, a11y, wai-aria |
## Links
- npm: https://www.npmjs.com/package/@melloware/coloris
- Repository: https://github.com/melloware/coloris-npm
- Homepage: https://coloris.js.org
- Issues: https://github.com/mdbassit/Coloris/issues
- npm.io page: https://npm.io/package/@melloware/coloris
## Alternatives
- [postcss-color-hex-alpha](https://npm.io/package/postcss-color-hex-alpha.md) — 6.4M weekly downloads
- [randomcolor](https://npm.io/package/randomcolor.md) — 348.0K weekly downloads
- [bows](https://npm.io/package/bows.md) — 1.3K weekly downloads
- [ep_prefer_color_scheme](https://npm.io/package/ep_prefer_color_scheme.md) — 260 weekly downloads
- [coc-yank](https://npm.io/package/coc-yank.md) — 61 weekly downloads
## Recent versions
- 0.25.0 (latest) — 2025-06-02
- 0.24.2 — 2025-05-15
- 0.24.1 — 2025-05-14
- 0.24.0 — 2024-04-12
- 0.23.1 — 2024-04-05
- 0.23.0 — 2024-03-05
- 0.22.0 — 2023-11-06
- 0.21.1 — 2023-08-22
- 0.21.0 — 2023-06-30
- 0.20.0 — 2023-06-04
- 0.19.1 — 2023-04-22
- 0.19.0 — 2023-04-20
- 0.18.0 — 2023-02-13
- 0.17.1 — 2023-01-20
- 0.17.0 — 2023-01-14
- … 20 more at https://npm.io/package/@melloware/coloris/versions
## README
[](https://opensource.org/licenses/MIT)
[](https://badge.fury.io/js/@melloware%2Fcoloris)
[](https://snyk.io/advisor/npm-package/@melloware/coloris)
# Coloris NPM
A lightweight and elegant JavaScript color picker written in vanilla ES6.
Convert any text input field into a color field.
Forked from https://github.com/mdbassit/Coloris so we could provide TypeScript and NPM support. Head over to Momo Bassit's original repo for user documentation.
## Bundlers
See [the tests directory](./test-npm) for examples with different bundlers.
## NPM
You can download the color picker from NPM:
```bash
# using NPM
npm install @melloware/coloris
# using Yarn
yarn add @melloware/coloris
```
And then use it within a module environment, e.g. with browserify, rollup,
webpack etc. In this case, you must initialize the color picker before its
first use (which has several side-effects such as adding DOM elements):
```javascript
import "@melloware/coloris/dist/coloris.css";
import Coloris from "@melloware/coloris";
Coloris.init();
Coloris({el: "#coloris"});
```
Since default exports can be tricky, if this does not work with your bundler, use named imports instead:
```javascript
import "@melloware/coloris/dist/coloris.css";
import { coloris, init } from "@melloware/coloris";
init();
coloris({el: "#coloris"});
```
## AMD
The color picker also works with AMD / require.js:
```javascript
requirejs(['path/to/coloris'], function (Coloris) {
Coloris.init();
Coloris({
el: "#coloris",
});
});
```
## Java / Maven
The colorpicker can also be downloaded from [Maven Central](https://central.sonatype.dev/search?q=coloris)
as a Java JAR for use in Java web applicatons:
```xml
org.webjars.npm
melloware__coloris
...
```
## TypeScript
This package includes TypeScript declarations. When you use it in a module
environment, just import it:
```typescript
import "@melloware/coloris/dist/coloris.css";
import * as Color from "@melloware/coloris";
Coloris.init();
Coloris.coloris({el: "#coloris"});
Coloris.close();
```
If you have `allowSyntheticDefaultImports` enabled, you could also use:
```typescript
import "@melloware/coloris/dist/coloris.css";
import Coloris from "@melloware/coloris";
Coloris.init();
Coloris({el: "#coloris"});
Coloris.close();
```
If you wish to write a global script file, use a triple slash reference:
```typescript
///
Coloris({
el: "#coloris",
});
```
## Building from source
First of all, again, please note that this is a fork of the original repo!
Clone the git repo:
```bash
git clone git@github.com:melloware/coloris-npm
```
Enter the Coloris directory and install the development dependencies:
```bash
cd coloris-npm && npm install
```
Run the build script:
```bash
npm run build
```
The built version will be in the `dist` directory in both minified and full copies.
Alternatively, you can start a gulp watch task to automatically build when the source files are modified:
```bash
npm run start
```
## Publishing
Adjust the version in the `package.json` if necessary, then
```bash
npm login
# This will run npm run build automatically
npm publish --access public
```
Then upload code to github, create tag & release.
## License
Copyright (c) 2021 Momo Bassit.
**Coloris** is licensed under the [MIT license](https://github.com/melloware/coloris-npm/blob/main/LICENSE).
---
_Source: https://npm.io/package/@melloware/coloris · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._