oklch-pickerPlaygroundGitHub

Vue

Everything the picker does, in Vue, on one page. The value binding is v-model.

Install

npm install @oklch-picker/vue

The stylesheet lives in the shared core, which the adapter already depends on. Import it once, anywhere.

import "@oklch-picker/core/styles.css";
This is the result, feel free to drag and experiment

The basics

A controlled picker. The value you get back is always canonical and always in gamut.

<script setup>
import { ref } from "vue";
import { ColourPicker } from "@oklch-picker/vue";
import "@oklch-picker/core/styles.css";

const colour = ref("oklch(0.7 0.15 255)");
</script>

<template>
  <ColourPicker v-model="colour" />
</template>

Presets

Swatches under the sliders. Clicking one commits it, so it joins the recent colours too.

<ColourPicker v-model="colour" :presets="presets" />

A wider gamut

P3 and Rec. 2020 as output spaces, not decoration: the slider reaches further and the value is clamped to the space you chose.

<script setup>
import { P3 } from "@oklch-picker/core/gamuts";
</script>

<template>
  <ColourPicker v-model="colour" :gamut="P3" />
</template>

Letting the user switch space

A segmented control over the output space. Off by default, since most pickers target one.

<ColourPicker
  v-model="colour"
  :gamut="gamut"
  :gamut-choices="[SRGB, P3, REC2020]"
  :parts="{ gamutSwitch: true }"
  @gamut-change="gamut = $event"
/>

Alpha

On by default. An opaque colour is unchanged in every format, so the alpha forms appear only when a colour is actually transparent.

<ColourPicker v-model="colour" :parts="{ alpha: false }" />

Storing recent colours yourself

The picker keeps a list per session. Pass one in to store them in a backend or share them between pickers.

<ColourPicker
  v-model="colour"
  :recents="recents"
  @recents-change="onRecentsChange"
/>

On a server

The markup the server sends is the finished picker, not a shell that fills in on hydration.

import { renderToString } from "vue/server-renderer";

await renderToString(createSSRApp({ /* ... */ }));

Where next