MUI Color Wheel 🎨

A beautiful, customizable color picker component for Material-UI featuring an intuitive color wheel interface. Built with React and TypeScript.

✨ Features

• Interactive Color Wheel: Intuitive HSL color selection with smooth interactions
• Multiple Color Formats: Support for HEX, RGB, HSL, and HSV color models
• Opacity Control: Alpha channel slider with real-time preview
• Preset Swatches: Customizable color palette with Material Design colors
• Eyedropper Tool: Native browser eyedropper for screen color sampling
• Responsive Design: Works seamlessly on all device sizes
• Theme Integration: Automatically adapts to your MUI theme (light/dark mode)
• Accessibility: Full keyboard navigation and ARIA support
• TypeScript Support: Complete type definitions out of the box
• Zero Dependencies: Only requires peer dependencies (React, MUI)

🚀 Quick Start

npm install mui-color-wheel

import React, { useState } from 'react';
import { ColorWheel } from 'mui-color-wheel';

function App() {
  const [color, setColor] = useState('#3f51b5');

  return (
    <ColorWheel
      color={color}
      onChange={setColor}
      presetColors={['#f44336', '#4caf50', '#2196f3']}
    />
  );
}

🎯 Use Cases

• Design systems and theme customizers
• Graphic editing applications
• Form inputs with color selection
• Dashboard configuration panels
• E-commerce product customization
• Creative tools and applications

🛠️ Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | color | string | - | Current color value | | onChange | (color: string) => void | - | Callback when color changes | | presetColors | string[] | Material palette | Array of preset colors | | format | 'hex' \| 'rgb' \| 'hsl' | 'hex' | Output color format | | showOpacity | boolean | true | Show alpha slider | | showEyedropper | boolean | true | Show eyedropper button | | disabled | boolean | false | Disable the component | | size | 'small' \| 'medium' \| 'large' | 'medium' | Component size |

🎨 Customization

The component is fully customizable using MUI's theming system:

import { createTheme, ThemeProvider } from '@mui/material';

const theme = createTheme({
  components: {
    MuiColorWheel: {
      styleOverrides: {
        wheel: {
          borderRadius: '50%',
          boxShadow: '0 4px 12px rgba(0,0,0,0.15)',
        },
        swatch: {
          '&:hover': {
            transform: 'scale(1.1)',
          },
        },
      },
    },
  },
});

function App() {
  return (
    <ThemeProvider theme={theme}>
      <ColorWheel color="#3f51b5" onChange={setColor} />
    </ThemeProvider>
  );
}

📱 Demo

Check out the interactive demo: mui-color-wheel.vercel.app

🤝 Contributing

Contributions are welcome! Please read our Contributing Guide for details on our code of conduct and the process for submitting pull requests.

📄 License

MIT © satya subudhi