React Color Pikr 🎨

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


🚀 Live Demo | 📚 Documentation | 📦 npm Package

✨ Why React Color Pikr?

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.

$3

- 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

🚀 Features

$3

- 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

$3

- 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

$3

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

$3

- 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

Installation

``bash
npm install react-color-pikr
`

`bash
yarn add react-color-pikr
`

`bash
pnpm add react-color-pikr
`

Quick Start

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

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

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

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

Documentation

| Guide | Description |
|-------|-------------|
| Getting Started | Installation, setup, and basic usage |
| API Reference | Complete component and utility documentation |
| Examples | Real-world usage examples and patterns |
| Customization | Advanced styling and theming guide |
| Migration Guide | Migrate from other color picker libraries |

Quick Examples

$3


`tsx
const [color, setColor] = useState('#ff6b6b');
return ;
`

$3

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

$3

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

$3

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

Key Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| value | string | #FF0000 | Current color value |
| onChange | (color: string) => void | - | Color change callback |
| format | 'hex' \| 'rgb' \| 'hsv' \| 'hsl' | 'hex' | Output format |
| showAlpha | boolean | false | Enable alpha channel |
| showPresets | boolean | true | Show preset colors |
| width | number | 280 | Picker width |
| height | number | 200 | Picker height |

→ See complete API reference

Why Choose React Color Pikr?

$3

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

$3

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

$3

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

→ See migration guide

Browser Support

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

Contributing

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

$3

`bash


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
`

$3

`bash


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
``

License

MIT © Sunil Soundarapandian

Support

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

---

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