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
• 🖤 dark theme support

The library uses colord internally because it’s the lightest color conversion library on the market at the time and supports a11y contrasts and svelte-awesome-slider to display sliders.

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
  • Nullable version
  • Always open version
  • Bind event ’on:input’
  • Override the css variables
  • Dark theme
  • Override the css variables
• Api
  • Color picker
    • events
    • css variables
  • components
    • pickerIndicator
    • textInput
    • Input
    • wrapper
    • nullabilityCheckbox
    • a11yNotice
    • a11ySingleNotice
  • Accessibility
    • The component itself
    • Accessibility notice
• How to
  • Fix overflow issues
• Migration
  • upgrade 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
/>

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
	a11yColors={[
		{ textHex: '#FFF', reverse: true, placeholder: 'background' },
		{ textHex: '#FFF', bgHex: '#FF0000', reverse: true, placeholder: 'background' },
		{ bgHex: '#FFF', placeholder: 'title', size: 'large' },
		{ bgHex: '#7F7F7F', placeholder: 'button' }
	]}
/>

Note: set both attributes resverse and bgHex when you are chosing a transparency background color over a non white background.

Nullable version

Source code

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

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

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"
/>

Dark theme

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

<ColorPicker />

<style>
	.dark {
		--cp-bg-color: #333;
		--cp-border-color: white;
		--cp-input-color: #555;
		--cp-button-hover-color: #777;
	}</style>

Override the css variables

Note: the texts props can be partially overridden. It’s mostly used to translate the component. Most texts are used for accessibility aria-labels.

<ColorPicker
	bind:rgb
	bind:hsv
	bind:hex
	label="Choisir une couleur"
	texts={{
		label: {
			h: 'teinte',
			s: 'saturation',
			v: 'luminosité',
			r: 'rouge',
			g: 'vert',
			b: 'bleu',
			a: 'transparence',
			hex: 'couleur hexadécimale',
			withoutColor: 'sans couleur'
		},
		color: {
			rgb: 'rgb',
			hsv: 'hsv',
			hex: 'hex'
		},
		changeTo: 'changer à '
	}}
/>

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
• nullabilityCheckbox
• a11yNotice
• 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 change 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:

nullabilityCheckbox

Displays the checkbox to toggle an undefined value

Props:

a11yNotice

Component displaying accessible contrast issues with the color chosen.

Props:

Type A11yColor:

type A11yColor = {
	placeholder?: string;
	size?: 'normal' | 'large';
} & (
	| {
			textHex: string;
			bgHex: string;
			reverse: true;
	  }
	| {
			bgHex: string;
			reverse?: false;
	  }
);

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

a11ySingleNotice

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

Props:

Accessibility

The component itself

The svelte-awesome-color-picker uses svelte-awesome-slider (also made by me) to display the sliders. This library follows the W3c slider component accessibility guidelines.

The color picker follows the W3c component dialog combobox accessibility guidelines.

Accessibility notice

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

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

upgrade from v2 to v3

The major version 3 has been released to remove accessibility issues (see issue #43). The library now comes with the possibility to deselect a color and it is also possible to theme the picker for dark themes. The library has also been made simpler and lighter. This comes with some breaking changes:

• sliderIndicator, alphaIndicator, pickerWrapper, sliderWrapper, alphaWrapper and a11ySummary were removed, you can use css variables in the wrapper component for design customization and texts in the texts and a11yTexts props instead for translating the library.
• props isA11y has been removed. 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.
• props isRight has been replaced by sliderDirection="horizontal".
• props isA11yOpen and isA11yClosable have been removed.