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
{{#if colorPickerInlineValue}}
HEX: {{colorPickerInlineValue.hex}}
Alpha: {{colorPickerInlineValue.alpha}}
Hue: {{colorPickerInlineValue.hue}}
RGB: {{join colorPickerInlineValue.rgb delimeter=", "}}
HSL: {{join colorPickerInlineValue.hsl delimeter=", "}}
HSB: {{join colorPickerInlineValue.hsb delimeter=", "}}
RGBA: {{join colorPickerInlineValue.rgba delimeter=", "}}
HSLA: {{join colorPickerInlineValue.hsla delimeter=", "}}
{{/if}}
Alpha: {{colorPickerInlineValue.alpha}}
Hue: {{colorPickerInlineValue.hue}}
RGB: {{join colorPickerInlineValue.rgb delimeter=", "}}
HSL: {{join colorPickerInlineValue.hsl delimeter=", "}}
HSB: {{join colorPickerInlineValue.hsb delimeter=", "}}
RGBA: {{join colorPickerInlineValue.rgba delimeter=", "}}
HSLA: {{join colorPickerInlineValue.hsla delimeter=", "}}