EMG ColorPicker

emg-color-picker is a custom color picker built with Svelte that can replace the default browser color picker. It currently supports hexa values (with opacity) and gradients, with plans to add support for RGB and other formats. Saved colors are stored in the browser's localStorage.

Usage

To use the EMG Color Picker, follow these steps:

1. Install it using npm:

   1npm install emg-colorpicker

2. Import the EMGColorPicker component in your Svelte script:

1<script>
2    import { EMGColorPicker } from 'emg-colorpicker';
3
4    let hexa = "#1458FFFF";
5    let gradientColors = [
6        {
7            pourcentage: 0,
8            color: "#01093f"
9        },
10        {
11            pourcentage: 100,
12            color: "#1458FFFF"
13        }
14    ];
15
16    let visible = true;
17
18    function onColorChanged(e) {
19        console.log(e.detail.fullHexaColor);
20        console.log(e.detail.shortHexaColor);
21        console.log(e.detail.hexaColorOpacity);
22        console.log(e.detail.intColorOpacity);
23    }
24
25    function onColorChanging() {
26        console.log("changing color");
27    }
28
29    function onGradientChanged(e) {
30        console.log(e.detail.gradientCss);
31        console.log(e.detail.gradient);
32    }
33
34</script>
35
36<EMGColorPicker solidColor={hexa} gradientColors={gradientColors} bind:visible useGradient={true} coordinates={{ x: 200, y: 200 }} on:colorchanged={onColorChanged} on:colorchanging={onColorChanging} on:gradientchanged={onGradientChanged}/>

Parameters

The following parameters are available:

• solidColor (string): Initial color value in hexa format (e.g., "#FFFFFF") or hexa format with opacity (e.g., "#FFFFFFFF").

• gradientColors (array): Initial gradient value in the following format:

1[
2 	{
3		"pourcentage": 0,
4		"color": "#01093FFF"
5	},
6	{
7		"pourcentage": 100,
8		"color": "#1458FFFF"
9	}
10]

• visible (boolean): If true, the color picker is visible; if false, it's invisible.

• useGradient (boolean): If true, gradient color tools are enabled.

• coordinates (object): Specifies the position of the color picker with x (for left attribute in px) and y (for top attribute in px).

Event Listeners

The following event listeners are available:

• on:colorchanged: Triggered when the color is changed, providing access to:

  • e.detail.fullHexaColor --> hexa color with opacity, example : "#FFFFFFFF"
  • e.detail.shortHexaColor --> hexa color without opacity, example : "#FFFFFF"
  • e.detail.hexaColorOpacity --> hexa color opacity , example : "FF"
  • e.detail.intColorOpacity --> int color opacity , example : 100

• on:colorchanging: Triggered during color changes, providing the same details as above.

• on:gradientchanged: Triggered when the gradient is changed, providing access to:

  • e.detail.gradientCss --> gradient css value, example : linear-gradient(90deg,#01093FFF 0%,#1458FFFF 100%)
  • e.detail.gradient --> gradient array, example :

1[
2	{
3		"pourcentage": 0,
4		"color": "#01093FFF"
5	},
6	{
7		"pourcentage": 100,
8		"color": "#1458FFFF"
9	}
10]

• on:gradientchanging: Triggered during gradient changes, providing the same details as above.