Saturation Area

A 2D interactive area for picking color saturation and lightness values.

Code

Usage

Vue

import { SaturationArea } from '@hueycolor/vue'

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

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

<template>
  <HueyRoot v-model="color">
    <SaturationArea />
  </HueyRoot>
</template>

Svelte

import { SaturationArea } from '@hueycolor/svelte'

<script>
import { HueyRoot, SaturationArea, hueyColor } from '@hueycolor/svelte'

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

<HueyRoot bind:color>
  <SaturationArea />
</HueyRoot>

Props

Prop	Type	Default	Description
colorFormat	Exclude<ColorFormat, 'oklch'>	'hsl'	Controls whether to use HSL or HSV saturation/lightness.

Also extends all standard HTML attributes.

Styling

Target the area with [huey-area], and its draggable thumb with [huey-area] [huey-slider-thumb].

Property	Default	Description
--huey-area-width	240px	Width of the area
--huey-area-height	230px	Height of the area
--huey-area-radius	12px	Border radius of the area
--huey-thumb-size	16px	Size of the area thumb (set on [huey-area] to override)

The thumb’s background color is driven dynamically by --huey-thumb-color; you typically don’t need to set it.