HSL Inputs

Individual input fields for the hue, saturation, and lightness color channels.

HueSaturationLightness

Code

Usage

Vue

import { HueInput, SaturationInput, LightnessInput } from '@hueycolor/vue'

<script setup>
import { ref } from 'vue'
import { HueyRoot, HueInput, SaturationInput, LightnessInput, hueyColor } from '@hueycolor/vue'

const color = ref(hueyColor('#1A3263'))
</script>

<template>
  <HueyRoot v-model="color">
    <HueInput />
    <SaturationInput />
    <LightnessInput />
  </HueyRoot>
</template>

Svelte

import { HueInput, SaturationInput, LightnessInput } from '@hueycolor/svelte'

<script>
import { HueyRoot, HueInput, SaturationInput, LightnessInput, hueyColor } from '@hueycolor/svelte'

let color = $state(hueyColor('#1A3263'))
</script>

<HueyRoot bind:color>
  <HueInput />
  <SaturationInput />
  <LightnessInput />
</HueyRoot>

Props

Each component (HueInput, SaturationInput, LightnessInput) extends all standard HTML input attributes (id, placeholder, disabled, etc.).

Value Ranges

• Hue: 0-360 degrees
• Saturation: 0-100%
• Lightness: 0-100%

Use the up/down arrow keys to adjust by 1. Hold Shift to adjust by 10.

Styling

Target each input by its huey-input value. All three render a bare <input> and expose no CSS variables of their own.

• [huey-input="hue"] - HueInput
• [huey-input="saturation"] - SaturationInput
• [huey-input="lightness"] - LightnessInput