Svelte Awesome Color Picker

https://svelte-awesome-color-picker.vercel.app
Admin
A highly customizable color picker component library for Svelte with keyboard navigation, mobile...
Tokens:6,488
Snippets:44
Trust Score:7.8
Update:10 months ago
Show doc for...
Tokens:
Raw
### Install svelte-awesome-color-picker

Source: https://svelte-awesome-color-picker.vercel.app/index

This snippet shows how to install the svelte-awesome-color-picker library as a development dependency using npm.

```bash
npm i -D svelte-awesome-color-picker
```

--------------------------------

### Nullable Color Picker Version - Svelte

Source: https://svelte-awesome-color-picker.vercel.app/index

Demonstrates a nullable version of the ColorPicker component, allowing the color to be unset. The example shows binding to hex, rgb, and hsv, and uses the 'nullable' prop.

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

<ColorPicker {hex} {rgb} {hsv} nullable />
```

--------------------------------

### Color Swatches Example for Color Picker

Source: https://svelte-awesome-color-picker.vercel.app/index

Demonstrates how to display a list of predefined color swatches below the Color Picker for quick selection. The `swatches` prop accepts an array of color strings. The number of columns can be adjusted using the `--cp-swatch-grid-template-columns` CSS variable.

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


 let hex = '#f6f0dc';


 let swatches = ['#f44336', '#e91e63', '#9c27b0', '#2196f3', '#4caf50', '#ffeb3b', '#ff9800'];
</script>

<ColorPicker bind:hex {swatches} />
```

--------------------------------

### Define Accessibility Color Type (TypeScript)

Source: https://svelte-awesome-color-picker.vercel.app/index

Defines the structure for accessibility color examples, including optional placeholders, sizes, and color hex values for text and background. It supports reverse mode for specific use cases.

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

```

--------------------------------

### Accessibility Variant Color Picker - Svelte

Source: https://svelte-awesome-color-picker.vercel.app/index

Showcases the Accessibility (A11y) variant of the ColorPicker. This example binds to hex, rgb, and hsv, enables alpha transparency, and configures custom accessibility color contrast checks with specific placeholders.

```svelte
<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' }
	]}
/>
```

--------------------------------

### Right to Left Aligned Color Picker - Svelte

Source: https://svelte-awesome-color-picker.vercel.app/index

Configures the ColorPicker component for right-to-left (RTL) text direction. This example binds to hex, rgb, and hsv, and sets the 'dir' prop to 'rtl'.

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

<ColorPicker {hex} {rgb} {hsv} dir="rtl" />
```

--------------------------------

### Bind onInput Event for History - Svelte

Source: https://svelte-awesome-color-picker.vercel.app/index

Example of using the 'onInput' event handler for the ColorPicker. It appends the current hex color to a history array on each input event, with a maximum history length of 5.

```svelte
<ColorPicker
	{rgb}
	onInput={(event) => {
		historyHex = [...historyHex, event.hex];
		if (historyHex.length > 5) historyHex.shift();
	}}
/>
```

--------------------------------

### Chrome Variant Color Picker - Svelte

Source: https://svelte-awesome-color-picker.vercel.app/index

Implements the Chrome variant of the ColorPicker component. This variant typically offers a different UI style, and this example binds to rgb, hsv, and hex, while setting the slider direction to horizontal.

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

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

--------------------------------

### Customize Svelte Color Picker Components

Source: https://svelte-awesome-color-picker.vercel.app/index

Demonstrates how to customize the Svelte Awesome Color Picker by overriding its default components. It shows examples of using the 'ChromeVariant' and custom input/wrapper components, including setting the 'sliderDirection' prop for the horizontal slider.

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

```

--------------------------------

### Migration from v3 to v4

Source: https://svelte-awesome-color-picker.vercel.app/index

Information regarding breaking changes and updates for migrating from version 3 to version 4 of the Svelte Awesome Color Picker.

```APIDOC
## Migration to v4

Version 4 introduces a rewrite in Svelte 5, resulting in breaking changes:

- Support for Svelte versions prior to 5 has been dropped.
- Color props can now be `null` and can no longer be `undefined`.
- Event dispatch has been replaced with event props named `on<event_name>`.
```

--------------------------------

### Configuring Color Picker Texts and Accessibility Texts

Source: https://svelte-awesome-color-picker.vercel.app/index

Shows how to provide custom translations for the Color Picker's UI elements and accessibility announcements using the `texts` and `a11yTexts` props. This replaces the functionality of the removed `a11ySummary` component.

```javascript
const customTexts = {
  hue: 'Hue',
  saturation: 'Saturation',
  lightness: 'Lightness'
};

const customA11yTexts = {
  open: 'Open color picker',
  close: 'Close color picker'
};

<ColorPicker texts={customTexts} a11yTexts={customA11yTexts} />
```

--------------------------------

### Default Color Picker Layout - Svelte

Source: https://svelte-awesome-color-picker.vercel.app/index

Demonstrates the default layout of the ColorPicker component in Svelte. It shows how to bind to various color formats (hex, rgb, hsv) and the 'color' instance from the Colord library. The 'position' prop is set to 'responsive'.

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

<ColorPicker
	bind:hex
	bind:rgb
	bind:hsv
	bind:color
  position="responsive"
/>
```

--------------------------------

### Controlling Color Picker Dialog Behavior

Source: https://svelte-awesome-color-picker.vercel.app/index

Explains how the `isDialog` prop now handles both input and popup functionalities, merging the previous `isInput` and `isPopup` props. This simplifies the control over the picker's dialog behavior.

```javascript
<ColorPicker isDialog={true} />
```

--------------------------------

### Usage: Fixing Overflow Issues

Source: https://svelte-awesome-color-picker.vercel.app/index

Instructions on how to resolve overflow issues when the ColorPicker is used within containers with specific overflow properties.

```APIDOC
## Fixing Overflow Issues

### Inside a Container
If you use the ColorPicker component inside a container set with `overflow: auto` or `overflow: hidden`, the picker might be hidden outside the wrapper. To fix this, override the `Wrapper` component and use the `svelte-portal` library to render the picker outside your container. Refer to the provided REPL for an example.

### In the Window
Set the `position` prop to `responsive` as described in the props section.
```

--------------------------------

### Usage: Using Document Color

Source: https://svelte-awesome-color-picker.vercel.app/index

Instructions on how to use the color of the document by overriding a CSS variable.

```APIDOC
## Using Document Color

Override the CSS variable `--cp-border-color`:

```css
body {
	--cp-border-color: currentColor;
}
```

**Note**: If you have a dark theme, ensure it is handled correctly.
```

--------------------------------

### History Variable for onInput Event - Svelte

Source: https://svelte-awesome-color-picker.vercel.app/index

Defines the initial state for the 'historyHex' variable, used in conjunction with the 'onInput' event handler to store a history of selected colors.

```svelte
let history = [
  "#f5efda"
]
```

--------------------------------

### Using A11yVariant for Accessibility in Color Picker

Source: https://svelte-awesome-color-picker.vercel.app/index

Demonstrates how to use the `A11yVariant` to enable accessibility features in the ColorPicker component. This replaces the `isA11y` prop from previous versions and is designed to reduce bundle size.

```javascript
import { ColorPicker } from 'svelte-awesome-color-picker';
import A11yVariant from 'svelte-awesome-color-picker/src/variants/A11yVariant';

<ColorPicker components={A11yVariant} />
```

--------------------------------

### Customizing Color Picker Design with CSS Variables

Source: https://svelte-awesome-color-picker.vercel.app/index

Illustrates how to customize the design of the Color Picker using CSS variables within the `wrapper` component. This approach replaces the removed `sliderIndicator`, `alphaIndicator`, `pickerWrapper`, `sliderWrapper`, `alphaWrapper`, and `a11ySummary` components.

```css
:root {
  --wrapper-background: #f0f0f0;
  --wrapper-border-radius: 8px;
}
```

--------------------------------

### Customize Color Picker Components

Source: https://svelte-awesome-color-picker.vercel.app/index

Shows how to override default components within the Color Picker, such as the input field or the wrapper, using custom Svelte components. It also demonstrates using the built-in ChromeVariant and combining it with custom components. Requires importing `ColorPicker` and potentially variant components.

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


 custom Input from '$lib/path/to/my/awesome/variant/Input.svelte';


 custom Wrapper 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 ChromeVariant -->
<ColorPicker bind:rgb components={ChromeVariant} sliderDirection="horizontal" />

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

--------------------------------

### Translate Color Picker UI Elements

Source: https://svelte-awesome-color-picker.vercel.app/index

Explains how to translate the user interface text of the Color Picker, primarily for accessibility labels and display text. The `texts` prop accepts an object where labels and color-related terms can be overridden. This can be partially overridden.

```html
<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 à '
	}}
/>
```

--------------------------------

### a11yNotice Component

Source: https://svelte-awesome-color-picker.vercel.app/index

Displays accessible contrast issues with the chosen color. It requires specific props to customize its appearance and functionality.

```APIDOC
## a11yNotice Component

### Description
Component displaying accessible contrast issues with the color chosen.

### Props

#### Required Props
- **components** (`Pick<Components, 'a11ySingleNotice'>`) - Used to customize the ColorPicker component parts, such as displaying a Chrome variant or an Accessibility Notice.
- **hex** (`string`) - The hex color value.
- **a11yColors** (`Array<A11yColor>`) - Defines the accessibility examples in the color picker.
- **a11yLevel** (`'AA' | 'AAA'`) - The required WCAG contrast level.

#### Optional Props
- **a11yTexts** (`A11yTextsPartial | undefined`) - All a11y translation tokens used in the library; override with translations if necessary.

### Type: A11yColor

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

#### A11yColor Attributes:
- **placeholder** (`string`) - Placeholder text, defaults to `Lorem Ipsum`.
- **size** (`'normal' | 'large'`) - Used to check the contrast guidelines.
- **reverse** (`boolean`) - Set to true if the color picker is used to choose a background color.
- **textHex** (`string`) - When choosing the background color, defines the text color.
- **bgHex** (`string`) - When choosing the text color, defines the background color; when choosing the background color, defines the color behind (in case of transparency).

**Note**: Read more about this component's accessibility in the a11y section.
```

--------------------------------

### a11ySingleNotice Component

Source: https://svelte-awesome-color-picker.vercel.app/index

Displays the accessibility result of the color over a single item from the `a11yColors` prop.

```APIDOC
## a11ySingleNotice Component

### Description
Component displaying the accessibility result of the color over a single item of the `a11yColors` props.

### Props

#### Required Props
- **a11yLevel** (`'AA' | 'AAA'`) - Required WCAG contrast level.
- **textColor** (`string`) - Placeholder text color.
- **bgColor** (`string`) - Placeholder background color.
- **contrastText** (`string`) - Defines the accessibility “contrast” text.

#### Optional Props
- **placeholder** (`string | undefined`) - Placeholder, falls back to `Lorem Ipsum`.
- **size** (`'normal' | 'large' | undefined`) - Size of the text.
- **contrast** (`number`) - RGAA contrast between the text and its background. Between 1 and 21, defaults to `1`.

**Note**: The contrast is computed with the colord a11y plugin library based on WCAG 2.0 guidelines.
```

--------------------------------

### Default Color Picker Props - Svelte

Source: https://svelte-awesome-color-picker.vercel.app/index

Defines the initial color state variables (hex, rgb, hsv, color) for the Svelte ColorPicker component. These variables are typically bound to the ColorPicker component to manage its state.

```svelte
let hex = "#f5efda"

let rgb = {
  "r": 245,
  "g": 239,
  "b": 218,
  "a": 1
}

let hsv = {
  "h": 47,
  "s": 11,
  "v": 96,
  "a": 1
}

let color = "// instance of Colord"
```

--------------------------------

### Override CSS Variables for Color Picker

Source: https://svelte-awesome-color-picker.vercel.app/index

Demonstrates how to override default CSS variables to customize the appearance of the Color Picker component, such as its height, width, slider size, and focus color. No external dependencies are required beyond the Svelte component itself.

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

--------------------------------

### Apply Dark Theme to Color Picker

Source: https://svelte-awesome-color-picker.vercel.app/index

Illustrates how to apply a dark theme to the Color Picker by overriding specific CSS variables within a parent element with the 'dark' class. This affects background, border, text, input, and button hover colors. Requires the `svelte-awesome-color-picker` component.

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

<div class="dark">
	<ColorPicker />
</div>

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

--------------------------------

### Always Open Color Picker (Non-Dialog) - Svelte

Source: https://svelte-awesome-color-picker.vercel.app/index

Shows a ColorPicker configured to be always open, not in a dialog. It uses the Chrome variant, horizontal slider, and sets 'isDialog' to false. It binds to rgb, hsv, and hex.

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

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

--------------------------------

### Setting Horizontal Slider Direction in Color Picker

Source: https://svelte-awesome-color-picker.vercel.app/index

Demonstrates how to set the slider direction to horizontal using the `sliderDirection` prop. This replaces the `isRight` prop from earlier versions.

```javascript
<ColorPicker sliderDirection="horizontal" />
```

--------------------------------

### Override CSS Variable for Border Color

Source: https://svelte-awesome-color-picker.vercel.app/index

Demonstrates how to override the default border color of the color picker component using CSS. This is useful for theme customization, especially in dark modes.

```css
body {
	--cp-border-color: currentColor;
}

```
Tokens:
Raw