{"id":49827287,"url":"https://github.com/dayflow-js/BlossomColorPicker","last_synced_at":"2026-05-15T20:01:11.851Z","repository":{"id":336737675,"uuid":"1150634516","full_name":"dayflow-js/BlossomColorPicker","owner":"dayflow-js","description":"A beautiful, blooming color picker for Web, built with pure CSS and compatible with JS, React, Vue, Svelte, and Angular. 🌟 If you like it, give it a star :)","archived":false,"fork":false,"pushed_at":"2026-04-28T22:27:24.000Z","size":796,"stargazers_count":337,"open_issues_count":0,"forks_count":16,"subscribers_count":1,"default_branch":"main","last_synced_at":"2026-04-29T00:25:09.932Z","etag":null,"topics":["blossom-ui","color-picker"],"latest_commit_sha":null,"homepage":"https://blossom.dayflow.studio","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dayflow-js.png","metadata":{"files":{"readme":"README.md","changelog":"Changelog.md","contributing":null,"funding":null,"license":"LICENSE","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":"2026-02-05T14:09:12.000Z","updated_at":"2026-04-28T22:27:28.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/dayflow-js/BlossomColorPicker","commit_stats":null,"previous_names":["dayflow-js/blossomcolorpicker"],"tags_count":4,"template":false,"template_full_name":null,"purl":"pkg:github/dayflow-js/BlossomColorPicker","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dayflow-js%2FBlossomColorPicker","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dayflow-js%2FBlossomColorPicker/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dayflow-js%2FBlossomColorPicker/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dayflow-js%2FBlossomColorPicker/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dayflow-js","download_url":"https://codeload.github.com/dayflow-js/BlossomColorPicker/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dayflow-js%2FBlossomColorPicker/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33077917,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-15T11:35:32.926Z","status":"ssl_error","status_checked_at":"2026-05-15T11:35:31.362Z","response_time":103,"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":["blossom-ui","color-picker"],"created_at":"2026-05-13T18:00:54.896Z","updated_at":"2026-05-15T20:01:11.843Z","avatar_url":"https://github.com/dayflow-js.png","language":"TypeScript","funding_links":[],"categories":["Third Party Components"],"sub_categories":["Form Controls"],"readme":"# Blossom Color Picker\n\n[![npm version](https://img.shields.io/npm/v/@dayflow/blossom-color-picker.svg)](https://www.npmjs.com/package/@dayflow/blossom-color-picker)\n[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](https://github.com/dayflow-js/BlossomColorPicker/pulls)\n[![GitHub license](https://img.shields.io/github/license/dayflow-js/BlossomColorPicker)](https://github.com/dayflow-js/BlossomColorPicker/blob/main/LICENSE)\n\nA beautiful, blooming color picker for Web. Available as a standalone vanilla JS class, or as a thin React / Vue / Svelte / Angular wrapper.\n\nhttps://github.com/user-attachments/assets/553ee0ff-1f52-497f-bc8f-cee9a7b91d66\n\n## Packages\n\n| Package                                 | Description                         | Version |\n| :-------------------------------------- | :---------------------------------- | :------ |\n| `@dayflow/blossom-color-picker`         | Vanilla JS core (zero dependencies) | 2.0.0   |\n| `@dayflow/blossom-color-picker-react`   | React wrapper                       | 1.0.0   |\n| `@dayflow/blossom-color-picker-vue`     | Vue 3 wrapper                       | 1.0.0   |\n| `@dayflow/blossom-color-picker-svelte`  | Svelte wrapper                      | 1.0.0   |\n| `@dayflow/blossom-color-picker-angular` | Angular wrapper                     | 1.0.0   |\n\n## Installation\n\n```bash\n# Vanilla JS (core)\nnpm install @dayflow/blossom-color-picker\n\n# React\nnpm install @dayflow/blossom-color-picker-react\n\n# Vue 3\nnpm install @dayflow/blossom-color-picker-vue\n\n# Svelte\nnpm install @dayflow/blossom-color-picker-svelte\n\n# Angular\nnpm install @dayflow/blossom-color-picker-angular\n```\n\n## Usage\n\n### Vanilla JS\n\n```js\nimport { BlossomColorPicker } from '@dayflow/blossom-color-picker';\nimport '@dayflow/blossom-color-picker/styles.css'; // \u003c- must import css in pure JS\n\nconst picker = new BlossomColorPicker(document.getElementById('picker'), {\n  onChange: color =\u003e console.log(color.hex),\n});\n\n// Programmatic control\npicker.expand();\npicker.collapse();\npicker.toggle();\npicker.setValue({ hue: 200, saturation: 50, alpha: 100, layer: 'outer' });\npicker.setOptions({ disabled: true });\npicker.destroy();\n```\n\n### React\n\n```tsx\nimport { BlossomColorPicker } from '@dayflow/blossom-color-picker-react';\n\nfunction App() {\n  const [color, setColor] = useState({\n    hue: 330,\n    saturation: 70,\n    alpha: 100,\n    layer: 'outer' as const,\n  });\n\n  return \u003cBlossomColorPicker value={color} onChange={c =\u003e setColor(c)} /\u003e;\n}\n```\n\n### Vue 3\n\n```vue\n\u003cscript setup\u003e\nimport { ref } from 'vue';\nimport { BlossomColorPicker } from '@dayflow/blossom-color-picker-vue';\n\nconst color = ref({\n  hue: 330,\n  saturation: 70,\n  alpha: 100,\n  layer: 'outer',\n});\n\nfunction handleChange(c) {\n  color.value = c;\n}\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003cBlossomColorPicker :value=\"color\" @change=\"handleChange\" /\u003e\n\u003c/template\u003e\n```\n\n### Svelte\n\n```svelte\n\u003cscript\u003e\n  import { BlossomColorPicker } from '@dayflow/blossom-color-picker-svelte';\n\n  let color = $state({\n    hue: 330, saturation: 70, alpha: 100, layer: 'outer',\n  });\n\n  function handleChange(newColor) {\n    color = newColor;\n  }\n\u003c/script\u003e\n\n\u003cBlossomColorPicker value={color} onchange={handleChange} /\u003e\n```\n\n### Angular\n\n```typescript\nimport { Component } from '@angular/core';\nimport {\n  BlossomColorPickerComponent,\n  type BlossomColorPickerColor,\n} from '@dayflow/blossom-color-picker-angular';\n\n@Component({\n  selector: 'app-root',\n  imports: [BlossomColorPickerComponent],\n  template: `\n    \u003cblossom-color-picker\n      [value]=\"color\"\n      (colorChange)=\"onColorChange($event)\"\n    /\u003e\n  `,\n})\nexport class App {\n  color = { hue: 330, saturation: 70, alpha: 100, layer: 'outer' as const };\n\n  onColorChange(c: BlossomColorPickerColor) {\n    this.color = c;\n  }\n}\n```\n\n## Options / Props\n\nAll packages share the same set of options. In React they are passed as JSX props; in Vue as component props (with events via `@change` / `@collapse`); in Svelte as callback props (`onchange` / `oncollapse`); in Angular as `@Input()` bindings (with events via `(colorChange)` / `(colorCollapse)`).\n\n| Option                | Type                                       | Default                                                   | Description                                                                                                                |\n| :-------------------- | :----------------------------------------- | :-------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------- |\n| `value`               | `BlossomColorPickerValue`                  | -                                                         | Controlled value of the picker.                                                                                            |\n| `defaultValue`        | `BlossomColorPickerValue`                  | `{ hue: 330, saturation: 70, alpha: 50, layer: 'outer' }` | Initial value for uncontrolled mode.                                                                                       |\n| `colors`              | `ColorInput[]`                             | (Default 18-color set)                                    | Color list, automatically sorted and distributed into layers.                                                              |\n| `onChange`            | `(color: BlossomColorPickerColor) =\u003e void` | -                                                         | Called when color changes. Vue: `@change`. Svelte: `onchange`. Angular: `(colorChange)`.                                   |\n| `onCollapse`          | `(color: BlossomColorPickerColor) =\u003e void` | -                                                         | Called when the picker collapses. Vue: `@collapse`. Svelte: `oncollapse`. Angular: `(colorCollapse)`.                      |\n| `disabled`            | `boolean`                                  | `false`                                                   | Whether the picker is disabled.                                                                                            |\n| `openOnHover`         | `boolean`                                  | `false`                                                   | If true, opens the picker on hover instead of click.                                                                       |\n| `initialExpanded`     | `boolean`                                  | `false`                                                   | Whether the picker starts expanded.                                                                                        |\n| `animationDuration`   | `number`                                   | `300`                                                     | Duration of the blooming animation in ms.                                                                                  |\n| `showAlphaSlider`     | `boolean`                                  | `true`                                                    | Whether to show the saturation arc slider.                                                                                 |\n| `coreSize`            | `number`                                   | `32`                                                      | Diameter of the central circle in px.                                                                                      |\n| `petalSize`           | `number`                                   | `32`                                                      | Diameter of individual color petals in px.                                                                                 |\n| `showCoreColor`       | `boolean`                                  | `true`                                                    | When true, the core shows the selected color while expanded.                                                               |\n| `sliderPosition`      | `'top' \\| 'bottom' \\| 'left' \\| 'right'`   | `'right'`                                                 | Fixed position for the arc slider.                                                                                         |\n| `adaptivePositioning` | `boolean`                                  | `true`                                                    | **Smart Shifter**: Automatically shifts the picker to stay within viewport and repositions the slider for best visibility. |\n| `circularBarWidth`    | `number`                                   | `12`                                                      | Thickness of the circular color bar in px.                                                                                 |\n| `sliderWidth`         | `number`                                   | `12`                                                      | Thickness of the arc slider track and handle in px.                                                                        |\n| `sliderOffset`        | `number`                                   | `30`                                                      | Distance between the outermost petals and the arc slider in px.                                                            |\n| `className` / `class` | `string`                                   | `\"\"`                                                      | Additional CSS class (React: `className`, Svelte: `class`).                                                                |\n\n### Vanilla JS Methods\n\nThe core class exposes these additional methods:\n\n| Method             | Description                                           |\n| :----------------- | :---------------------------------------------------- |\n| `setValue(value)`  | Set the current color value.                          |\n| `getValue()`       | Get the current color as a `BlossomColorPickerColor`. |\n| `expand()`         | Open the picker.                                      |\n| `collapse()`       | Close the picker.                                     |\n| `toggle()`         | Toggle open/close.                                    |\n| `setOptions(opts)` | Update any options at runtime.                        |\n| `destroy()`        | Remove all DOM elements and event listeners.          |\n\n## Type Reference\n\n### `BlossomColorPickerValue`\n\nThe value object used for controlled / uncontrolled state.\n\n| Field                | Type                 | Description                                           |\n| :------------------- | :------------------- | :---------------------------------------------------- |\n| `hue`                | `number`             | Hue angle (0-360).                                    |\n| `saturation`         | `number`             | Slider position (0-100). 0 = bright, 100 = dark.      |\n| `lightness`          | `number?`            | HSL lightness (auto-computed from slider if omitted). |\n| `originalSaturation` | `number?`            | Base saturation of the selected petal.                |\n| `alpha`              | `number`             | Alpha value (0-100).                                  |\n| `layer`              | `'inner' \\| 'outer'` | Which layer the selected petal belongs to.            |\n\n### `BlossomColorPickerColor`\n\nExtends `BlossomColorPickerValue` — returned by `onChange` and `onCollapse`.\n\n| Field  | Type     | Description                              |\n| :----- | :------- | :--------------------------------------- |\n| `hex`  | `string` | Hex color string, e.g. `\"#6586E5\"`.      |\n| `hsl`  | `string` | HSL string, e.g. `\"hsl(225, 71%, 65%)\"`. |\n| `hsla` | `string` | HSLA string with alpha.                  |\n\n### `ColorInput`\n\n```ts\ntype ColorInput = string | { h: number; s: number; l: number };\n```\n\n### Color Formats\n\nThe `colors` option accepts any of the following formats, and they can be mixed:\n\n```js\n// Vanilla JS\nconst picker = new BlossomColorPicker(el, {\n  colors: [\n    '#FF6B6B', // hex\n    'rgb(107, 203, 119)', // rgb()\n    'rgba(65, 105, 225, 0.9)', // rgba()\n    'hsl(280, 70%, 55%)', // hsl()\n    'hsl(200 80% 60%)', // hsl() space-separated\n    { h: 45, s: 90, l: 65 }, // HSL object\n  ],\n});\n```\n\n```tsx\n// React\n\u003cBlossomColorPicker\n  colors={['#FF6B6B', 'rgb(107, 203, 119)', { h: 45, s: 90, l: 65 }]}\n/\u003e\n```\n\n## Project Structure\n\nThis is a monorepo with five packages:\n\n```\npackages/\n  core/      @dayflow/blossom-color-picker          — standalone vanilla JS class\n  react/     @dayflow/blossom-color-picker-react     — thin React wrapper\n  vue/       @dayflow/blossom-color-picker-vue       — thin Vue 3 wrapper\n  svelte/    @dayflow/blossom-color-picker-svelte    — thin Svelte 5 wrapper\n  angular/   @dayflow/blossom-color-picker-angular   — thin Angular wrapper\n```\n\nMade by [Jayce Li](https://github.com/JayceV552), idea from [@lichinlin](https://x.com/lichinlin/status/2019084548072689980).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdayflow-js%2FBlossomColorPicker","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdayflow-js%2FBlossomColorPicker","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdayflow-js%2FBlossomColorPicker/lists"}