https://github.com/captaincodeman/svelte-color-select

Okhsv color select for Svelte
https://github.com/captaincodeman/svelte-color-select

color color-picker hsv okhsv oklab svelte

Last synced: 3 days ago
JSON representation

Okhsv color select for Svelte

• Host: GitHub
• URL: https://github.com/captaincodeman/svelte-color-select
• Owner: CaptainCodeman
• License: other
• Created: 2022-10-06T23:32:49.000Z (about 2 years ago)
• Default Branch: master
• Last Pushed: 2024-04-29T19:56:29.000Z (7 months ago)
• Last Synced: 2024-04-29T21:01:49.028Z (7 months ago)
• Topics: color, color-picker, hsv, okhsv, oklab, svelte
• Language: Svelte
• Homepage: https://captaincodeman.github.io/svelte-color-select/
• Size: 389 KB
• Stars: 27
• Watchers: 3
• Forks: 2
• Open Issues: 4
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Svelte Color Select

Okhsv Color Selection component for Svelte using OKLab perceptual colorspace.

Based on the work of [Björn Ottosson](https://bottosson.github.io/) and adapted to work as a Svelte component. See [Okhsv and Okhsl - Two new color spaces for color picking](https://bottosson.github.io/posts/colorpicker/) for more information about Okhsv and Oklab.

![Okhsv color select screenshot](./screenshot.png)

## 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):

```svelte

  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 }

```

### Oklab

The [Oklab](https://bottosson.github.io/posts/oklab/) colorspace is supported by using a `oklab` prop instead of `rgb`:

```svelte

  import ColorSelect, { type Oklab } from 'svelte-color-select'

  let oklab: OKlab = { l: 0.44, a: 0.088, b: -0.134 }

```

### Okhsv

The [Okhsv](https://bottosson.github.io/posts/colorpicker/) colorspace is supported by using a `okhsv` prop instead of `rgb`:

```svelte

  import ColorSelect, { type OKhsv } from 'svelte-color-select'

  let okhsv: OKhsv = { h: 303.37, s: 0.806, v: 0.608 }

```