A modern, accessible, and feature-rich React color picker component library with comprehensive alpha channel support

🚀 Live Demo | 📚 Documentation | 📦 npm Package

React Color Pikr stands out as the most comprehensive color picker solution for modern React applications. Unlike other libraries, it provides native 8-digit HEX alpha support, zero external dependencies, and built-in accessibility features.

• Design Systems: Integrate seamlessly with your design system
• Content Management: Rich color selection for CMS interfaces
• Creative Applications: Professional-grade color tools
• Mobile Applications: Touch-optimized for mobile-first design
• Accessibility-First Projects: WCAG 2.1 compliant out of the box

• 8-Digit HEX Alpha: Full transparency control with #RRGGBBAA format
• Multiple Formats: HEX, RGB, HSV, and HSL with seamless conversion
• Precision Control: High-resolution color selection and alpha blending
• Real-time Preview: Instant visual feedback with alpha transparency

• Keyboard Navigation: Full keyboard support with intuitive controls
• Screen Reader: ARIA labels and announcements for all interactions
• High Contrast: Optimized focus indicators and visual cues
• Touch Accessibility: 44px minimum touch targets for mobile users

• Touch Optimized: Smooth gesture handling and responsive interactions
• Cross-Platform: Works flawlessly on iOS, Android, and desktop
• Performance: 60fps interactions with optimized rendering

• TypeScript First: Complete type definitions and IntelliSense support
• Zero Dependencies: Lightweight bundle with no external requirements
• Framework Agnostic: Easy integration with any React application
• Customizable: Extensive theming and styling options

npm install react-color-pikr

yarn add react-color-pikr

pnpm add react-color-pikr

import React, { useState } from 'react';
import { ColorPicker } from 'react-color-pikr';

function App() {
  const [color, setColor] = useState('#3498db80'); // 8-digit HEX with alpha

  return (
    <ColorPicker
      value={color}
      onChange={setColor}
      format="hex"
      showAlpha={true}
      showPresets={true}
    />
  );
}

Note: No CSS imports required! All styles are included automatically.

const [color, setColor] = useState('#ff6b6b');
return <ColorPicker value={color} onChange={setColor} />;

<ColorPicker 
  value="#3498db80" 
  onChange={setColor} 
  showAlpha={true} 
  format="hex" 
/>

const presets = ['#e74c3c', '#3498db', '#2ecc71', '#f39c12'];
<ColorPicker 
  value={color} 
  onChange={setColor} 
  presetColors={presets} 
/>

<ColorPicker 
  value={color} 
  onChange={setColor} 
  format="rgb" // Returns: rgba(52, 152, 219, 0.8)
  showColorFormat={true}
/>

→ See complete API reference

• 50% smaller bundle (15KB vs 30KB+)
• No CSS imports required
• Better TypeScript support
• Active maintenance and updates
• Better alpha support with 8-digit HEX

• More features (presets, format selector, alpha)
• Better accessibility
• TypeScript included
• Customizable sizing and styling

• Simpler API with consistent return values
• Better mobile support
• No CSS conflicts with inline styles

→ See migration guide

• Chrome 60+
• Firefox 55+
• Safari 12+
• Edge 79+
• Mobile browsers

Contributions are welcome! Please read our Contributing Guide for details.

# Clone repository
git clone https://github.com/ssunils/react-color-pikr.git

# Install dependencies
npm install

# Start development server
npm run dev

# Build library
npm run build:lib

# Validate before release
npm run validate-release

# Create releases using GitHub Actions (recommended)
# Go to Actions → Release → Run workflow

# Or use npm scripts
npm run release:patch  # Bug fixes
npm run release:minor  # New features  
npm run release:major  # Breaking changes
npm run release:beta   # Prerelease

MIT © Sunil Soundarapandian

• Report Issues
• Discussions
• Email: sunil.soundarapandian@gmail.com

Star this repo if React Color Pikr helped you build something awesome!