CaptainCodeman / svelte-color-select

Okhsv color select for Svelte

Svelte Color Select

Okhsv Color Selection component for Svelte using OKLab perceptual colorspace.

Based on the work of Björn Ottosson and adapted to work as a Svelte component. See Okhsv and Okhsl - Two new color spaces for color picking for more information about Okhsv and Oklab.

Usage

Installing your package manager of choice:

pnpm i svelte-color-select

Import into your component and pass an { r, g, b } object to the rgb prop (with channels normalized 0–1):

<script lang="ts">
  import ColorSelect from 'svelte-color-select'

  // https://medium.com/@valgaze/the-hidden-purple-memorial-in-your-web-browser-7d84813bb416
  let rgb: RGB = { r: 0.4, g: 0.2, b: 0.6 }
</script>

<ColorSelect bind:rgb />

Oklab

The Oklab colorspace is supported by using a oklab prop instead of rgb:

<script lang="ts">
  import ColorSelect, { type Oklab } from 'svelte-color-select'

  let oklab: OKlab = { l: 0.44, a: 0.088, b: -0.134 }
</script>

<ColorSelect bind:oklab />

Okhsv

The Okhsv colorspace is supported by using a okhsv prop instead of rgb:

<script lang="ts">
  import ColorSelect, { type OKhsv } from 'svelte-color-select'

  let okhsv: OKhsv = { h: 303.37, s: 0.806, v: 0.608 }
</script>

<ColorSelect bind:okhsv />