Playground

Turn the options and watch it change. The code below changes with it, in whichever framework you are using — copy it and you have what is on the screen.

Live

Format oklch is the one the others cannot write at all.

Alpha

Eyedropper Picks a colour from anywhere on screen, where the browser allows it.

Copy

Contrast Against Shows the WCAG rating of the chosen colour on this background.

import { createColorPicker } from '@devix-labs/color-picker';
import '@devix-labs/color-picker/styles.css';

createColorPicker(document.querySelector('#target'), {
  format: 'hex',
  alpha: true,
  eyedropper: true,
  copy: true,
  contrastAgainst: '#ffffff'
});

import { ColorPicker } from '@devix-labs/color-picker/react';
import '@devix-labs/color-picker/styles.css';

<ColorPicker
  format="hex"
  alpha
  eyedropper
  copy
  contrastAgainst="#ffffff"
/>

<script setup>
import { ColorPicker } from '@devix-labs/color-picker/vue';
import '@devix-labs/color-picker/styles.css';
</script>

<template>
  <ColorPicker
  format="hex"
  alpha
  eyedropper
  copy
  contrast-against="#ffffff"
/>
</template>

<script>
  import { colorPicker } from '@devix-labs/color-picker/svelte';
  import '@devix-labs/color-picker/styles.css';
</script>

<div use:colorPicker={{
  format: 'hex',
  alpha: true,
  eyedropper: true,
  copy: true,
  contrastAgainst: '#ffffff'
}} />

Every option here is in the documentation, along with the ones that are not worth a control.