Awesome Open Source
Awesome Open Source
vanilla-colorful is a port of react-colorful to vanilla Custom Elements.

Features

  • 🗜 Small: Just 2,7 KB (minified and gzipped). Size Limit controls the size.
  • 🚀 Fast: Built with standards based Custom Elements.
  • 🛡 Bulletproof: Written in strict TypeScript and covered by 100+ tests.
  • 🗂 Typed: Ships with types included.
  • 😍 Simple: The interface is straight forward and easy to use.
  • 💬 Accessible: Follows the WAI-ARIA guidelines to support users of assistive technologies.
  • 📲 Mobile-friendly: Works well on mobile devices and touch screens.
  • 👫 Framework-agnostic: Can be used with any framework.
  • 💨 No dependencies

Live demos

Install

npm install vanilla-colorful --save

Or use one of the following content delivery networks:

unpkg.com CDN:

<script type="module" src="https://unpkg.com/vanilla-colorful?module"></script>

Skypack CDN:

<script type="module" src="https://cdn.skypack.dev/vanilla-colorful"></script>

JSPM CDN:

<script type="module" src="https://jspm.dev/vanilla-colorful"></script>

Usage

<hex-color-picker color="#1e88e5"></hex-color-picker>
<script type="module">
  import 'vanilla-colorful';

  const picker = document.querySelector('hex-color-picker');
  picker.addEventListener('color-changed', (event) => {
    // get updated color value
    const newColor = event.detail.value;
  });

  // get current color value
  console.log(picker.color);
</script>

ES modules

vanilla-colorful is authored using ES modules which are natively supported by modern browsers. However, it also uses "bare module imports" which are not yet standardized and require a small transform.

We recommend to use one of the modern tools that leverage ES modules based development, such as snowpack, vite, @web/dev-server, or wmr. None of these tools are needed when importing the component from CDN.

Supported color models

The default vanilla-colorful's input/output format is a HEX string (like #ffffff). In case if you need another color model, we provide 12 additional color picker bundles.

How to use another color model

Available pickers

File to import HTML element Value example
"hex-color-picker.js" <hex-color-picker> "#ffffff"
"hsl-color-picker.js" <hsl-color-picker> { h: 0, s: 0, l: 100 }
"hsl-string-color-picker.js" <hsl-string-color-picker> "hsl(0, 0%, 100%)"
"hsla-color-picker.js" <hsla-color-picker> { h: 0, s: 0, l: 100, a: 1 }
"hsla-string-color-picker.js" <hsla-string-color-picker> "hsla(0, 0%, 100%, 1)"
"hsv-color-picker.js" <hsv-color-picker> { h: 0, s: 0, v: 100 }
"hsv-string-color-picker.js" <hsv-string-color-picker> "hsv(0, 0%, 100%)"
"hsva-color-picker.js" <hsva-color-picker> { h: 0, s: 0, v: 100, a: 1 }
"hsva-string-color-picker.js" <hsva-string-color-picker> "hsva(0, 0%, 100%, 1)"
"rgb-color-picker.js" <rgb-color-picker> { r: 255, g: 255, b: 255 }
"rgba-color-picker.js" <rgba-color-picker> { r: 255, g: 255, b: 255, a: 1 }
"rgb-string-color-picker.js" <rgb-string-color-picker> "rgb(255, 255, 255)"
"rgba-string-color-picker.js" <rgba-string-color-picker> "rgba(255, 255, 255, 1)"

Code example

<rgba-color-picker></rgba-color-picker>
<script type="module">
  import 'vanilla-colorful/rgba-color-picker.js';

  const picker = document.querySelector('rgba-color-picker');
  picker.color = { r: 50, g: 100, b: 150, a: 1 };
</script>

Overriding styles

vanilla-colorful exposes CSS Shadow Parts allowing to override the default styles:

hex-color-picker {
  height: 250px;
}

hex-color-picker::part(saturation) {
  bottom: 30px;
  border-radius: 3px 3px 0 0;
}

hex-color-picker::part(hue) {
  height: 30px;
  border-radius: 0 0 3px 3px;
}

hex-color-picker::part(saturation-pointer) {
  border-radius: 5px;
}

hex-color-picker::part(hue-pointer) {
  border-radius: 2px;
  width: 15px;
  height: inherit;
}

HEX input

vanilla-colorful provides an additional <hex-input> element that can be used to type a color:

<hex-input color="#1e88e5"></hex-input>
<script type="module">
  import 'vanilla-colorful/hex-input.js';

  const input = document.querySelector('hex-input');
  input.addEventListener('color-changed', (event) => {
    const newColor = event.detail.value;
  });
</script>

<hex-input> renders an unstyled <input> element inside a slot and exposes it for styling using part. You can also pass your own <input> element as a child if you want to fully configure it.

Base classes

vanilla-colorful provides a set of base classes that can be imported without registering custom elements. This is useful if you want to create your own color picker with a different tag name.

import { RgbBase } from 'vanilla-colorful/lib/entrypoints/rgb.js';

customElements.define('custom-color-picker', class extends RgbBase {});

Code Recipes

TypeScript support

vanilla-colorful supports TypeScript and ships with types in the library itself; no need for any other install.

How you can get the most from our TypeScript support

Custom types

While not only typing its own class methods and variables, it can also help you type yours. Depending on the element you are using, you can also import the type that is associated with the element. For example, if you are using our <hsl-color-picker> element, you can also import the HslColor type.

import type { HslColor } from 'vanilla-colorful/hsl-color-picker';

const myHslValue: HslColor = { h: 0, s: 0, l: 0 };

Typed events

All the included custom elements provide overrides for addEventListener and removeEventListener methods to include typings for the color-changed custom event detail property:

const picker = document.querySelector('rgba-color-picker');

picker.addEventListener('color-changed', (event) => {
  console.log(event.detail.value.a); // (property) RgbaColor.a: number
});

Lit plugin

All the included custom elements are compatible with lit-analyzer and lit-plugin extension for Visual Studio Code, so you can benefit from type checking in Lit templates, for example validating binding names.

Browser support

vanilla-colorful uses Custom Elements and Shadow DOM, and does not support IE11 or legacy Edge.

Why vanilla-colorful?

vanilla-colorful has all the benefits of react-colorful with one important difference.

While react-colorful claims to have zero dependencies, it still expects you to use React or Preact. This means that Angular, Vue, Svelte or vanilla JS users would have an extra dependency in their apps.

Now when all the evergreen browsers support standards based Custom Elements, it's perfect time to build such tiny and lightweight UI controls as web components rather than framework components.


Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
Typescript (254,312) 
Webcomponents (2,118) 
Color (2,112) 
Custom Elements (597) 
Color Picker (515) 
Vanilla (347) 
Related Projects
Advertising 📦 9
All Projects
Application Programming Interfaces 📦 120
Applications 📦 181
Artificial Intelligence 📦 72
Blockchain 📦 70
Build Tools 📦 111
Cloud Computing 📦 79
Code Quality 📦 28
Collaboration 📦 30
Command Line Interface 📦 48
Community 📦 81
Companies 📦 60
Compilers 📦 60
Computer Science 📦 74
Configuration Management 📦 39
Content Management 📦 167
Control Flow 📦 197
Data Formats 📦 77
Data Processing 📦 266
Data Storage 📦 132
Economics 📦 60
Frameworks 📦 198
Games 📦 122
Graphics 📦 103
Hardware 📦 148
Integrated Development Environments 📦 47
Learning Resources 📦 147
Legal 📦 28
Libraries 📦 119
Lists Of Projects 📦 21
Machine Learning 📦 336
Mapping 📦 61
Marketing 📦 15
Mathematics 📦 55
Media 📦 228
Messaging 📦 97
Networking 📦 304
Operating Systems 📦 84
Operations 📦 120
Package Managers 📦 52
Programming Languages 📦 229
Runtime Environments 📦 96
Science 📦 42
Security 📦 375
Social Media 📦 26
Software Architecture 📦 70
Software Development 📦 68
Software Performance 📦 57
Software Quality 📦 127
Text Editors 📦 45
Text Processing 📦 131
User Interface 📦 310
User Interface Components 📦 465
Version Control 📦 29
Virtualization 📦 68
Web Browsers 📦 38
Web Servers 📦 25
Web User Interface 📦 194