Vue Use Utilities

# useColor

useColor

Reactive color parsing and manipulation built on top of color2k (opens new window).

# Example

Change Color and Watch Reactive Color.

# Usage

<div class="wrapper">
  <div class="palette">
    <h3>Ligthen Color</h3>
     <div>{{ lightenColor }}</div>
  </div>
</div>
1
2
3
4
5
6
import { useColor } from '@vueblocks/vue-use-core'

export default {
  setup () {
    const mainColor = ref('#3eaf7c')
    const mainAmount = ref(0.5)

    const { lightenColor } = useColor(mainColor, mainAmount)

    return {
      lightenColor
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

# Typing

interface ReactiveColor {
    hexColor: ComputedRef<string>;
    hslaColor: ComputedRef<string>;
    rgbaColor: ComputedRef<string>;
    readableColor: ComputedRef<string>;
    invertColor: ComputedRef<string>;
    luminance: ComputedRef<number>;
    lightenColor: ComputedRef<string>;
    darkenColor: ComputedRef<string>;
    tintColor: ComputedRef<string>;
    shadeColor: ComputedRef<string>;
    desaturateColor: ComputedRef<string>;
    saturateColor: ComputedRef<string>;
    opacifyColor: ComputedRef<string>;
    transparentizeColor: ComputedRef<string>;
}

/**
 * Reactive color parsing and manipulation built on top of color2k.
 * @param color
 * @param amount
 */
declare const useColor: (
  color: Ref<string>,
  amount?: Ref<number> | undefined
) => ReactiveColor;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

← useCssVars →