vue-color

vue-color is a collection of ready-to-use color picker components for Vue applications, including Chrome, Sketch, Twitter, and slider-based pickers. It supports both Vue 2.7 and Vue 3 from a single package, ships full TypeScript typings, and is built to be tree-shakable so you import only the pickers you actually use.

Beyond visuals, the library emphasizes accessibility with keyboard navigation and screen-reader support, works cleanly under SSR frameworks like Nuxt, and includes a built-in dark theme. Color math is handled internally via tinycolor2 and material-colors, exposing formats and palettes through a small, reactive component API.

What You Get

• Multiple picker styles out of the box — Chrome, Sketch, Twitter, and individual RGB/HSL/hue sliders
• A single package compatible with both Vue 2.7 and Vue 3, with full TypeScript typings
• Tree-shakable, modular imports so bundles include only the pickers you use
• Accessibility features, SSR/Nuxt compatibility, and a built-in dark theme

Common Use Cases

• Adding a color picker to a settings or theming panel in a Vue app
• Building a design or diagramming tool that needs precise color selection
• Letting users customize brand or UI colors with palette and slider controls

Under The Hood

Architecture — Components live under src/components (Chrome, Sketch, Twitter, slider families), sharing color-conversion and interaction logic through composables in src/composable and helpers in src/utils. The public surface is re-exported from src/index.ts, and styling is separated into src/styles so consumers import a single stylesheet.

Tech Stack — Written in TypeScript and built with Vite, it depends on tinycolor2 for color parsing/conversion and material-colors for palette presets, declaring only vue as a peer dependency. Dual Vue 2.7/3 support is achieved through composition-API-based components.

Code Quality — The tests directory contains unit specs for utilities (math, throttle) and browser/component specs for each picker (ChromePicker, SketchPicker, TwitterPicker, slider components), and the README advertises Codecov coverage — indicating meaningful automated testing across both logic and UI.

API Design — Each picker is a self-contained component with v-model-style value binding and format-aware output, so adopting one is a matter of importing it and its stylesheet. Modular exports keep the API discoverable and the bundle small.