A lightweight, framework-agnostic color picker library built with TypeScript. Supports HSL, RGB, and CMYK color spaces with automatic CSS injection and 20+ CSS property targeting.
npm install @brightdotdev/color-picker
Check out the live demo to see all features in action:
Live Demo Page
npm install @brightdotdev/color-picker
import { COLORPICKERCLASS } from '@brightdotdev/color-picker';
const container = document.getElementById('color-picker-container');
const targetElement = document.getElementById('my-element');
const picker = new COLORPICKERCLASS({
colorPickerContainer: container,
colorPickerProps: {
targetElementProps: {
targetElement: targetElement,
targetStylePorperty: 'background' // or any CSS color property
}
}
});
// Set initial color
picker.setExternalColor({ r: 255, g: 0, b: 0 });
Your color picker can target these CSS properties:
color - Text colorbackground - Background shorthandbackground-color - Explicit background colorborder-color - All bordersborder-top-color - Top border onlyborder-right-color - Right border onlyborder-bottom-color - Bottom border onlyborder-left-color - Left border onlyoutline-color - Focus outline colorcaret-color - Input cursor coloraccent-color - Checkbox/radio/slider colortext-decoration-color - Underline/strikethrough colorfill - SVG shape fill colorstroke - SVG outline/stroke colorbox-shadow - Element shadowstext-shadow - Text shadowsselection-bg - Text selection backgroundselection-text - Text selection text colorscrollbar-color - Scrollbar stylingimport { COLORPICKERCLASS } from '@brightdotdev/color-picker';
const picker = new COLORPICKERCLASS({
colorPickerContainer: document.getElementById('picker-container'),
colorPickerProps: {
targetElementProps: {
targetElement: document.getElementById('target-element'),
targetStylePorperty: 'border-color'
}
}
});
// Set initial color
picker.setExternalColor({ h: 240, s: 100, l: 50 });
// Cleanup when done
picker.dispose();
import { HslObject, RgbObject, CmykObject } from '@brightdotdev/color-picker';
// HSL Picker
const hslPicker = new HslObject({
colorPickerContainer: container,
targetElementProps: {
targetElement: targetElement,
targetStylePorperty: 'color'
}
});
// Get current color
const currentColor = hslPicker.getCurrentColor();
// Cleanup
hslPicker.destroyPicker();
import React, { useRef, useEffect } from 'react';
import { COLORPICKERCLASS } from '@brightdotdev/color-picker';
function ColorPicker() {
const containerRef = useRef();
useEffect(() => {
const picker = new COLORPICKERCLASS({
colorPickerContainer: containerRef.current,
colorPickerProps: {
targetElementProps: {
targetElement: document.getElementById('preview'),
targetStylePorperty: 'background'
}
}
});
return () => picker.dispose();
}, []);
return <div ref={containerRef} />;
}
interface RGB { r: number; g: number; b: number; } // 0-255
interface HSL { h: number; s: number; l: number; } // 0-360, 0-100, 0-100
interface CMYK { c: number; m: number; y: number; k: number; } // 0-100
type AnyColor = RGB | HSL | CMYK;
setExternalColor(color: AnyColor) - Set color programmaticallygetCurrentColor() - Get current color valuesdispose() / destroyPicker() - Cleanup methodsNote: EyeDropper API requires Chrome 95+ or Edge 95+
This is a 100% open source project and we actively encourage community participation! Here’s how you can help:
Found an issue? Please let us know!
Have an idea to make this better?
Want to contribute code? Fantastic!
git checkout -b feature/your-feuture)git commit -m 'Add amazing feature')git push origin feature/your-feuture)New to open source? Look for issues tagged good-first-issue to get started!
Help us test across different:
Found a typo? Need better examples? Documentation contributions are especially welcome!
We follow a friendly, inclusive, and welcoming environment. Please:
MIT License - see LICENSE file for details. This means you can use, modify, and distribute this software freely!
⭐ Love this project?
📦 npm Package: @brightdotdev/color-picker
🌐 Live Demo: Check out the demo to see all features in action!
| This project is maintained with by [Brightdotdev | Bright ](https://github.com/brightdotdev) (for now) |