svelte-awesome-color-picker

highly customizable color picker component library

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

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

Install

npm i -D svelte-awesome-color-picker

Links

The same documentation can be seen on Github, on the npm registry or on the documentation site. I would suggest to visite the documentation site since it has interactive examples!

• 🛫 Documentation
• 🌟 Github repository
• 🌴 Npm repository
• 👌 Changelog

Summary

• Install
• Links
• Summary
• Examples
  • Default layout
  • Chrome variant
  • Accessibility notice variant
  • Always open version
  • Bind event ’on:input’
  • Override the css variables
• Api
  • Color picker
    • events
    • css variables
  • components
    • pickerIndicator
    • textInput
    • Input
    • wrapper
    • a11yNotice
    • a11ySummary
    • a11ySingleNotice
  • Accessibility
    • The component itself
    • Accessibility notice
• How to
  • Fix overflow issues
• Migration
  • update from v2 to v3

Examples

Default layout

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

<ColorPicker
	bind:hex
	bind:rgb
	bind:hsv
	bind:color
	open
/>

let hex = "#f6f0dc"

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

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

let color = "// instance of Colord"

Chrome variant

Source code

<script>
	import ColorPicker, { ChromeVariant } from 'svelte-awesome-color-picker';
</script>

<ColorPicker bind:rgb bind:hsv bind:hex components={ChromeVariant} sliderDirection="horizontal" />

Accessibility notice variant

Source code

<script>
	import ColorPicker, { A11yVariant } from 'svelte-awesome-color-picker';
</script>

<ColorPicker
	components={A11yVariant}
	bind:hex
	bind:rgb
	bind:hsv
	isAlpha
	isA11yOpen
	isA11yClosable={false}
	a11yColors={[
		{ hex: '#FFF', reverse: true, placeholder: 'background' },
		{ hex: '#FFF', placeholder: 'title', size: 'large' },
		{ hex: '#FFF', placeholder: 'text' },
		{ hex: '#EEE', placeholder: 'button' }
	]}
/>

Always open version

<script>
	import ColorPicker, { ChromeVariant } from 'svelte-awesome-color-picker';
</script>

<ColorPicker
	bind:rgb
	bind:hsv
	bind:hex
	components={ChromeVariant}
	sliderDirection="horizontal"
	isDialog={false}
/>

Bind event ’on:input’

In this example, the color is appended to the history at each event.

<ColorPicker
	{rgb}
	on:input={(event) => {
		historyHex = [...historyHex, event.detail.hex];
	}}
/>

let history = []

Override the css variables

<ColorPicker
	bind:rgb
	bind:hsv
	bind:hex
	--picker-height="100px"
	--picker-width="100px"
	--slider-width="25px"
	--picker-indicator-size="25px"
	--picker-z-index="10"
	--input-size="100px"
	--focus-color="green"
/>

Api

The library exports 4 different things:

• The color picker as a default export
• ChromeVariant: the Chrome variant
• A11yVariant: the accessibility variant (to display a panel which shows the WCAG grades)
• HsvaColor and RgbaColor: the two types defining HSV and RGB colors

Color picker

events

See the example Bind event ’on:input’.

css variables

See the example Override the 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 them to your needs.

A Chrome variant and an accessibility variant are available. To use the Chrome variant you need to set the props sliderDirection to horizontal. You can also partially overwrite the components:

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

	let rgb;
</script>

<!-- example with the default display and a custom Input component -->
<ColorPicker bind:rgb components={{ input: CustomInput }} />

<!-- example with the Chrome variant and a custom Wrapper component -->
<ColorPicker bind:rgb components={{ ...ChromeVariant, wrapper: CustomWrapper }} />

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

The components that can be overridden are:

• pickerIndicator
• textInput
• input
• wrapper
• a11yNotice
• a11ySummary
• a11ySingleNotice

The 3 components a11yNotice, a11ySummary and a11ySingleNotice are no longer included by default but can still be defined or passed through the a11yVariant object. This changed was made in version 3.0.0 to lighten the library for those who do not use it.

Some components are no longer customizable in version 3.0.0: pickerWrapper, sliderWrapper, alphaWrapper, sliderIndicator and alphaIndicator. Instead you can either use the css variables or you can style them from the wrapper component

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:

textInput

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

Props:

Input

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

Props:

wrapper

Encapsulates the whole color 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:

Accessibility

The component itself

In progress

Accessibility notice

The component can display an accessibility notice that updates the WCAG contrast grades by using the a11yVariant component override and the isA11y props.

The contrast between 2 colors is a value between 1 and 21. It is computed with the colord a11y plugin library based on WCAG 2.0 guidelines for contrast accessibility.

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 and the accessibility notice variant example and the definition of the A11yColor type for more information.

How to

Fix overflow issues

If you use the ColorPicker component inside a container that is set with overflow: auto or overflow: hidden, the picker will be hidden outside of the wrapper.

To fix this, you can override the Wrapper component and use the svelte-portal library to render the picker outside of your container. An example of how to do that is presented in this svelte-awesome-color-picker portal REPL.

Migration

update from v2 to v3

• sliderIndicator, alphaIndicator, pickerWrapper, sliderWrapper and alphaWrapper were removed, you can use css variables in the wrapper component instead.
• props isA11y is gone. The accessibility display is now a variant: <ColorPicker components={A11yVariant} />. This change has been made to reduce the library bundle size.
• props isInput and isPopup have been merged and renamed as isDialog.