ColorTap

A tiny, dependency-free, color input field helper that utilizes the native color picker.

Installation #

Manual Download #

Download the latest version of colortap and then place the following HTML in your page’s head element:

<script type="text/javascript" src="dist/colortap.min.js"></script>
<link rel="stylesheet" href="dist/colortap.min.css" />

CDN (Courtesy of jsDelivr) #

Place the following HTML in your page’s head element (check to make sure the version in the URLs is the version you want):

<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/fivefifteen/[email protected]/dist/colortap.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fivefifteen/[email protected]/dist/colortap.min.css" />

NPM #

npm install colortap --save

// ES6
import colortap from 'colortap'

// CommonJS
const colortap = require('colortap')

Fetcher #

fetcher install fivefifteen/colortap --save

Bower #

bower install fivefifteen/colortap --save

Usage #

Basic HTML Structure #

<div class="colortap">
  <input type="color" id="main-color" value="#5185b3">
  <button type="button" class="colortap-open colortap-value" data-colortap-style-prop="background-color"></button>
</div>

The `colortap` Function #

Initiates ColorTap on any element that has the colortap class. This should be a container around your color input.

Example #

window.addEventListener('load', function () {
  colortap()
})

Attributes/Classes #

The colortap-input class – Any input element with this class will have it’s value set to the selected color any time the color is changed. The color will also be set to any value that is entered into this input field.
The colortap-open class – Any element with this class will open the color picker when clicked.
The colortap-value class – Any element with this class will have it’s text content set to the color when the color is changed. If this element is an input, it’s value will be updated instead of text content.
The data-colortap-style-prop attribute – Set this attribute to a style property (like background or color) on an element to have it’s style updated when the color is changed. Multiple style properties can be defined by separating them with a comma (ie. background,color).

JavaScript Methods #

The containing colortap element (the element with the colortap class) will have the following methods attached to it available for use:

var color = document.querySelector('.color')

color.open() // Opens the color picker

color.set('#00ff00') // Sets the color

var currentColor = color.get() // Gets the current color

// The `change` event bubbles up to the containing element so you can detect changes like so:
color.addEventListener('change', function () {
  document.body.style.setProperty('--color', event.target.value)
})