open-index/open-npm huggingface dataset:
npm package: @s-shtogrin/colors-harmonious
Description: Vue 3 компонент для вибору гармонійних кольорів на HSV колі.   Побудований з використанням [Konva](https://konvajs.org/) та [chroma.js](https://gka.github.io/chroma.js/).
Latest version: 0.1.6

# 🎨 Harmony Picker

Vue 3 компонент для вибору гармонійних кольорів на HSV колі.  
Побудований з використанням [Konva](https://konvajs.org/) та [chroma.js](https://gka.github.io/chroma.js/).

## ✨ Можливості
- Малює HSV коло за допомогою **Konva**  
- Підтримка **v-model** для зручного використання  
- Автоматично обчислює **тріадні кольори**  
- Легка інтеграція у Vue 3 проекти  

## 🚀 Встановлення

```bash
npm install @s-shtogrin/colors-harmonious
````

або

```bash
yarn add @s-shtogrin/colors-harmonious
```

## 📦 Використання

```vue
<template>
  <div>
    <h1>Demo Harmony Picker</h1>
    <HarmonyPicker :rgb="rgb" v-model="harmony" />
    <div>
      <p>Вибрані кольори:</p>
      <div style="display:flex; gap:10px;">
        <div
          v-for="(c,i) in harmony.rgb"
          :key="i"
          :style="{width:'40px',height:'40px',background:c}"
        ></div>
      </div>
    </div>
  </div>
</template>

<script>
import HarmonyPicker from "@s-shtogrin/colors-harmonious";

export default {
  components: { HarmonyPicker },
  data() {
    return {
      rgb: "#ff1122",
      harmony: {}, // { type:'triad', rgb:[] }
    };
  },
};
</script>
```

## ⚙️ Props

| Назва     | Тип    | За замовчуванням             | Опис                               |
| --------- | ------ | ---------------------------- | ---------------------------------- |
| `rgb`     | String | `"#ff0000"`                  | Початковий колір у форматі hex     |
| `v-model` | Object | `{ type: "triad", rgb: [] }` | Об’єкт гармонії з масивом кольорів |

## 🛠 Технології

* [Vue 3](https://vuejs.org/)
* [Konva](https://konvajs.org/) — для Canvas-графіки
* [chroma.js](https://gka.github.io/chroma.js/) — для роботи з кольорами

## 📜 Ліцензія

[MIT](./LICENSE)