Framework7 comes with ultimate modular Color Picker component that allows to create color picker with limitless combinations of color modules.
Color Wheel
Minimal example with color wheel in Popover
Saturation-Brightness Spectrum
SB Spectrum + Hue Slider in Popover
Hue-Saturation Spectrum
HS Spectrum + Brightness Slider in Popover
RGB Sliders
RGB sliders with labels and values in Popover
RGBA Sliders
RGB sliders + Alpha Slider with labels and values in Popover
HSB Sliders
HSB sliders with labels and values in Popover
RGB Bars
RGB bars with labels and values in Popover on tablet and in Popup on phone
RGB Sliders + Colors
RGB sliders with labels and values in Popover, and previous and current color values
blocks
Palette
Palette opened in Sheet modal on phone and Popover on larger screens
Pro Mode
Current Color + HSB Sliders + RGB sliders + Alpha Slider + HEX + Palette with labels and
editable values
Inline Color Picker
SB Spectrum + HSB Sliders
${colorPickerInlineValue && $h`
HEX: ${colorPickerInlineValue.hex}
Alpha: ${colorPickerInlineValue.alpha}
Hue: ${colorPickerInlineValue.hue}
RGB: ${colorPickerInlineValue.rgb.join(', ')}
HSL: ${colorPickerInlineValue.hsl.join(', ')}
HSB: ${colorPickerInlineValue.hsb.join(', ')}
RGBA: ${colorPickerInlineValue.rgba.join(', ')}
HSLA: ${colorPickerInlineValue.hsla.join(', ')}
`}
Alpha: ${colorPickerInlineValue.alpha}
Hue: ${colorPickerInlineValue.hue}
RGB: ${colorPickerInlineValue.rgb.join(', ')}
HSL: ${colorPickerInlineValue.hsl.join(', ')}
HSB: ${colorPickerInlineValue.hsb.join(', ')}
RGBA: ${colorPickerInlineValue.rgba.join(', ')}
HSLA: ${colorPickerInlineValue.hsla.join(', ')}