🎨 Better Color Picker

A powerful and intuitive color picker React component with support for both solid colors and gradients, featuring intelligent color harmony generation powered by tailwind-colors-generator.

Try it live in our Storybook or check the Demo!

✨ Features

• 🎯 Single color picker with RGB/HSL support
• 🌈 Linear and radial gradient generation
• 🔄 Multiple color stop management
• 🎨 Smart color harmonies (complementary, analogous, etc.)
• 📱 Mobile-friendly and responsive

📦 Installation

npm install better-color-picker
# or
yarn add better-color-picker

🚀 Quick Start

import 'better-color-picker/style.css';
import { useState } from 'react';
import Picker from 'better-color-picker';

const Demo = () => {
  const [value, setValue] = useState('#d7006c');
  
  return (
    <div style={{ background: value }}>
      <Picker
        className="shadow-xl rounded-3xl max-w-[300px]"
        onChange={setValue}
        value={value}
      />
    </div>
  );
};

🎨 Gradient Support

Create beautiful gradients with multiple color stops:

const [value, setValue] = useState(
  'linear-gradient(to right, #d7006c, #feb47b, #aab47b, #af706c)'
);

🛠️ Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | value | string | '' | Current color/gradient value | | onChange | (value: string) => void | - | Change handler | | className | string | '' | Additional CSS classes | | textAddColor | string | 'Add Color' | Add color button text | | textLinear | string | 'Linear' | Linear gradient text | | textRadial | string | 'Radial' | Radial gradient text | | textColor | string | 'Color' | Color mode text | | textGradient | string | 'Gradient' | Gradient mode text |

🎯 Examples

Basic Color Picker

<Picker onChange={color => console.log('Selected color:', color)} />

Gradient Picker with Custom Labels

<Picker
  value="linear-gradient(90deg, #ff0000, #00ff00)"
  onChange={setValue}
  textLinear="Horizontal"
  textRadial="Circular"
  textAddColor="New Color"
/>

⭐ Show your support

Give a ⭐️ if this project helped you!

👨‍💻 Author

Felipe Rohde

• Twitter: @felipe_rohde
• Github: @feliperohdee
• Email: [email protected]