Data & Utilities·loomora → useHue

useHue

Provides color conversion between Hex, RGB, HSL, and HSVA formats, calculates alpha transparency channels, and formats values for color picker inputs.

Interactive live playground

Interact with the hook state and inspect computed return values in real time.

Live

#6366f1

HSVA

239°, 1%, 1%

RGB

99, 102, 241

Color Controls

Hex Value"#6366f1"
Visual Picker

How to call

Import directly from the Loomora root package in any React client component.

import { useHue } from 'loomora'

export function ColorDisplay({ hex }: { hex: string }) {
  const { toHsva, toRgb, toHex } = useHue()

  const hsva = toHsva(hex)

  return (
    <div>
      <p>Hex: {hex}</p>
      <p>HSVA: H:{hsva.h} S:{hsva.s} V:{hsva.v} A:{hsva.a}</p>
    </div>
  )
}

Return values & methods

API signatures and utilities returned by this hook.

3 methods
Method / PropTypeDescription
toHsva(color)(color: string) => HsvaConverts any color string to HSVA object.
toHex(hsva)(hsva: Hsva) => stringConverts HSVA values to Hex string (with alpha if applicable).
toRgb(color)(color: string) => { r: number; g: number; b: number; a: number }Converts color string to RGBA object.