# Color Picker components > Explore 11 versatile React color picker components using Tailwind CSS to help users select and customize colors effortlessly. 65 components available. Showing the first 60 — browse the rest at https://21st.dev/community/components/s/color-picker. - [Color Picker](https://21st.dev/@uplusion23/components/color-picker.md) — by Trevor McIntire - [Color Picker](https://21st.dev/@uplusion23/components/color-picker/color-picker-with-swatches-and-onchange.md) — by Trevor McIntire - [Color Picker](https://21st.dev/@haydenbleasel/components/color-picker.md) — by Hayden Bleasel - [Color Picker](https://21st.dev/@cult-ui/components/color-picker.md) — by cult/ui - [Color Picker](https://21st.dev/@designali-in/components/color-picker.md) — by Ali Imam - [HeroUI Color Picker](https://21st.dev/@hero_ui/components/heroui-color-picker.md) — by Hero Ui - [Color Selector](https://21st.dev/@tom_ui/components/color-selector.md) — by tom - [HeroUI Color Picker](https://21st.dev/@hero_ui/components/heroui-color-picker/controlled.md) — by Hero Ui - [Color Input](https://21st.dev/@kokonutd/components/color-input.md) — by Kokonut Baffier - [HeroUI Color Picker](https://21st.dev/@hero_ui/components/heroui-color-picker/with-sliders.md) — by Hero Ui - [HeroUI Color Picker](https://21st.dev/@hero_ui/components/heroui-color-picker/with-fields.md) — by Hero Ui - [HeroUI Color Picker](https://21st.dev/@hero_ui/components/heroui-color-picker/with-swatches.md) — by Hero Ui - [HeroUI Color Slider](https://21st.dev/@hero_ui/components/heroui-color-slider/rgb-channels.md) — by Hero Ui - [HeroUI Color Slider](https://21st.dev/@hero_ui/components/heroui-color-slider/controlled.md) — by Hero Ui - [ColorSwatchPicker](https://21st.dev/@hero_ui/components/heroui-color-swatch-picker.md) — by Hero Ui - [Apple Color Picker](https://21st.dev/@pulseawan/components/apple-color-picker.md) — by Muhammad Asif - [Color Picker](https://21st.dev/@anubra266/components/color-picker/inline-color.md) — by Abraham - [Color Picker](https://21st.dev/@anubra266/components/color-picker/hue-wheel-picker.md) — by Abraham - [Color Picker](https://21st.dev/@anubra266/components/color-picker.md) — by Abraham - [Color Picker](https://21st.dev/@anubra266/components/color-picker/color-picker-presets.md) — by Abraham - [Arc Browser like Color Picker](https://21st.dev/@clementjanssens/components/color-picker.md) — by Clément Janssens - [ColorSwatchPicker](https://21st.dev/@hero_ui/components/heroui-color-swatch-picker/default-value.md) — by Hero Ui - [ColorSwatchPicker](https://21st.dev/@hero_ui/components/heroui-color-swatch-picker/sizes.md) — by Hero Ui - [ColorSwatchPicker](https://21st.dev/@hero_ui/components/heroui-color-swatch-picker/variants.md) — by Hero Ui - [ColorSwatchPicker](https://21st.dev/@hero_ui/components/heroui-color-swatch-picker/stack-layout.md) — by Hero Ui - [ColorSwatchPicker](https://21st.dev/@hero_ui/components/heroui-color-swatch-picker/custom-indicator.md) — by Hero Ui - [ColorSwatchPicker](https://21st.dev/@hero_ui/components/heroui-color-swatch-picker/disabled.md) — by Hero Ui - [ColorSwatchPicker](https://21st.dev/@hero_ui/components/heroui-color-swatch-picker/controlled.md) — by Hero Ui - [One Clipboard](https://21st.dev/@felipemenezes098/components/one-clipboard/popover-swatch.md) — by felipemenezes098 - [ColorField](https://21st.dev/@hero_ui/components/heroui-color-field.md) — by Hero Ui - [ColorField](https://21st.dev/@hero_ui/components/heroui-color-field/validation.md) — by Hero Ui - [ColorField](https://21st.dev/@hero_ui/components/heroui-color-field/on-surface.md) — by Hero Ui - [ColorField](https://21st.dev/@hero_ui/components/heroui-color-field/variants.md) — by Hero Ui - [ColorField](https://21st.dev/@hero_ui/components/heroui-color-field/full-width.md) — by Hero Ui - [ColorField](https://21st.dev/@hero_ui/components/heroui-color-field/with-description.md) — by Hero Ui - [Color Generator](https://21st.dev/@designali-in/components/color-generator/color-generator.md) — by Ali Imam - [Radio Group](https://21st.dev/@originui/components/radio-group/color-picker.md) — by Origin UI - [Graaadeints](https://21st.dev/@designali-in/components/graaadeints.md) — by Ali Imam - [Product Card](https://21st.dev/@beratberkayg/components/product-card-1.md) — by beratberkay - [ProductCard](https://21st.dev/@youcefbnm/components/product-card.md) — by YoucefBnm Bnm - [Dialog](https://21st.dev/@sshahaider/components/dialog/color-picker.md) — by Efferd - [HeroUI Color Slider](https://21st.dev/@hero_ui/components/heroui-color-slider.md) — by Hero Ui - [HeroUI Color Slider](https://21st.dev/@hero_ui/components/heroui-color-slider/hsl-channels.md) — by Hero Ui - [HeroUI Color Slider](https://21st.dev/@hero_ui/components/heroui-color-slider/vertical.md) — by Hero Ui - [HeroUI Color Slider](https://21st.dev/@hero_ui/components/heroui-color-slider/custom-render-function.md) — by Hero Ui - [HeroUI Color Slider](https://21st.dev/@hero_ui/components/heroui-color-slider/alpha-channel.md) — by Hero Ui - [HeroUI Color Slider](https://21st.dev/@hero_ui/components/heroui-color-slider/disabled.md) — by Hero Ui - [ColorEmotionSelect](https://21st.dev/@ruixen.ui/components/color-emotion-select.md) — by Ruixen UI - [Neon Lighting](https://21st.dev/@xubohuah/components/neon-lighting.md) — by KainXu - [E-commerce Product Detail](https://21st.dev/@dhileepkumargm/components/e-commerce-product-detail.md) — by Dhileep Kumar GM - [Color Palette Card](https://21st.dev/@ravikatiyar162/components/color-palette-card.md) — by Ravi Katiyar - [QR Code](https://21st.dev/@designali-in/components/qr-code/qr-code-generator.md) — by Ali Imam - [Card](https://21st.dev/@ravikatiyar162/components/card-19.md) — by Ravi Katiyar - [ColorSwatch](https://21st.dev/@hero_ui/components/heroui-color-swatch/transparency.md) — by Hero Ui - [ColorSwatch](https://21st.dev/@hero_ui/components/heroui-color-swatch/custom-styles.md) — by Hero Ui - [ColorSwatch](https://21st.dev/@hero_ui/components/heroui-color-swatch/shapes.md) — by Hero Ui - [ColorSwatch](https://21st.dev/@hero_ui/components/heroui-color-swatch/sizes.md) — by Hero Ui - [HeroUI Color Area](https://21st.dev/@hero_ui/components/heroui-color-area.md) — by Hero Ui - [HeroUI Color Area](https://21st.dev/@hero_ui/components/heroui-color-area/with-dots.md) — by Hero Ui - [ColorField](https://21st.dev/@hero_ui/components/heroui-color-field/channel-editing.md) — by Hero Ui Full component directory: https://21st.dev/llms.txt