Modern Color Picker Component: Support for OKLCH, P3, and More – color-input

<color-input> is a color picker web component that supports modern color spaces, including oklch, lab, lch, and wide-gamut RGB formats.

The color picker uses colorjs.io for color manipulation and Preact

signals for reactivity. It also features a popover UI with automatic positioning and full Shadow DOM encapsulation for style isolation.

More Features:

• Simple Integration: Requires only one script import and one custom element tag.
• Encapsulation: Uses Shadow DOM to isolate styles from the rest of your application.
• Accessibility: Includes keyboard navigation and focus management.
• Alpha Channel Control: Includes transparency support with optional disable via the no-alpha attribute.
• Theme Support: Supports auto, light, and dark theme modes. The auto mode respects system preferences.

How To Use It:

1. Import the color input web component.

<script src="./dist/color-input.min.js"></script>

// OR from a CDN
<script src="https://unpkg.com/hdr-color-input"></script>

2. Add the color picker component to your web page. You can set an initial value using the ‘value’ attribute.

<color-input value="oklch(79% 8% 280 / 75%)"></color-input>

3. You can then customize the behavior of the color picker using HTML attributes or JavaScript properties.

• theme (string): Controls the color scheme of the picker. Accepted values are ‘auto’, ‘light’, or ‘dark’.
• no-alpha (boolean): Hides the alpha channel (opacity) slider. The alpha value remains in the color data. It is just not editable via the UI.

<!-- Force light theme -->
<color-input value="oklch(60% 50% 270)" theme="light"></color-input>

<!-- Force dark theme -->
<color-input value="oklch(60% 50% 270)" theme="dark"></color-input>

<!-- Auto theme (follows system preference) -->
<color-input value="oklch(60% 50% 270)" theme="auto"></color-input>

<color-input value="oklch(79% 8% 280 / 75%)" no-alpha></color-input>

4. Available API methods to control its visibility and positioning programmatically.

// Select the element from the DOM
const picker = document.querySelector('color-input');

// Opens the color picker popover
picker.show();

// Closes the color picker popover
picker.close();

// Manually sets the anchor element for the popover positioning
// This is useful if you want the picker to align with a specific button
const myButton = document.querySelector('#my-button');
picker.setAnchor(myButton);

5. Listen for changes and state updates using standard event listeners.

const picker = document.querySelector('color-input');

// Triggers whenever the color value changes
// The new value is available in e.target.value
picker.addEventListener('change', (e) => {
  console.log('New color:', e.target.value);
});

// Triggers when the popover opens
picker.addEventListener('open', () => {
  console.log('Picker opened');
});

// Triggers when the popover closes
picker.addEventListener('close', () => {
  console.log('Picker closed');
});

Alternatives

• vanilla-picker: A lightweight color picker with HSL/RGB support.
• Coloris: A simple color picker with hex/RGB formats.
• @simonwep/pickr: A feature-rich picker with many output formats.
• 10 Best Color Picker Plugins In JavaScript

FAQs

Q: Can I use this component with React or Vue frameworks?
A: Yes. Web components work across all frameworks. In React, you reference it like any DOM element. In Vue, you can use it directly in templates. The component dispatches standard DOM events that framework event systems capture normally.

Q: Why does my color look different in the picker than in CSS?
A: This occurs when your display does not support the wide-gamut colors you selected. The gamut property tells you the current color’s gamut. Colors in the P3 or Rec2020 gamuts may render differently on sRGB displays. Check picker.gamut to verify your color space.

Q: Can I customize the picker’s UI colors and layout?
A: The component uses Shadow DOM encapsulation. This prevents external CSS from affecting internal styles. You can use the theme attribute to switch between light and dark modes.

The post Modern Color Picker Component: Support for OKLCH, P3, and More – color-input appeared first on CSS Script.