Color picker

A color picker lets users pick a color from a gradient, a set of swatches or a typed value, for theme settings and tag colors.

Overview

The color picker is a normal text input with the Coloris plugin attached. Coloris wraps the field, adds a color button inside it, and opens a picker on click. The value stays in the input, so the field works in a form like any other.

<input type="text" class="form-control d-block" id="colorpicker-overview" value="#066fd1" />

Installation

Install Coloris with npm:

npm install @melloware/coloris

Or include it from a CDN. You need both the script and its stylesheet:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/[email protected]/dist/libs/@melloware/coloris/dist/coloris.min.css" />
<script src="https://cdn.jsdelivr.net/npm/@tabler/[email protected]/dist/libs/@melloware/coloris/dist/umd/coloris.min.js"></script>

Tabler restyles the picker to match the rest of the interface. Those styles live in the vendors plugin, so include tabler-vendors.css as well:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/[email protected]/dist/css/tabler-vendors.min.css" />

Usage

Basic field

Add a text input with the form-control class, then attach Coloris to it with a selector.

<input type="text" class="form-control d-block" id="colorpicker" value="#066fd1" />

document.addEventListener('DOMContentLoaded', function () {
  Coloris({
    el: '#colorpicker',
    selectInput: false,
  })
})

selectInput: false stops the plugin from selecting the whole text when the field gets focus.

Color format

Set format to choose what the input stores. Use hex when you save the value in a database, because it is short and easy to read.

<input type="text" class="form-control d-block" id="colorpicker-rgb" value="rgb(66, 153, 225)" />

Alpha channel

Alpha is off by default. Set alpha: true to add the opacity slider.

<input type="text" class="form-control d-block" id="colorpicker-alpha" value="rgba(174, 62, 201, 0.5)" />

Coloris({ el: '#colorpicker-alpha', alpha: true, format: 'mixed' })

Swatches

Pass a list of colors as swatches. They show under the picker as quick choices. Tabler theme colors work well here.

<input type="text" class="form-control d-block" id="colorpicker-swatches" value="#4299e1" />

Coloris({
  el: '#colorpicker-swatches',
  swatches: ['#066fd1', '#4299e1', '#4263eb', '#ae3ec9', '#d6336c', '#d63939'],
})

To read the colors from the theme instead of writing them by hand, take them from the CSS variables:

const swatches = ['--tblr-blue', '--tblr-azure', '--tblr-indigo'].map(function (prop) {
  return getComputedStyle(document.body).getPropertyValue(prop)
})

Swatches only

Set swatchesOnly: true to hide the gradient. Users can then pick only from your list. Use it when a design system allows a fixed set of colors.

<input type="text" class="form-control d-block" id="colorpicker-swatches-only" value="#2fb344" />

Common options

These are the options you will need most often. Coloris has more, and they are listed in its documentation.

Read the picked color

Coloris fires a coloris:pick event on every change. Use it to update a preview or to save the value.

document.addEventListener('coloris:pick', function (event) {
  console.log(event.detail.color)
})

Several fields with different options

Coloris() sets the options for all fields it is attached to. When one field needs its own settings, register it with setInstance().

Coloris({ el: '.color-input', alpha: false, swatchesOnly: false, swatches: swatches })

Coloris.setInstance('#brand-color', {
  alpha: false,
  swatchesOnly: true,
  swatches: swatches,
})

There is one picker for the whole page, and it is set up again every time it opens. Options you leave out of an instance keep the value from the field opened before it. Repeat the options that matter in every instance, as in the example above, so each field always opens the same way.

Examples

Field with a label

Use the picker like any other form field: a label, the input, and a hint below it.

<div class="card">
  <div class="card-body">
    <div class="mb-0">
      <label class="form-label" for="colorpicker-form">Brand color</label>
      <input type="text" class="form-control d-block" id="colorpicker-form" value="#d6336c" />
      <small class="form-hint">This color is used for buttons and links.</small>
    </div>
  </div>
</div>

Accessibility

• Always add a <label> linked to the input with for and id. The color button alone does not say what the field is for.
• Keep the text value visible. Users who cannot tell colors apart can still read and type the value.
• Do not use the color as the only meaning. If a color marks a status, repeat the status in text.
• The picker can be used with the keyboard, and the input accepts a typed value, so a mouse is never required.

Related