RGB Inputs

Individual input fields for the red, green, and blue color channels.

Code

Usage

Vue

import { RedInput, GreenInput, BlueInput } from '@hueycolor/vue'

<script setup>
import { ref } from 'vue'
import { HueyRoot, RedInput, GreenInput, BlueInput, hueyColor } from '@hueycolor/vue'

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

<template>
  <HueyRoot v-model="color">
    <RedInput />
    <GreenInput />
    <BlueInput />
  </HueyRoot>
</template>

Svelte

import { RedInput, GreenInput, BlueInput } from '@hueycolor/svelte'

<script>
import { HueyRoot, RedInput, GreenInput, BlueInput, hueyColor } from '@hueycolor/svelte'

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

<HueyRoot bind:color>
  <RedInput />
  <GreenInput />
  <BlueInput />
</HueyRoot>

Props

Each component (RedInput, GreenInput, BlueInput) extends all standard HTML input attributes (id, placeholder, disabled, etc.).

Value Range

Each channel accepts values from 0 to 255. Use the up/down arrow keys to adjust by 1. Hold Shift to adjust by 10.