tinted

    0.0.6 • Public • Published

    Tinted

    Tinted is a color harmony wheel. It helps you choose color combinations that create pleasing contrasts and feel harmonious.

    Demo

    Install

    # Install with yarn 
    yarn add tinted
     
    # Or install with NPM 
    npm i tinted

    Usage

    <div class="my-color-wheel">
      <svg class="tinted-wheel"></svg>
      <div class="tinted-palette"></div>
    </div>
    @use 'tinted/wheel';
    @use 'tinted/palette';
     
    .my-color-wheel {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin: auto;
      max-width: 400px;
    }
    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:

    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

    TintedWheel

    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 <svg> element that the wheel should be created inside of
    colorWheelImage A URI to a color HSV color wheel image to use
    radius The radius of the wheel in SVG coordinate units
    markerWidth The diameter of the markers used to select colors on the wheel in SVG coordinate units
    markerOutlineWidth The width of the outline of the color marker in SVG coordinate units
    margin The distance between the border of the <svg> and the circle of the wheel in SVG coordinate units
    initRoot The color that should initially be used to select other harmony colors
    initMode The initial mode the color wheel is in
    baseClassName The prefix for the class names for all generated elements. Overriding this will cause all provided CSS to no longer work

    Methods

    Name Description
    bindData(userData) It is mandatory to invoke this method. Pass in either an array of color-like values, or the number of colors to initially display. Default to 5 colors
    setMode(mode) Set the mode of the wheel. Must be a value from the exported colorModes object
    setHarmony() Based on the current root marker and the current mode, set the values of the other markers to be in harmony
    isInMode(mode): boolean Returns true if the wheel is in that mode

    TintedPalette

    A palette of colors to display the user's chosen values from the TintedWheel. For each color it:

    • Allows the user to change the value (or brightness -- "V" in the HSV color model) of the color
    • Displays the hex string value of the color

    Options

    Name Description
    container A DOM node or CSS selector for the element that the palette should be created inside of
    colorWheel The TintedColorWheel object to base the palette off of
    baseClassName The prefix for the class names for all generated elements. Overriding this will cause all provided CSS to no longer work

    Methods

    Name Description
    constructor(options) Constructor
    render(data) Create or update the number of colors in the palette based on data from the wheel
    onColorValuesChanged() Update the color values for the existing number of colors, passing in the current mode the wheel is in

    Styling

    Feel free to override any of the default styling as you please.

    Out of the box, tinted supports a color scheme for a light and dark background, defaulting to the light background. To change it to expect a dark background, add a tinted--dark class to a parent element of the wheel and/or palette.

    Install

    npm i tinted

    DownloadsWeekly Downloads

    6

    Version

    0.0.6

    License

    MIT

    Unpacked Size

    91 kB

    Total Files

    11

    Last publish

    Collaborators

    • zposten