{"id":25936190,"url":"https://github.com/untemps/svelte-palette","last_synced_at":"2026-04-02T14:04:04.681Z","repository":{"id":38020995,"uuid":"425486700","full_name":"untemps/svelte-palette","owner":"untemps","description":"Svelte component to display a customisable color picker","archived":false,"fork":false,"pushed_at":"2026-03-26T23:26:38.000Z","size":2168,"stargazers_count":28,"open_issues_count":2,"forks_count":3,"subscribers_count":1,"default_branch":"main","last_synced_at":"2026-03-27T02:51:42.202Z","etag":null,"topics":["color","color-picker","component","eye-dropper","javascript","palette","svelte","svelte-components"],"latest_commit_sha":null,"homepage":"https://svelte-palette.vercel.app","language":"Svelte","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/untemps.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2021-11-07T11:38:02.000Z","updated_at":"2026-03-26T17:56:35.000Z","dependencies_parsed_at":"2023-10-01T09:35:16.086Z","dependency_job_id":"ed945d45-c0d9-487e-9d41-c89602efb79d","html_url":"https://github.com/untemps/svelte-palette","commit_stats":null,"previous_names":[],"tags_count":44,"template":false,"template_full_name":null,"purl":"pkg:github/untemps/svelte-palette","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/untemps%2Fsvelte-palette","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/untemps%2Fsvelte-palette/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/untemps%2Fsvelte-palette/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/untemps%2Fsvelte-palette/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/untemps","download_url":"https://codeload.github.com/untemps/svelte-palette/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/untemps%2Fsvelte-palette/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31307467,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-02T12:59:32.332Z","status":"ssl_error","status_checked_at":"2026-04-02T12:54:48.875Z","response_time":89,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["color","color-picker","component","eye-dropper","javascript","palette","svelte","svelte-components"],"created_at":"2025-03-04T01:50:32.415Z","updated_at":"2026-04-02T14:04:04.676Z","avatar_url":"https://github.com/untemps.png","language":"Svelte","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n    \u003cimg src=\"assets/svelte-palette.gif\" alt=\"svelte-palette\" height=\"300\"/\u003e\n\u003c/p\u003e\n\u003cp align=\"center\"\u003e\n    Svelte component to display a customisable color picker\n\u003c/p\u003e\n\n---\n\n[![npm](https://img.shields.io/npm/v/@untemps/svelte-palette?style=for-the-badge)](https://www.npmjs.com/package/@untemps/svelte-palette)\n[![GitHub Workflow Status](https://img.shields.io/github/actions/workflow/status/untemps/svelte-palette/publish.yml?style=for-the-badge)](https://github.com/untemps/svelte-palette/actions)\n[![Codecov](https://img.shields.io/codecov/c/github/untemps/svelte-palette?style=for-the-badge)](https://codecov.io/gh/untemps/svelte-palette)\n\n## Demo\n\n\u003cp align=\"center\"\u003e\n    :red_circle:\u0026nbsp;\u003cbig\u003e\u003ca href=\"https://svelte-palette.vercel.app\" target=\"_blank\" rel=\"noopener\"\u003eLIVE\n    DEMO\u003c/a\u003e\u003c/big\u003e\n\u003c/p\u003e\n\n## Installation\n\n```bash\nyarn add @untemps/svelte-palette\n```\n\n\u003e Requires Svelte 5. For Svelte 4 support, use version 4.x.\n\n## Usage\n\n### Basic Usage\n\n```svelte\n\u003cscript\u003e\n    import { Palette } from '@untemps/svelte-palette'\n\n    const colors = [\n\t\t'#865C54',\n\t\t'#8F5447',\n\t\t'#A65846',\n\t\t'#A9715E',\n\t\t'#AD8C72',\n    ]\n\n\tlet bgColor = colors[0]\n\u003c/script\u003e\n\n\u003cmain style=\"--bgColor:{bgColor}\"\u003e\n\t\u003cPalette {colors} onselect={({ color }) =\u003e (bgColor = color)} /\u003e\n\u003c/main\u003e\n\n\u003cstyle\u003e\n\tmain {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\theight: 100%;\n\t\tbackground-color: var(--bgColor);\n\t}\n```\n\n## API\n\n| Props                    | Type                                                                                                    | Default | Description                                                                                                                                                                                               |\n| ------------------------ | ------------------------------------------------------------------------------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `colors`                 | string[] or Promise\u003cstring[]\u003e or object[] or Promise\u003cobject[]\u003e or ColorGroup[] or Promise\u003cColorGroup[]\u003e | []      | Array of colors to be displayed in the palette. Pass an array of `{ name, colors }` objects to display grouped collections. See more about colors in the [Colors Setting](#colors-setting) section        |\n| `selectedColor`          | string                                                                                                  | null    | Default selected color. The color must be included in the `colors` prop. Supports `bind:selectedColor`.                                                                                                   |\n| `isCompact`              | boolean                                                                                                 | false   | Flag to display the palette in compact mode.                                                                                                                                                              |\n| `compactColorIndices`    | number[]                                                                                                | []      | Array of indices to pick from the `colors` array to be displayed in the compacted palette (see [Compact Mode](#compact-mode)).                                                                            |\n| `allowDuplicates`        | boolean                                                                                                 | false   | Flag to allow color duplication.                                                                                                                                                                          |\n| `deletionMode`           | string                                                                                                  | \"none\"  | Mode of slot deletion, between `\"none\"` and `\"tooltip\"` and `\"drop\"` (see [Deletion Modes](#deletion-modes)).                                                                                             |\n| `tooltipClassName`       | string                                                                                                  | null    | Class name to pass down to the deletion tooltip (see [Styles](#styles)).                                                                                                                                  |\n| `tooltipContentSelector` | string                                                                                                  | null    | Selector of the deletion tooltip content (see [Customize the Content of the Deletion Tooltip](#customize-the-content-of-the-deletion-tooltip)).                                                           |\n| `showTransparentSlot`    | boolean                                                                                                 | false   | Flag to display a transparent slot at the start of the slot list.                                                                                                                                         |\n| `maxColors`              | number                                                                                                  | 30      | Maximum number of slots to be displayed in the palette. Set this value to `-1` to allow infinite number of slots.                                                                                         |\n| `showInput`              | boolean                                                                                                 | false   | Flag to display the input within the footer slot.                                                                                                                                                         |\n| `inputType`              | string                                                                                                  | \"text\"  | Type of the input within the footer slot. Only \"text\" and \"color\" are allowed. All other value will be replaced by \"text\".                                                                                |\n| `numColumns`             | number                                                                                                  | 5       | Number of columns of the palette grid. This value can't exceed the number of maximum colors defined in `maxColors` and can't be lower than 1. Set this value to `0` to display the slots on a single row. |\n| `maxColumns`             | number                                                                                                  | 0       | Maximum number of columns when `numColumns` is set to `0`. Once reached, additional slots wrap to a new row. Set this value to `0` to allow unlimited columns.                                            |\n| `transition`             | object                                                                                                  | null    | Animation when a slot is rendered (see [Transition](#transition)).                                                                                                                                        |\n\n## Callbacks\n\n| Prop       | Arguments | Type   | Description                             |\n| ---------- | --------- | ------ | --------------------------------------- |\n| `onselect` |           |        | **Called whenever a color is clicked.** |\n|            | `color`   | string | Selected color string.                  |\n\n## Snippets\n\nSnippets replace the Svelte 4 named slots API. Pass them as children of `\u003cPalette\u003e` using the `{#snippet name(props)}` syntax.\n\n| Snippet           | Description                                                                           | Available Properties                                                      |\n| ----------------- | ------------------------------------------------------------------------------------- | ------------------------------------------------------------------------- |\n| `header`          | Allow to add a header to the palette. By default, it is empty.                        | `selectedColor`                                                           |\n| `footer`          | Allow to add a footer to the palette. By default, it contains an input to add colors. | `selectedColor`                                                           |\n| `slot`            | Allow to replace the default color slots.                                             | `index`, `color`, `colorName`, `selectedColor`, `transition`, `isCompact` |\n| `transparentSlot` | Allow to replace the default transparent slot.                                        | -                                                                         |\n| `beforeSlot`      | Allow to add an element before the color slots.                                       | `selectedColor`, `transition`, `isCompact`                                |\n| `afterSlot`       | Allow to add an element after the color slots.                                        | `selectedColor`, `transition`, `isCompact`                                |\n| `input`           | Allow to replace the input in the footer if the default footer snippet is kept as is. | `selectedColor`, `inputType`                                              |\n| `settings`        | Allow to replace the settings panel. See the demo to grab a usage example.            | `onClose`                                                                 |\n| `tools`           | Allow to replace the tools panel.                                                     | `isCompact`, `compactColorIndices`, `onSelect`                            |\n| `loader`          | Allow to replace the loader displayed during the colors async retrieving.             | -                                                                         |\n\n## Example\n\n```svelte\n\u003cscript\u003e\n\timport { Palette } from '@untemps/svelte-palette'\n\n\tconst colors = ['#865C54', '#8F5447', '#A65846', '#A9715E', '#AD8C72']\n\u003c/script\u003e\n\n\u003cPalette {colors}\u003e\n\t{#snippet header()}\n\t\t\u003cdiv class=\"palette__header\"\u003e\n\t\t\t\u003ch1\u003ePick a color\u003c/h1\u003e\n\t\t\u003c/div\u003e\n\t{/snippet}\n\t{#snippet slot({ color })}\n\t\t\u003cbutton class=\"palette__slot\" style=\"--color:{color}\"\u003e\u003c/button\u003e\n\t{/snippet}\n\t{#snippet footer()}\n\t\t\u003cdiv class=\"palette__footer\"\u003e\n\t\t\t\u003ca href=\"https://www.untemps.net\"\u003e@untemps\u003c/a\u003e\n\t\t\u003c/div\u003e\n\t{/snippet}\n\u003c/Palette\u003e\n\n\u003cstyle\u003e\n\t.palette__header {\n\t\tdisplay: flex;\n\t\tjustify-content: center;\n\t}\n\n\t.palette__slot {\n\t\tcursor: pointer;\n\t\twidth: 2rem;\n\t\theight: 2rem;\n\t\tmargin: 0;\n\t\tbackground-color: var(--color);\n\t\tborder-radius: 20%;\n\t\tborder: 1px solid rgba(0, 0, 0, 0.2);\n\t\tbox-shadow: 0.1rem 0.1rem 0.3rem rgba(0, 0, 0, 0.2);\n\t}\n\n\t.palette__footer {\n\t\tdisplay: flex;\n\t\tjustify-content: center;\n\t\tpadding: 0.5rem;\n\t}\n\u003c/style\u003e\n```\n\n# Colors Setting\n\nColor can be set in several formats:\n\n## Array of Color Strings\n\n```\ncolors = ['#865C54', '#8F5447', '#A65846']\n```\n\n## Array of Color Objects\n\n```\ncolors = [\n\t{ name: 'Color #1', value: '#865C54' },\n\t{ name: 'Color #2', value: '#8F5447' },\n\t{ value: '#A65846' }\n]\n```\n\n## Array of Color Groups\n\nColors can be organized into named groups by passing an array of `ColorGroup` objects:\n\n```\ncolors = [\n\t{ name: 'Warm', colors: ['#865C54', '#8F5447', '#A65846'] },\n\t{ name: 'Cool', colors: ['#172B41', '#32465C', '#617899'] },\n\t{ colors: ['#8B8C6B', '#97A847'] }\n]\n```\n\nEach group has:\n\n-   `name` (optional) — displayed as a label above the group\n-   `colors` — array of color strings or color objects\n\nWhen groups are used, compact mode and the color input are not available. The `colorSlot` snippet receives an additional `groupName` parameter.\n\n## Promise\n\nA promise to be resolved with an array of color strings, objects, or groups can be passed as well (see [Use an API to fill the palette](#use-an-api-to-fill-the-palette))\n\n# Deletion Modes\n\nThe `deletionMode` prop allows to define the way users can delete (or not) the color slots:\n\n| Value     | Description                                                                                                                                                                                |\n| --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |\n| `none`    | (Default) Color slots cannot be deleted                                                                                                                                                    |\n| `tooltip` | A tooltip is displayed when hovering a color slot, a click within deletes the slot \u003cbr/\u003e(You can control tooltip display though the `tooltipClassName` and `tooltipContentSelector` props) |\n| `drop`    | Colors slots are draggable, a drop outside the palette deletes the slot                                                                                                                    |\n\nAs an helper, deletion mode enums are exported in `PaletteDeletionMode`.\n\n# Compact Mode\n\nThe compact mode is a way to display a minimal version of the palette with a restricted selection of the original colors and downsized spaces.\n\nThe `compactColorIndices` prop allows to define the list of the colors to be picked from the `colors` array by their indices.\nIf set a control is added to toggle the compact mode.\n\nYou may also specified whether the palette has to use the compact mode by default by setting `isCompact=true`.\n\n```svelte\n\u003cscript\u003e\n\timport { Palette } from '@untemps/svelte-palette'\n\n\tconst colors = ['#865C54', '#8F5447', '#A65846', '#A9715E', '#AD8C72']\n\tconst compactColorIndices = [1, 3, 4]\n\u003c/script\u003e\n\n\u003cPalette {colors} {compactColorIndices} /\u003e\n```\n\n# Styles\n\n### Root Tag Class\n\nYou can style the component by passing a class down to the root tag (`div`).\n\n-   Flag the class as global to make it available in the Palette component\n-   Prefix your class with `.palette[role=\"main\"]` to give precedence over the default one or mark each style with `!important` (not recommanded)\n\n#### Example\n\n```svelte\n\u003cscript\u003e\n\timport { Palette } from '@untemps/svelte-palette'\n\n\tconst colors = ['#865C54', '#8F5447', '#A65846', '#A9715E', '#AD8C72']\n\u003c/script\u003e\n\n\u003cPalette {colors} class=\"palette__custom\" /\u003e\n\n\u003cstyle\u003e\n\t:global(.palette[role='main'].palette__custom) {\n\t\tbackground: yellow;\n\t}\n\u003c/style\u003e\n```\n\n### Deletion Tooltip Class\n\nIf you set `deletionMode` to `\"tooltip\"`, you can pass a class name that is set to the tooltip shown when hovering a slot.\n\nTo do so, set a **global** class name to the `tooltipClassName` prop.\n\n\u003e As the tooltip is interactive, make sure you define a sufficient hover area that allow to access the content of the tooltip before the leave event is triggered.\n\nIf you ignore that prop, a default class is used.\n\n\u003e Please note that the default class name is `__tooltip__default`.\n\u003e Provide a different class name otherwise the default class would have the precedence over the custom one.\n\n#### Example\n\n```svelte\n\u003cscript\u003e\n\timport { Palette } from '@untemps/svelte-palette'\n\n\tconst colors = ['#865C54', '#8F5447', '#A65846', '#A9715E', '#AD8C72']\n\u003c/script\u003e\n\n\u003cPalette {colors} deletionMode=\"tooltip\" tooltipClassName=\"tooltip\" /\u003e\n\n\u003cstyle\u003e\n\t:global(.tooltip) {\n\t\tposition: absolute;\n\t\tz-index: 9999;\n\t\tmax-width: 120px;\n\t\tbackground-color: black;\n\t\tcolor: #fff;\n\t\ttext-align: center;\n\t\tborder-radius: 6px;\n\t\tpadding: 0.5rem;\n\t}\n\u003c/style\u003e\n```\n\n## EyeDropper API Support\n\nIf supported by the browser, the default component within the `input` snippet displays a button to trigger the [Web EyeDropper API](https://developer.mozilla.org/en-US/docs/Web/API/EyeDropper).\nThe tool allows to pick a color from the screen.\n\n\u003cimg src=\"assets/eyedropper.gif\" alt=\"eyedropper\" width=\"250\"/\u003e\n\nOnce selected, the color is inserted in the input waiting for the user to submit and adding it to the palette.\n\nIf the API is not available, nothing will be rendered.\n\n\u003e **Browser compatibility note:** The EyeDropper API specification defines `sRGBHex` as returning a hexadecimal color string (e.g. `#rrggbb`). However, some browsers return an `rgb()` or `rgba()` string instead. The component normalizes the value to hex format automatically.\n\n\u003e The PaletteEyeDropper component can be used on its own anywhere within a snippet or in an external component as it is exported from this lib.\n\n## Transition\n\n\u003cimg src=\"assets/svelte-palette-transition.gif\" alt=\"svelte-palette-transition\" height=\"300\"/\u003e\n\nYou can customize the way slots appear into the palette by using the `transition` prop.\n\nThis prop works the same way as the [in/out directive](https://svelte.dev/docs#template-syntax-element-directives-in-fn-out-fn) and accepts an object with two properties :\n\n| Value  | Description                                                                                        |\n| ------ | -------------------------------------------------------------------------------------------------- |\n| `fn`   | Transition function (See [Svelte Transitions](https://svelte.dev/docs#run-time-svelte-transition)) |\n| `args` | Parameters to pass to the transition function                                                      |\n\n`fn` may be one of the [Svelte exported functions](https://svelte.dev/docs#run-time-svelte-transition) or a custom one as described in the [docs](https://svelte.dev/docs#template-syntax-element-directives-transition-fn-custom-transition-functions).\n\n### Example\n\n```svelte\n\u003cscript\u003e\n\timport { Palette } from '@untemps/svelte-palette'\n\timport { elasticOut } from 'svelte/easing'\n\n\tconst colors = ['#865C54', '#8F5447', '#A65846', '#A9715E', '#AD8C72']\n\n\tconst whoosh = (node, params) =\u003e {\n\t\tconst existingTransform = getComputedStyle(node).transform.replace('none', '')\n\n\t\treturn {\n\t\t\tdelay: params.delay || 0,\n\t\t\tduration: params.duration || 400,\n\t\t\teasing: params.easing || elasticOut,\n\t\t\tcss: (t, u) =\u003e `transform: ${existingTransform} scale(${t})`,\n\t\t}\n\t}\n\u003c/script\u003e\n\n\u003cPalette {colors} transition={{ fn: whoosh, args: { duration: 3000 } }} /\u003e\n```\n\n## Recipes\n\n### Use an API to Fill the Palette\n\nIn case you want to call an API to fetch the palette colors, you may pass a promise to the `colors` prop.\n\nThe component displays a customizable loader waiting to the promise to be resolved. Be aware that the result of the promise must be an array of color strings as well.\n\n#### Example\n\n```svelte\n\u003cscript\u003e\n\timport { Palette } from '@untemps/svelte-palette'\n\n\tconst colors = fetch('https://www.colr.org/json/colors/random/30')\n\t\t.then((result) =\u003e result.json())\n\t\t.then((result) =\u003e result.colors.filter((c) =\u003e c.hex?.length).map((c) =\u003e `#${c.hex}`))\n\u003c/script\u003e\n\n\u003cPalette {colors}\u003e\n\t{#snippet loader()}\n\t\t\u003cp\u003eLoading...\u003c/p\u003e\n\t{/snippet}\n\u003c/Palette\u003e\n```\n\n### Customize the Content of the Deletion Tooltip\n\nBy default, if `deletionMode` is set to `\"tooltip\"`, the tooltip displays a trash icon:\n\n\u003cimg src=\"assets/trash.png\" alt=\"trash\" height=\"90\"/\u003e\n\nYou may want to display a different content for various purposes.\nThat is possible by defining a DOM element selector to the `tooltipContentSelector` prop.\n\n\u003e Note the piece of DOM used ad content is deeply cloned using [cloneNode()](https://developer.mozilla.org/fr/docs/Web/API/Node/cloneNode) before appending to the tooltip container.\n\u003e That means the original element stays as it is but depending on element some props or behaviours may be removed from the clone.\n\n#### Example\n\n```svelte\n\u003cscript\u003e\n\timport { Palette } from '@untemps/svelte-palette'\n\n\tconst colors = ['#865C54', '#8F5447', '#A65846', '#A9715E', '#AD8C72']\n\u003c/script\u003e\n\n\u003cPalette {colors} deletionMode=\"tooltip\" tooltipContentSelector=\".palette__tooltip__button\" /\u003e\n\n\u003c!-- The element used as tooltip content --\u003e\n\u003cbutton class=\"palette__tooltip__button\"\u003eDelete\u003c/button\u003e\n```\n\n### Use a Color Input\n\nBy default, the input that allows to add a new slot in the palette is typed as \"text\".\n\nAlthough you may use the `input` snippet to display a custom component, it is possible to turn the input into color mode by setting the `inputType` prop to \"color\".\nThat unlocks the color picker provided by the browser. Therefore the color spot and the eyedropper are hidden.\n\n\u003cimg src=\"assets/input-color.gif\" alt=\"input color\" width=\"250\"/\u003e\n\n#### Example\n\n```svelte\n\u003cscript\u003e\n\timport { Palette } from '@untemps/svelte-palette'\n\n\tconst colors = ['#865C54', '#8F5447', '#A65846', '#A9715E', '#AD8C72']\n\u003c/script\u003e\n\n\u003cPalette {colors} inputType=\"color\" /\u003e\n```\n\n### Customize the Tools Panel\n\nThe tools panel is a container for two actions:\n\n-   Display the settings panel (`\"settings\"`)\n-   Toggle the compact mode (`\"compact\"`)\n\nFor some use cases, you may want to provide your own controls by using the `tools` snippet.\n\nTo access each tool behaviours, the Palette component exports a `onSelect` function that has to be called with the name of the tool (use the enums from the exported `PaletteTool`).\n\n#### Example\n\n```svelte\n\u003cscript\u003e\n\timport { Palette, PaletteTool } from '@untemps/svelte-palette'\n\n\tconst colors = ['#865C54', '#8F5447', '#A65846', '#A9715E', '#AD8C72']\n\u003c/script\u003e\n\n\u003cPalette {colors}\u003e\n\t{#snippet tools({ onSelect, isCompact })}\n\t\t\u003cdiv\u003e\n\t\t\t\u003cbutton onclick={() =\u003e onSelect(PaletteTool.SETTINGS)}\u003eSettings\u003c/button\u003e\n\t\t\t\u003cbutton onclick={() =\u003e onSelect(PaletteTool.COMPACT)}\u003e{isCompact ? 'Expand' : 'Compact'}\u003c/button\u003e\n\t\t\u003c/div\u003e\n\t{/snippet}\n\u003c/Palette\u003e\n```\n\n## Development\n\nThe component can be served for development purpose on `http://localhost:5173/` running:\n\n```\nyarn dev\n```\n\n## Contributing\n\nContributions are warmly welcomed:\n\n-   Fork the repository\n-   Create a feature branch\n-   Develop the feature AND write the tests (or write the tests AND develop the feature)\n-   Commit your changes\n    using [Angular Git Commit Guidelines](https://github.com/angular/angular.js/blob/master/DEVELOPERS.md#-git-commit-guidelines)\n-   Submit a Pull Request\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Funtemps%2Fsvelte-palette","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Funtemps%2Fsvelte-palette","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Funtemps%2Fsvelte-palette/lists"}