Package Exports

tinted

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (tinted) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Tinted

Tinted is a reconstruction of Adobe's color wheel, built for the browser using D3.js.

Demo

https://zposten.github.io/tinted/

Install

# Install with yarn
yarn add tinted

# Or install with NPM
npm i tinted

Usage

<div id="tinted"></div>

@use 'tinted/colorWheel';
@use 'tinted/colorPalette';

#tinted {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: auto;
  width: 400px;
}

To make these @use statements work, you will need to add node_modules to SASS' --load-path or sass-loader's includePaths.

If you're not using SASS in your project, we do provide compiled CSS files in the dist folder.

import {ColorWheel, ColorPalette} from 'tinted'

let wheel = new ColorWheel({container: '#tinted'})
let palette = new ColorPalette(wheel)

wheel.bindData()

Custom Colors

You can initialize Tinted with a custom color set:

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 ColorWheel({container: '#tinted'})
wheel.bindData(colors)