A beautiful, animated color picker component with HSV/Hex support, custom presets, and dark mode. Copy-paste ready for React, Next.js, Vite, Webpack, Remix, and Astro.
https://boracomet.github.io/comet-color-picker/
- 🎨 HSV & Hex Color Modes - Precise color selection with visual HSV picker
- 🌈 Custom Presets - Quick access to common colors with customizable presets
- 🌙 Dark Mode - Built-in light and dark themes
- 🎬 Smooth Animations - Powered by Framer Motion
- 📱 Touch Support - Works great on mobile devices
- 🔧 TypeScript - Full type safety included
- 🎯 Portal Rendering - No z-index issues, renders in document body
This is NOT an npm package. You need to copy the component files directly into your project.
git clone https://github.com/boracomet/comet-color-picker.gitCopy the following folders to your project:
src/
├── components/
│ ├── color-picker/
│ │ ├── ColorPicker.tsx # Main component
│ │ └── index.ts # Export
│ └── ui/
│ ├── button.tsx # Button component
│ └── input.tsx # Input component
└── lib/
└── utils.ts # cn() utility function
# Example for Next.js / Vite / React projects:
cp -r comet-color-picker/src/components/color-picker ./src/components/
cp -r comet-color-picker/src/components/ui ./src/components/
cp -r comet-color-picker/src/lib ./src/npm install framer-motion chroma-js lucide-react clsx tailwind-merge class-variance-authority
npm install -D @types/chroma-jsimport { useState } from 'react';
import { ColorPicker } from './components/color-picker';
function App() {
const [color, setColor] = useState('#3b82f6');
return (
<ColorPicker
color={color}
onChange={setColor}
theme="dark"
/>
);
}'use client';
import { useState } from 'react';
import { ColorPicker } from '@/components/color-picker';
export default function Page() {
const [color, setColor] = useState('#3b82f6');
return (
<ColorPicker
color={color}
onChange={setColor}
theme="dark"
/>
);
}import { useState } from 'react';
import { ColorPicker } from '~/components/color-picker';
export default function Index() {
const [color, setColor] = useState('#3b82f6');
return (
<div className="p-8">
<ColorPicker
color={color}
onChange={setColor}
theme="dark"
/>
</div>
);
}// src/components/ColorPickerWrapper.tsx
import { useState } from 'react';
import { ColorPicker } from './color-picker';
export default function ColorPickerWrapper() {
const [color, setColor] = useState('#3b82f6');
return <ColorPicker color={color} onChange={setColor} theme="dark" />;
}---
// src/pages/index.astro
import ColorPickerWrapper from '../components/ColorPickerWrapper';
---
<html>
<body>
<ColorPickerWrapper client:load />
</body>
</html>| Prop | Type | Default | Description |
|---|---|---|---|
color |
string |
— | Current color value (hex format) |
onChange |
(color: string) => void |
— | Callback when color changes |
theme |
'light' | 'dark' |
'light' |
Theme mode |
presetColors |
string[] |
Default colors | Custom preset colors array |
defaultColor |
string |
'#3b82f6' |
Default color for reset button |
disabled |
boolean |
false |
Disable the picker |
<ColorPicker
color={color}
onChange={setColor}
presetColors={[
'#10b981', '#059669', '#047857',
'#22c55e', '#16a34a', '#15803d',
]}
defaultColor="#10b981"
/>const DEFAULT_PRESET_COLORS = [
'#ffffff', '#f4f4f5', '#e4e4e7', '#d4d4d8', '#a1a1aa',
'#71717a', '#3f3f46', '#18181b', '#000000',
'#ef4444', '#f97316', '#f59e0b', '#eab308', '#84cc16',
'#22c55e', '#10b981', '#06b6d4', '#3b82f6', '#6366f1', '#a855f7',
];- framer-motion - Animations
- chroma-js - Color manipulation
- lucide-react - Icons
- clsx & tailwind-merge - Class utilities
- class-variance-authority - Button variants
# Clone the repo
git clone https://github.com/boracomet/comet-color-picker.git
# Install dependencies
cd comet-color-picker
npm install
# Run development server
npm run dev
# Open http://localhost:3000Contributions are welcome! Feel free to submit issues and pull requests.
- Fork the repository
- Create your feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add some amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
MIT License © 2026 Bora Turkoglu
See LICENSE for more information.
🌐 Live Demo • ⭐ Star on GitHub
Built with ❤️ using React, Next.js, TailwindCSS & Framer Motion