A simple two channel Color Picker

Usage no npm install needed!

<script type="module">
  import adrianjostTwoChannelPicker from 'https://cdn.skypack.dev/@adrianjost/two-channel-picker';



npm (scoped) Dependabot Status Dependency Status Dependency Status

A simple two channel Color Picker


I needed an intuitive color picker to control my warm-white-cold-white (WWCW) LED Strips with the SmartLight Project.

two channel picker screenshot

The picker value is therefore indepent from the displayed color. The given value is a number between 0 and 1 for each of the two channels. The brightness can be determined by dragging the slider along the Y-axis. Dragging along the X-axis changes the relationship between the two channels.

two channel picker values


As a native Web Component

<script src="https://cdn.jsdelivr.net/npm/@adrianjost/two-channel-picker@0.3.6/dist/wc/two-channel-picker.min.js"></script>

<div style="width: 300px; height: 300px;">
        options='{"colorLeft": "#f00", "colorRight": "#00f" }'

    document.getElementById("picker").addEventListener("input", (event) => {

please note, that you may need to adjust the version number in the url.

with VueJS

Vue 2

Don't worry about the <1 version number. I haven't found any issues in the last 2 years so v1 will use an identical implementation, but is vue3 compatible.

npm i @adrianjost/two-channel-picker@0.3.6
# or
yarn add @adrianjost/two-channel-picker@0.3.6
npm i @adrianjost/two-channel-picker@1.0.0@beta.1
# or
yarn add @adrianjost/two-channel-picker@1.0.0@beta.1

Usage in your App

            colorLeft: '#fd9',
            colorRight: '#9df',
            marker: {
                radius: 16,
                borderWidth: 2,

import TwoChannelPicker from "@adrianjost/two-channel-picker";

export default {
    components: {
    data() {
        return {
            channels: [0, 1],


The package also includes some helper methods. You can access them by importing the according js files. Please use the JSDoc comments to learn how to use them.

import {
} from "@adrianjost/two-channel-picker/dist/helpers/channelColor.js";
import {
} from "@adrianjost/two-channel-picker/dist/helpers/colorConversion.js";



You can customize the picker with the following props/attributes.

When using the lib as a web component you must provide all attributes JSON.stringify()-ed.

attribute type default value description
value / v-model Array, String [1,0] the current channel values, if provided as a String, this must be JSON.parse()-able
options Object {} all your config goes in here


Available Attributes in the options prop:

attribute type default value description
readOnly Boolean false should the user be able to move the marker?
colorLeft String #fd9 the color in the top left corner. Must be in the HEX Format with 3 or 6 digits.
colorRight String #fd9 the color in the top right corner. Must be in the HEX Format with 3 or 6 digits.
marker.borderWidth Number 2 The border width of the active marker in px.
marker.radius Number 16 The border radius including the borderWidth in px.

You need more options? Please open an issue and I will do my best to implement it. Pull Requests are also welcome!