Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/luncheon/reinvented-color-wheel
A vanilla-js touch-friendly HSV color picker inspired by Farbtastic Color Picker.
https://github.com/luncheon/reinvented-color-wheel
color color-picker color-wheel hsv vanilla-js
Last synced: about 2 months ago
JSON representation
A vanilla-js touch-friendly HSV color picker inspired by Farbtastic Color Picker.
- Host: GitHub
- URL: https://github.com/luncheon/reinvented-color-wheel
- Owner: luncheon
- License: wtfpl
- Created: 2018-08-22T06:17:33.000Z (over 6 years ago)
- Default Branch: main
- Last Pushed: 2023-02-06T00:14:14.000Z (about 2 years ago)
- Last Synced: 2024-11-07T05:19:24.683Z (3 months ago)
- Topics: color, color-picker, color-wheel, hsv, vanilla-js
- Language: JavaScript
- Homepage: https://luncheon.github.io/reinvented-color-wheel/
- Size: 1.54 MB
- Stars: 61
- Watchers: 4
- Forks: 5
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Reinvented Color Wheel
[](https://www.npmjs.com/package/reinvented-color-wheel)
[](https://www.jsdelivr.com/package/npm/reinvented-color-wheel)
[
](http://www.wtfpl.net)
A vanilla-js touch-friendly HSV color picker inspired by [Farbtastic Color Picker](https://acko.net/blog/farbtastic-jquery-color-picker-plug-in/).
[Demo](https://luncheon.github.io/reinvented-color-wheel/)
## Characteristics
* HSV (hue, saturation, value) cylindrical color model (unlike Farbtastic that takes HSL)
* c.f. [HSL and HSV - Wikipedia](https://en.wikipedia.org/wiki/HSL_and_HSV)
* Touch-friendly
* No need jQuery
* Lightweight (JS + CSS ~ 3.1 KB minified + gzipped)
## Installation
### via [npm](https://www.npmjs.com/package/reinvented-color-wheel) (with a module bundler)
```bash
$ npm install reinvented-color-wheel
```
```javascript
import "reinvented-color-wheel/css/reinvented-color-wheel.min.css";
import ReinventedColorWheel from "reinvented-color-wheel";
```
### via CDN ([jsDelivr](https://www.jsdelivr.com/package/npm/reinvented-color-wheel))
```html
/* `window.ReinventedColorWheel` object is available */
```
or for [modern browsers](https://caniuse.com/#feat=es6-module):
```html
import ReinventedColorWheel from "https://cdn.jsdelivr.net/npm/[email protected]/es/reinvented-color-wheel.bundle.min.js";
```
### Download directly
reinvented-color-wheel.min.css
reinvented-color-wheel.min.js
## Usage
```javascript
// create a new color picker
var colorWheel = new ReinventedColorWheel({
// appendTo is the only required property. specify the parent element of the color wheel.
appendTo: document.getElementById("my-color-picker-container"),
// followings are optional properties and their default values.
// initial color (can be specified in hsv / hsl / rgb / hex)
hsv: [0, 100, 100],
// hsl: [0, 100, 50],
// rgb: [255, 0, 0],
// hex: "#ff0000",
// appearance
wheelDiameter: 200,
wheelThickness: 20,
handleDiameter: 16,
wheelReflectsSaturation: true,
// handler
onChange: function (color) {
// the only argument is the ReinventedColorWheel instance itself.
// console.log("hsv:", color.hsv[0], color.hsv[1], color.hsv[2]);
},
});
// set color in HSV / HSL / RGB / HEX
colorWheel.hsv = [240, 100, 100];
colorWheel.hsl = [120, 100, 50];
colorWheel.rgb = [255, 128, 64];
colorWheel.hex = '#888888';
// get color in HSV / HSL / RGB / HEX
console.log("hsv:", colorWheel.hsv[0], colorWheel.hsv[1], colorWheel.hsv[2]);
console.log("hsl:", colorWheel.hsl[0], colorWheel.hsl[1], colorWheel.hsl[2]);
console.log("rgb:", colorWheel.rgb[0], colorWheel.rgb[1], colorWheel.rgb[2]);
console.log("hex:", colorWheel.hex);
// please call redraw() after changing some appearance properties.
colorWheel.wheelDiameter = 400;
colorWheel.wheelThickness = 40;
colorWheel.redraw();
```
## Web Components
This package contains the Web Components wrapping the color wheel.
The tag is ``.
The options above except for `appendTo` can be specified with kebab-case, and each option is optional.
```html
```
## React Component
This package contains the React component wrapping the color wheel.
The options above except for `appendTo` can be specified, and each option is optional.
```tsx
import React from 'react'
import ReinventedColorWheel from 'reinvented-color-wheel/react'
import 'reinvented-color-wheel/css/reinvented-color-wheel.min.css'
const App = () => {
const [hex, setHex] = React.useState('#000000')
return (
<>
setHex(hex)}
/>
setHex(e.target.value)} />
>
)
}
```
## License
[WTFPL](http://www.wtfpl.net)
## Sister Package
[lch-color-wheel](https://github.com/luncheon/lch-color-wheel): **L\*C\*h** color wheel