Coloris - A lightweight and elegant JavaScript color picker. Written in vanilla ES6, no dependencies. Accessible.

Overview

Coloris

Coloris in light, dark and polaroid themes

A lightweight and elegant JavaScript color picker written in vanilla ES6.
Convert any text input field into a color field.

View demo

Features

  • Zero dependencies
  • Very easy to use
  • Customizable
  • Themes and dark mode
  • Opacity support
  • Color swatches
  • Multiple color formats
  • Touch support
  • Fully accessible
  • Works on all modern browsers (no IE support)

Getting Started

Basic usage

Download the latest version, and add the script and style to your page:

">
<link rel="stylesheet" href="coloris.min.css"/>
<script src="coloris.min.js">script>

Or include from a CDN:

">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/mdbassit/Coloris@latest/dist/coloris.min.css"/>
<script src="https://cdn.jsdelivr.net/gh/mdbassit/Coloris@latest/dist/coloris.min.js">script>

Then just add the data-coloris attribute to your input fields:

">
<input type="text" data-coloris>

That's it. All done!

What about NPM and TypeScript?

Thanks to @melloware, NPM and TypeScript support is available in a fork of this project. Head over to @melloware's fork or to their NPM repo for more information.

Options

Coloris({
  // The default behavior is to append the color picker's dialog to the end of the document's
  // body. but it is possible to append it to a custom parent instead. This is especially useful
  // if the color fields are in a scrollable container and you want color picker' dialog to stay
  // anchored to them. You will need to set the position of the container to relative or absolute.
  // Note: This should be a scrollable container with enough space to display the picker.
  parent: '.container',

  // A custom selector to bind the color picker to. This must point to input fields.
  el: '.color-field',

  // The bound input fields are wrapped in a div that adds a thumbnail showing the current color
  // and a button to open the color picker (for accessibility only). If you wish to keep your
  // fields unaltered, set this to false, in which case you will lose the color thumbnail and
  // the accessible button (not recommended).
  // Note: This only works if you specify a custom selector to bind the picker (option above),
  // it doesn't work on the default [data-coloris] attribute selector.
  wrap: true,

  // Available themes: default, large, polaroid.
  // More themes might be added in the future.
  theme: 'default',

  // Set the theme to light or dark mode:
  // * light: light mode (default).
  // * dark: dark mode.
  // * auto: automatically enables dark mode when the user prefers a dark color scheme.
  themeMode: 'light',

  // The margin in pixels between the input fields and the color picker's dialog.
  margin: 2,

  // Set the preferred color string format:
  // * hex: outputs #RRGGBB or #RRGGBBAA (default).
  // * rgb: outputs rgb(R, G, B) or rgba(R, G, B, A).
  // * hsl: outputs hsl(H, S, L) or hsla(H, S, L, A).
  // * auto: guesses the format from the active input field. Defaults to hex if it fails.
  // * mixed: outputs #RRGGBB when alpha is 1; otherwise rgba(R, G, B, A).
  format: 'hex',

  // Set to true to enable format toggle buttons in the color picker dialog.
  // This will also force the format (above) to auto.
  formatToggle: false,

  // Enable or disable alpha support.
  // When disabled, it will strip the alpha value from the existing color value in all formats.
  alpha: true,

  // Set to true to hide all the color picker widgets (spectrum, hue, ...) except the swatches.
  swatchesOnly: false,

  // Focus the color value input when the color picker dialog is opened.
  focusInput: true,

  // Show an optional clear button and set its label
  clearButton: {
    show: true,
    label: 'Clear'
  },

  // An array of the desired color swatches to display. If omitted or the array is empty,
  // the color swatches will be disabled.
  swatches: [
    '#264653',
    '#2a9d8f',
    '#e9c46a',
    'rgb(244,162,97)',
    '#e76f51',
    '#d62828',
    'navy',
    '#07b',
    '#0096c7',
    '#00b4d880',
    'rgba(0,119,182,0.8)'
  ]
});

Accessibility and internationalization

Several labels are used to describe the various widgets of the color picker, which can be read aloud by a screen reader for people with low vision. If you wish to customize or translate those labels, you need to add an "a11y" option to the global Coloris object:

Coloris({
  a11y: {
    open: 'Open color picker',
    close: 'Close color picker',
    marker: 'Saturation: {s}. Brightness: {v}.',
    hueSlider: 'Hue slider',
    alphaSlider: 'Opacity slider',
    input: 'Color value field',
    format: 'Color format',
    swatch: 'Color swatch',
    instruction: 'Saturation and brightness selector. Use up, down, left and right arrow keys to select.'
  }
});

Events

An input event is triggered on the bound input field whenever a new color is selected.
A change event is triggered when the color picker is closed and if the color has changed since it was opened.

Closing the color picker

The color picker dialog can be closed by clicking anywhere on the page or by pressing the ESC on the keyboard. The later will also revert the color to its original value.

If you would like to close the dialog programmatically, you can do so by calling the close() method:

// Close the dialog
Coloris.close();

// Close the dialog and revert the color to its original value
Coloris.close(true);

Building from source

Clone the git repo:

git clone [email protected]:mdbassit/Coloris.git

Enter the Coloris directory and install the development dependencies:

cd Coloris && npm install

Run the build script:

npm run build

The built version will be in the dist directory in both minified and full copies.

Alternatively, you can start a gulp watch task to automatically build when the source files are modified:

npm run start

License

Copyright (c) 2021 Momo Bassit.
Coloris is licensed under the MIT license.

Comments
  • Not working with bootstrap Modal

    Not working with bootstrap Modal

    Coloris picker not working with latest bootstrap 5 Modal. And not able to focus or edit color input in bootstrap 5 Modal popup.

    I tried to fix it with z-index but not able to edit input hex text.

    Please help me out Sir.

    wontfix 
    opened by Aks8578 13
  • Add option to use picker inline

    Add option to use picker inline

    In case of inline I don't want an input field to be visible, instead it should act as an input. Values can either be bound to a hidden input, or you simply have to listen for color picks and deal with values in the listener.

    enhancement 
    opened by jepsar 10
  • Add TypeScript type declarations file

    Add TypeScript type declarations file

    This project is looking great and seems to be gaining a bit of attention already. I know some people who'd like to use this and would like TypeScript support. This PR adds a TypeScript declaration file and updates the package.json to point to the declaration file.

    Note: When this project is publishe to NPM (see #14) and the library structure is changed, some adjustments to the declaration file might be neccessary.

    I packed this project via npm pack and installed the tarball in a TypeScript project, it picks up the declarations correctly.

    wontfix 
    opened by blutorange 9
  • Bug: Color picker sometimes goes off top of screen

    Bug: Color picker sometimes goes off top of screen

    Summary

    The color picker goes off the top of the screen when there isn't enough space for it below the input.

    For example, with the configuration

    Coloris({
    	el: '.coloris_input',
    	format: 'hex',
    	selectInput: false,
    	focusInput: false,
    	themeMode: this.editor.lightMode ? 'light' : 'dark',
    	
    	swatches: [
    		Color4.red.toHexString(),
    		Color4.purple.toHexString(),
    		Color4.blue.toHexString(),
    		Color4.yellow.toHexString(),
    		Color4.green.toHexString(),
    		Color4.clay.toHexString(),
    		Color4.black.toHexString(),
    		Color4.white.toHexString(),
    	],
    });
    

    I get, Screenshot of the color picker overflowing the top of the screen and screenshot of phone in landscape mode, color picker not overflowing

    Expected Behavior

    The color picker should go below the input.

    enhancement 
    opened by personalizedrefrigerator 7
  • Color picker not working while changing location

    Color picker not working while changing location

    I put input in a center aligned flex division but clr-picker is out of my div. when removing it's top and left style, it's in correct position but color picker not working fine and should use it's previous position to select color.

    Update: I want color picker to be always visible.

    opened by ImAgentW 7
  • Request for event

    Request for event "open" and "close"

    Sorry for my english.

    Thank you for your work and it's a wonderful project.

    If you can i need more events for example "open" and "close"

    change event not trigger on close if there's no change color. In local i add currentEl.dispatchEvent(new Event('close', { bubbles: true })); on line 290 and currentEl.dispatchEvent(new Event('open', { bubbles: true })); on line 184

    Thank you so much , Marco

    enhancement 
    opened by giacomarco 6
  • Turbo load raise error // Cannot set properties of null (setting 'innerHTML')

    Turbo load raise error // Cannot set properties of null (setting 'innerHTML')

    Look like when turbo render a page, Coloris raise an error

    Uncaught TypeError: Cannot set properties of null (setting 'innerHTML')
    

    I use CDN and init with turbo:load event

    document.addEventListener("turbo:load", function() {
        Coloris({alpha: false})
    });
    

    I've tried to add a condition init

    document.addEventListener("turbo:load", function() {
         if (document.querySelectorAll('[data-coloris]').length > 0) {
            Coloris({alpha: false})
         }
    });
    

    If the page is loaded with turbo I have the error, if i manually reload the page, it works

    Anyone know where it could come from ? Thanks

    opened by jjf21 5
  • too many decimals when setting a RGBa value

    too many decimals when setting a RGBa value

    When setting a RGBa value with for example $("#colorpicker").val("rgba(47, 47, 47, 0.36)") the value in the color picker is rgba(47, 47, 47, 0.36078431372549) image

    is there some bug that set the alpha value with 14 decimal places or is it an issue with jquery?

    Thanks

    opened by SuperDOS 5
  • Per instance configuration

    Per instance configuration

    Not sure if this is a question or a feature request. Currently it seems that configuration can only be done globally. Is it possible to have different instances with a different configuration?

    wontfix 
    opened by jepsar 5
  • Coloris element remains on page when navigating away [REACT]

    Coloris element remains on page when navigating away [REACT]

    The Coloris element remains in the DOM when navigating to different pages, this is why an onDestroy is required so we can properly remove this and prevent it from existing past when it's supposed to. image

    My manual solution in the meantime, if I want to use this library, is I have to call a function to delete this element on every page at startup, which is not ideal in the slightest.

    wontfix 
    opened by TerdyTheTerd 4
  • Inline mode with setInstance

    Inline mode with setInstance

    Hi! I tried to set inline mode through setInstance, but it still popup. maybe i do something wrong?

    <div class="form-input color-picker color-picker-inline ">
      <label for="cp2">Choose color</label>
      <input id="cp2" type="text" class="instance1" data-coloris>
    </div>
    
    Coloris.setInstance('.instance1', {
      parent: '.color-picker-inline',
      theme: 'polaroid',
      inline: true
    });
    
    opened by AntonLitvin 4
Releases(v0.16.2)
Owner
Momo Bassit
Freelance full-stack web developer and occasional graphic designer.
Momo Bassit
Colormath.js - a color conversion and color manipulation library written in typescript for Node.js, Deno and Browser

Colormath.js - a color conversion and color manipulation library written in typescript for Node.js, Deno and Browser

TheSudarsanDev 8 Feb 8, 2022
A tool for creating and maintaining cohesive, consistent, and accessible color palettes

Primer Prism Primer Prism is a tool for creating and maintaining cohesive, consistent, and accessible color palettes. ?? primer.style/prism ?? Read th

Primer 517 Jan 3, 2023
A CLI utility to calculate/verify accessible magic numbers for a color palette.

A11y Contrast A CLI utility to calculate/verify accessible magic numbers for a color palette. Read my blog post for some more information. Installatio

Darek Kay 23 Nov 13, 2022
:rainbow: Javascript color conversion and manipulation library

color JavaScript library for immutable color conversion and manipulation with support for CSS color strings. var color = Color('#7743CE').alpha(0.5).l

Qix 4.5k Jan 3, 2023
JavaScript Library for creating random pleasing colors and color schemes

#PleaseJS www.checkman.io/please Please.js is a polite companion that wants to help you make your projects beautiful. It uses HSV color space to creat

Jordan Checkman 2.3k Dec 22, 2022
Fast, small color manipulation and conversion for JavaScript

TinyColor JavaScript color tooling TinyColor is a small, fast library for color manipulation and conversion in JavaScript. It allows many forms of inp

Brian Grinstead 4.5k Jan 1, 2023
JavaScript library for all kinds of color manipulations

Chroma.js Chroma.js is a tiny small-ish zero-dependency JavaScript library (13.5kB) for all kinds of color conversions and color scales. Usage Initiat

Gregor Aisch 9.2k Jan 4, 2023
A simple Discord bot that will listen for HEX, RGB(a), and HSL(a) colors in a message, and provide a small image of that color.

Pigment For the teams of designers and developers out there - Pigment will listen for messages containing a HEX, RGB(a), or HSL(a) color, and provide

Conrad Crawford 17 Dec 8, 2022
Color2k - a color parsing and manipulation lib served in roughly 2kB

color2k a color parsing and manipulation lib served in roughly 2kB or less (2.8kB to be more precise) color2k is a color parsing and manipulation libr

Rico Kahler 506 Dec 31, 2022
Create your own complete Web color system fast and easy!

Simpler Color Create your own complete Web color system fast and easy, from as little as one base color! Color is at the heart of every UI design syst

Arnel Enero 278 Dec 20, 2022
A TypeScript package to calculate WCAG 2.0/3.0 and APCA color contrasts

a11y-color-contrast A simple utility package for working with WCAG 2.2/3.0 color contrasts a11y: Built for checking how readable colors are together S

Sondre Aasemoen 10 Oct 10, 2022
A dependency-free image color extraction library

Color mage A dependency-free image color extraction library. The extraction consists of using K-Means algorithm. It has a few utility functions as wel

Gilmar Quinelato 4 Mar 11, 2022
A array with color name -> decimal rgbs.

colors-named-decimal A array with color name -> decimal rgbs. Based on https://www.w3.org/TR/css-color-4/#colors-named Installation This package is ES

小弟调调™ 4 Jul 20, 2022
This repo contains resources & practice of project and files , while learning to master JS

Resources to learn JavaScript and conquer the world? Tutorials and Books JavaScript For Cats (http://jsforcats.com/) is a dead simply introduction for

abdulkareem alabi 1 Jan 6, 2022
Tints and shades generator in React.

Reactry's shades goals add option to enter hexColor by hand add option to get hexColor from clipboard add option to set one of the shades or tints as

null 9 May 26, 2022
Colr Pickr, a vanilla JavaScript color picker component built with SVGs, with features like saving colors. Similar design to the chrome-dev-tools color picker.

Colr Pickr Colr Pickr, a vanilla JavaScript color picking component built with SVGs, with features like saving colors. Similar design to the chrome-de

TEK 27 Jun 27, 2022
Tool Cool Color Picker is a color picker library written in typescript and using web component technologies.

Tool Cool Color Picker Tool Cool Color Picker is a color picker library written in typescript and using web component technologies. Check out the demo

Tool Cool 13 Oct 23, 2022
Duet Date Picker is an open source version of Duet Design System’s accessible date picker. Try live example at https://duetds.github.io/date-picker/

Duet Date Picker Duet Date Picker is an open source version of Duet Design System’s accessible date picker. Duet Date Picker can be implemented and us

Duet Design System 1.6k Jan 6, 2023
Flat and simple color-picker library. No dependencies, no jquery.

Flat and simple color-picker Fully Featured demo Features Simple: The interface is straight forward and easy to use. Practical: Multiple color represe

Ivan Matveev 15 Nov 14, 2022
A simple color picker application written in pure JavaScript, for modern browsers.

Color Picker A simple color picker application written in pure JavaScript, for modern browsers. Has support for touch events. Touchy… touchy… Demo and

Taufik Nurrohman 207 Dec 14, 2022