An interactive color wheel for the browser
npm install tintedTinted is a color harmony wheel. It helps you choose color combinations that create pleasing contrasts and feel harmonious.
``bashInstall with yarn
yarn add tinted
Usage
`html
``scss
@use 'tinted/wheel';
@use 'tinted/palette';.my-color-wheel {
display: flex;
flex-direction: column;
align-items: center;
margin: auto;
max-width: 400px;
}
``js
import {TintedWheel, TintedPalette} from 'tinted'let colorWheel = new TintedWheel({
container: document.querySelector('.tinted-wheel'),
colorWheelImage: './wheel.png',
})
let palette = new TintedPalette({
container: document.querySelector('.tinted-palette'),
colorWheel: colorWheel,
})
colorWheel.dispatch.on('bind-data.main', data => palette.render(data))
colorWheel.dispatch.on('markers-updated.main', () => {
palette.onColorValuesChanged()
})
colorWheel.bindData()
`A few things to note:
- The wheel can be used without the palette, but it is recommended to use them together.
- To make these abbreviated
@use statements work, you will need to add node_modules to SASS' --load-path or sass-loader's includePaths. Alternatively, you could just path into node_modules explicitly.
- If you're not using SASS in your project, we do provide compiled CSS files in the dist folder.Custom Colors
You can initialize Tinted with a custom color set:
`js
let colors = [
'red',
'#0ff',
{r: 0, g: 255, b: 0},
{h: 220, s: 1, v: 1},
{h: 300, s: 1, l: 0.5},
'hsl(0, 100%, 50%)',
]let wheel = new TintedWheel(options)
wheel.bindData(colors)
`Components
$3
The color harmony wheel for the user to make a selection of colors.
#### Options
| Name | Description |
| -------------------- | ------------------------------------------------------------------------------------------------------------------------ |
|
container | A DOM node or CSS selector for the