ew-color-picker

English

简体中文

English

简体中文

Appearance

ew-color-pickerEvent-driven · Plugin-based Color Picker

Small, composable, extensible. The core only owns color state and events — the UI is assembled from plugins.

Quick Start
Live Demo
API Reference
ew-color-picker
🧩

Plugin Architecture

The core only keeps color state and an event bus. Box, Panel, Input, Button and friends are plugins you can register, drop, or extend freely.

⚡

Event Driven

An instance-level EventEmitter carries change / sure / clear / toggle through the whole lifecycle, keeping UI and business logic decoupled.

🎨

Multiple Color Spaces

Hex, RGB and HSL input modes built in, plus an alpha slider, predefined swatches and horizontal/vertical hue and alpha layouts.

📦

Multi-package Distribution

13 independent packages. Install the all-in-one bundle or only the plugins you need — tree-shaking friendly by design.

🛡️

Fully Typed

Every package is written in TypeScript and ships declaration files. Options, plugin methods and callbacks are fully typed.

🌗

Adaptive Details

Box icons switch between light and dark based on WCAG relative luminance, mode icons keep a fixed width, and multiple instances stay isolated.

Try it now

A real, running color picker rendered directly from the built artifacts.

Start here

5-minute setup

Install, import the styles, create an instance — three steps to your first picker.

Options reference

Every constructor option, plugin switch, callback and default value.

Plugin system

What each of the 10 built-in plugins does, how to configure them, and how to compose them.

Write a plugin

Follow the pluginName / applyOrder contract to build a registrable, destroyable plugin.

Minimal example

One container, one stylesheet, one constructor call.

html
<link rel="stylesheet" href="@ew-color-picker/style/dist/index.css" />
<link rel="stylesheet" href="@ew-color-picker/style/dist/input-number.css" />

<div id="picker"></div>

<script type="module">
  import ewColorPicker from '@ew-color-picker/ew-color-picker'

  const picker = new ewColorPicker({
    el: '#picker',
    defaultColor: '#6366f1',
    predefineColor: ['#6366f1', '#8b5cf6', '#06b6d4', '#22c55e'],
    changeColor(color) {
      console.log('Current color:', color)
    }
  })
</script>