Haromony Vue

A new kind of Color Picker, which computes harmonic colors along with the primary one. It supports Analogous, Triad, Tetradic, Complementary & Square harmonies. A port of the Haromony React component.

Read more about the implementation here..

Installation

npm install harmony-vue

Usage

<script setup>
import { ColorWheel } from 'harmony-vue'
</script>

<template>
  <ColorWheel harmony="analogous" :radius="200" />
</template>

Props

| Property | Type | | ------------- | ----------------------------------------------------- | | radius | number | | harmony | 'tetradic' \| 'triad' \| 'analogous' \| 'square' \| 'complementary' | | color | {hue: number, saturation: number, value: number} | | defaultColor | {hue: number, saturation: number, value: number} |

Events

| Name | Payload | | ------ | -------------------------------------------------------- | | change | { hue: number, saturation: number, value: number }[] |

Convert the HSV format to RGB

You can use the following function to convert the HSV output to RGB.

function HSVtoRGB(h: number, s: number, v: number) {
  let r, g, b, i, f, p, q, t
  h = h / 360
  i = Math.floor(h * 6)
  f = h * 6 - i
  p = v * (1 - s)
  q = v * (1 - f * s)
  t = v * (1 - (1 - f) * s)
  switch (i % 6) {
    case 0:
      (r = v), (g = t), (b = p)
      break
    case 1:
      (r = q), (g = v), (b = p)
      break
    case 2:
      (r = p), (g = v), (b = t)
      break
    case 3:
      (r = p), (g = q), (b = v)
      break
    case 4:
      (r = t), (g = p), (b = v)
      break
    case 5:
      (r = v), (g = p), (b = q)
      break
  }
  return {
    r,
    g,
    b,
  }
}

License

MIT