svelte-awesome-color-picker

svelte-awesome-color-picker is a highly customizable color picker component library with

• 🎹 built-in keyboard navigation
• 📱 mobile support
• 🤸‍♂️ accessibility information
• 🤯 and even works without javascript (fallback to browser default color input)
• 🏇 it’s compatible with form libraries
• 🧩 fully customizable

The library uses colord internally because it’s the lightest color conversion solution on the market and supports a11y contrasts.

Links

• 🌟 Github repository
• 🌴 Npm repository
• 🛫 Documentation

Examples

let hex = "#f6f0dc"

let rgb = {
  "r": 255,
  "g": 0,
  "b": 0,
  "a": 1
}

let hsv = {
  "h": 0,
  "s": 1,
  "v": 1,
  "a": 1
}

Always open version

install

npm i -D svelte-awesome-color-picker

Usage

<script>
	import ColorPicker from 'svelte-awesome-color-picker';

	let rgb; // or hsv or hex
</script>

<ColorPicker bind:rgb />

Api

The default export of the library is the main ColorPicker. It has the following props:

props

css variables

components

The color picker can be customized with components. The details and props are detailed below. It is easier to copy the library components and tweak it to your needs.

A Chrome variants are available. To use the Chrome variant you need to set the props toRight. You can partially overwrite the components:

<script>
	import ColorPicker, { ChromeVariant } from 'svelte-awesome-color-picker';
	import CustomInput from '$lib/path/to/my/awesome/variant/Input.svelte';

	let rgb;
</script>

<!-- example with the ChromeVariant -->
<ColorPicker bind:rgb components={ChromeVariant} isRight />

The components that can be overridden are:

• pickerIndicator
• sliderIndicator
• alphaIndicator
• textInput
• a11yNotice
• a11ySummary
• a11ySingleNotice
• input
• pickerWrapper
• sliderWrapper
• alphaWrapper
• wrapper

pickerIndicator

Component representing the picker indicator.

• The component should be positioned with position: absolute;.
• It should also have the css property pointer-events: none;.

Props:

sliderIndicator & alphaIndicator

Components representing the (hue) slider and alpha indicators.

• It should have the css property pointer-events: none;.

Props:

TextInput

Component representing the rgb / hex / hsv textual input below the picker

Props:

A11yNotice

Component displaying accessible contrast issues with the color chosen.

Props:

Type A11yColor:

read more about this component accessibility in the #a11y section.

a11ySummary

component displaying the content of the <summary> inside <details> tags.

Props:

a11ySingleNotice

component display the accessibility result of the color over a single item of the a11yColors props.

Props:

Input

Component representing the button to open the color picker and a hidden input with the hex value selected by the user

Props:

pickerWrapper & sliderWrapper & alphaWrapper

Encapsulates the picker, hue slider and alpha slider.

• They should define the css properties width and height.

Props:

wrapper

Encapsulates the whole color picker

Props:

Accessibility

The component itself

In progress

Accessibility notice

The component can display an accessibility notice that updates the WCAG contrast grades by setting the isA11y props.

The contrast between 2 colors is a value between 1 and 21.

A contrast between 2 colors succeed if it follows the WCAG contrast guidelines:

In the default A11ySingleNotice component that renders the AA and AAA tags, the small text values are used (can be configured for each reference color with the color props).

See the definition of the A11yColor type for more information.