React Colorful Versions Save

• Add new HexAlphaColorPicker component (via #186)
• Fix types export for TypeScript 4.7. Thanks to @AnotherHermit (via #189)
• Improve ARIA attribute values for sliders. Thanks to @aitchiss (via #177)

✌️ Multitouch support! Thanks to @xnimorz (via #158)

▶️ Video demo

Improve input color parsers to support valid CSS color notations and units of RGB[A] and HSL[A] color models:

// Percentage syntax
"rgb(100% 50% 25%)"

// Valid angular units ("deg", "grad", "rad" and "turn")
"hsl(100grad, 50%, 50%)"
"hsl(0.25turn, 50%, 50%)"

// Modern space and slash separated syntax 
"rgba(100% 50% 25% / 99%)"
"hsla(90 50% 50% / 10%)"

// Optional leading zero
"rgb(.99% .1% .5% / .6%)"
"hsla(.2rad, .99%, .5%, .25)"

Made by @omgovich (via #133)

Since v5 no longer requires importing CSS separately, the usage of the react-colorful became much simpler.

  import { HexColorPicker } from "react-colorful";
- import "react-colorful/dist/index.css";

Now the component does not require any CSS loader and can be used with any CSS-in-JS project or component library. Also, by dropping the CSS export we made the library 100% side-effects-free.

The default styles are set to a higher priority level now, so you may need to tweak your styles a bit to override the built-in styles.

Made by @omgovich (via #101)

• Our color picker now follows the WAI-ARIA guidelines to support users of assistive technologies.
• The component is completely accessible with keyboard navigation: you can focus on any picker's part using the Tab button and change the color with the arrow keys.

Made by @omgovich (via #63)

Additional components to work with RGBA, HSLA, HSVA color models. Made by @omgovich (via #47)

• Migrate to named exports.
• Mark the library as side-effect-free and add tree-shaking support.
• More consistent public component and type names.

Made by @rschristian and @omgovich (via #42)

• The entire codebase was rewritten in TypeScript by @rschristian ❤️ (via #23)

• TypeScript types are now bundled with the library. Thanks to @rschristian (via #22)

• New HexInput component that allows to paste and type a HEX color (via #18)