Color Picker

    Framework7 comes with ultimate modular Color Picker component that allows to create color picker with limitless combinations of “color modules”.

    Let’s look at related App methods to work with Color Picker:

    app.colorPicker.create(parameters)- create Color Picker instance

    • parameters - object. Object with Color Picker parameters

    Method returns created Color Picker instance

    app.colorPicker.destroy(el)- destroy Color Picker instance

    • el - HTMLElement or string (with CSS Selector) or object. Color Picker element or Color Picker instance to destroy.

    app.colorPicker.get(el)- get Color Picker instance by HTML element

    • el - HTMLElement or string (with CSS Selector). Color Picker element.

    Method returns Color Picker’s instance

    app.colorPicker.close(el)- close Color Picker

    • el - HTMLElement or string (with CSS Selector). Color Picker element to close.

    Method returns Color Picker’s instance

    For example:

    Color Picker Parameters

    Let’s look on list of all available Color Picker parameters:

    Note that all following parameters can be used in global app parameters under colorPicker property to set defaults for all color pickers. For example:

    1. var app = new Framework7({
    2.   colorPicker: {
    3.     modules: ['hb-spectrum', 'hue-slider'],
    4.     url: 'select-color/',
    5.   }
    6. });

    You can create your own Color Picker layout by specifing modules you want to use in modules array parameter on Color Picker creation. There are following modules available:

    wheel

    sb-spectrum

    Saturation-Brightness spectrum. It is recommended to use it with hue-slider

    Color Picker - 图3

    hue-slider

    Single hue slider

    hs-spectrum

    Hue-Saturation spectrum. It is recommended to use it with brightness-slider

    Color Picker - 图5

    brightness-slider

    Single brightness slider

    rgb-sliders

    Red, green and blue sliders

    Color Picker - 图7

    hsb-sliders

    Hue, saturation and brightness sliders

    alpha-slider

    Alpha (opacity) single slider

    Color Picker - 图9

    rgb-bars

    Vertical red, green and blue sliders

    palette

    Color Picker - 图11

    hex

    Module with current HEX value

    current-color

    Modules displays currently selected color

    Color Picker - 图13

    initial-current-colors

    Modules displays currently selected color, and initial color (color that was selected before Color Picker was opened). Clicking on initial color will set Color Picker value to initial color.

    It is also possible to use and create custom color picker modules. Such custom modules can be used to create custom pickers or just to add some custom content between modules.

    To add custom color picker module, we need to pass an object instead of string to modules array parameter. Custom module object can contain following methods. Each method receives color picker instance as an argument.

    For, example if we need to add some custom text between modules, we can use such simple module:

    1. var colorPicker = app.colorPicker.create({
    2.   // ...
    3.   modules: [
    4.     'sb-spectrum',
    5.     // custom module with only render function
    6.     {
    7.       render: function() {
    8.         return '<p class="text-align-center">Enter HUE value:</p>'
    9.       },
    10.     },
    11.     'hue-slider',
    12.   ]
    13. })

    For inspiration and how things work in modules, check the .

    Color Picker Value

    Color Picker instance value represented as Object with the following properties.

    hexstringHEX color value, e.g. #ff0000
    rgbarrayArray with RGB ([Red, Green, Blue]) color, e.g. [255, 100, 20]
    hslarrayArray with HSL ([Hue, Saturation, Lightness]) color, e.g. [320, 0.1, 0.9]
    hsbarrayArray with HSB/V ([Hue, Saturation, Brightness]) color, e.g. [180, 0.5, 0.3]
    alphanumberAlpha (opacity) value (from 0 to 1), e.g. 0.6
    huenumberHue value (from 0 to 360), e.g. 320
    rgbaarrayArray with RGBA ([Red, Green, Blue, Alpha]) color, e.g. [255, 100, 20, 0.5]
    hslaarrayArray with HSLA ([Hue, Saturation, Lightness, Alpha]) color, e.g. [320, 0.1, 0.9, 0.2]

    For example:

    1. var colorPicker = app.colorPicker.create({
    2.   ...
    3.   on: {
    4.     change: function (value) {
    5.       console.log(`HEX value is ${value.hex}. Opacity is ${value.alpha}`);
    6.       $('.some-element').css('background-color', `rgba(${value.rgba.join(', ')})`);
    7.     }
    8.   }
    9. })

    After we initialize Color Picker we have its initialized instance in variable (like colorPicker variable in examples above) with helpful methods and properties:

    Color Picker Events

    Color Picker will fire the following DOM events on color picker element and events on app andcolor picker instance:

    EventDescription
    colorpicker:openEvent will be triggered when Color Picker starts its opening animation
    colorpicker:openedEvent will be triggered after Color Picker completes its opening animation
    colorpicker:closeEvent will be triggered when Color Picker starts its closing animation
    colorpicker:closedEvent will be triggered after Color Picker completes its closing animation

    Color Picker instance emits events on both self instance and app instance. App instance events has same names prefixed with colorPicker.

    Below is the list of related CSS variables (CSS custom properties).

    1. :root {
    2.   --f7-color-picker-sheet-bg-color: #fff;
    3.   --f7-color-picker-popup-bg-color: #fff;
    4.   --f7-color-picker-popover-width: 350px;
    5.   --f7-color-picker-slider-size: 6px;
    6.   --f7-color-picker-slider-knob-size: 16px;
    7.   --f7-color-picker-bar-size: 50px;
    8.   --f7-color-picker-bar-min-height: 260px;
    9.   --f7-color-picker-value-bg-color: rgba(0, 0, 0, 0.05);
    10.   --f7-color-picker-value-width: 64px;
    11.   --f7-color-picker-value-height: 32px;
    12.   --f7-color-picker-value-font-size: 16px;
    13.   --f7-color-picker-value-border-radius: 4px;
    14.   --f7-color-picker-hex-value-width: 84px;
    15.   --f7-color-picker-label-font-size: 14px;
    16.   --f7-color-picker-label-width: 10px;
    17.   --f7-color-picker-label-height: 14px;
    18.   --f7-color-picker-sb-spectrum-height: 260px;
    19.   --f7-color-picker-sb-spectrum-handle-size: 16px;
    20.   --f7-color-picker-wheel-width: 330px;
    21.   --f7-color-picker-group-bg-color: rgba(0, 0, 0, 0.05);
    22.   --f7-color-picker-group-value-bg-color: #fff;
    23.   --f7-color-picker-palette-value-width: 36px;
    24.   --f7-color-picker-palette-value-height: 36px;
    25.   --f7-color-picker-initial-current-color-height: 40px;
    26.   --f7-color-picker-initial-current-color-border-radius: 4px;
    27. }
    28. :root .theme-dark,
    29. :root.theme-dark {
    30.   --f7-color-picker-sheet-bg-color: #171717;
    31.   --f7-color-picker-popup-bg-color: #171717;
    32.   --f7-color-picker-value-bg-color: rgba(255, 255, 255, 0.1);
    33.   --f7-color-picker-group-bg-color: #000;
    34.   --f7-color-picker-group-value-bg-color: rgba(255, 255, 255, 0.12);
    35. }

    Examples

    Color Wheel

    1. var colorPickerWheel = app.colorPicker.create({
    2.   inputEl: '#demo-color-picker-wheel',
    4.   targetElSetBackgroundColor: true,
    5.   modules: ['wheel'],
    6.   openIn: 'popover',
    7.   value: {
    8.     hex: '#00ff00',
    9.   },
    10. });

    Saturation-Brightness Spectrum

    1. <div class="list no-hairlines-md">
    2.     <li>
    3.       <div class="item-content item-input">
    4.         <div class="item-media">
    5.           <i class="icon demo-list-icon" id="demo-color-picker-spectrum-value"></i>
    6.         </div>
    7.         <div class="item-inner">
    8.           <div class="item-input-wrap">
    9.             <input type="text" placeholder="Color" readonly="readonly" id="demo-color-picker-spectrum"/>
    10.           </div>
    11.         </div>
    12.       </div>
    13.     </li>
    14.   </ul>
    15. </div>
    1. var colorPickerSpectrum = app.colorPicker.create({
    2.   inputEl: '#demo-color-picker-spectrum',
    3.   targetEl: '#demo-color-picker-spectrum-value',
    4.   targetElSetBackgroundColor: true,
    5.   modules: ['sb-spectrum', 'hue-slider'],
    6.   openIn: 'popover',
    7.   value: {
    8.     hex: '#ff0000',
    9.   },
    10. });

    Hue-Saturation Spectrum

    1. <div class="list no-hairlines-md">
    2.   <ul>
    3.     <li>
    4.       <div class="item-content item-input">
    5.         <div class="item-media">
    6.           <i class="icon demo-list-icon" id="demo-color-picker-hs-spectrum-value"></i>
    7.         </div>
    8.         <div class="item-inner">
    9.           <div class="item-input-wrap">
    10.             <input type="text" placeholder="Color" readonly="readonly" id="demo-color-picker-hs-spectrum"/>
    11.           </div>
    12.         </div>
    13.       </div>
    14.     </li>
    15.   </ul>
    16. </div>
    1. var colorPickerHsSpectrum = app.colorPicker.create({
    2.   inputEl: '#demo-color-picker-hs-spectrum',
    3.   targetEl: '#demo-color-picker-hs-spectrum-value',
    4.   targetElSetBackgroundColor: true,
    5.   modules: ['hs-spectrum', 'brightness-slider'],
    6.   openIn: 'popover',
    7.   value: {
    8.     hex: '#ff0000',
    9.   },
    10. });

    RGB Sliders

    1. <div class="list no-hairlines-md">
    2.   <ul>
    3.     <li>
    4.       <div class="item-content item-input">
    5.         <div class="item-media">
    6.           <i class="icon demo-list-icon" id="demo-color-picker-rgb-value"></i>
    7.         </div>
    8.         <div class="item-inner">
    9.           <div class="item-input-wrap">
    10.             <input type="text" placeholder="Color" readonly="readonly" id="demo-color-picker-rgb"/>
    11.           </div>
    12.         </div>
    13.       </div>
    14.     </li>
    15.   </ul>
    16. </div>
    1. var colorPickerRgb = app.colorPicker.create({
    2.   inputEl: '#demo-color-picker-rgb',
    3.   targetEl: '#demo-color-picker-rgb-value',
    4.   targetElSetBackgroundColor: true,
    5.   modules: ['rgb-sliders'],
    6.   openIn: 'popover',
    7.   sliderValue: true,
    8.   sliderLabel: true,
    9.   value: {
    10.     hex: '#0000ff',
    11.   },
    12. });

    RGBA Sliders

    1. <div class="list no-hairlines-md">
    2.   <ul>
    3.     <li>
    4.       <div class="item-content item-input">
    5.         <div class="item-media">
    6.           <i class="icon demo-list-icon" id="demo-color-picker-rgba-value"></i>
    7.         </div>
    8.         <div class="item-inner">
    9.           <div class="item-input-wrap">
    10.             <input type="text" placeholder="Color" readonly="readonly" id="demo-color-picker-rgba"/>
    11.           </div>
    12.         </div>
    13.       </div>
    14.     </li>
    15.   </ul>
    16. </div>
    1. var colorPickerRgba = app.colorPicker.create({
    2.   inputEl: '#demo-color-picker-rgba',
    3.   targetEl: '#demo-color-picker-rgba-value',
    4.   targetElSetBackgroundColor: true,
    5.   modules: ['rgb-sliders', 'alpha-slider'],
    6.   openIn: 'popover',
    7.   sliderValue: true,
    8.   sliderLabel: true,
    9.   value: {
    10.     hex: '#ff00ff',
    11.   },
    12.   formatValue: function (value) {
    13.     return 'rgba(' + value.rgba.join(', ') + ')';
    14.   },
    15. });

    HSB Sliders

    1. var colorPickerHsb = app.colorPicker.create({
    2.   inputEl: '#demo-color-picker-hsb',
    3.   targetEl: '#demo-color-picker-hsb-value',
    4.   targetElSetBackgroundColor: true,
    5.   modules: ['hsb-sliders'],
    6.   openIn: 'popover',
    7.   sliderValue: true,
    8.   sliderLabel: true,
    9.   formatValue: function (value) {
    10.     return 'hsb(' + value.hsb[0] + (', ' + value.hsb[1] * 1000 / 10 + '%') + (', ' + value.hsb[2] * 1000 / 10 + '%') + ')';
    11.   },
    12.   value: {
    13.     hex: '#00ff00',
    14.   },
    15. });

    RGB Bars

    1. <div class="list no-hairlines-md">
    2.   <ul>
    3.     <li>
    4.       <div class="item-content item-input">
    5.         <div class="item-media">
    6.           <i class="icon demo-list-icon" id="demo-color-picker-rgb-bars-value"></i>
    7.         </div>
    8.         <div class="item-inner">
    9.           <div class="item-input-wrap">
    10.             <input type="text" placeholder="Color" readonly="readonly" id="demo-color-picker-rgb-bars"/>
    12.         </div>
    13.       </div>
    14.     </li>
    15. </div>
    1. var colorPickerRgbBars = app.colorPicker.create({
    2.   inputEl: '#demo-color-picker-rgb-bars',
    3.   targetEl: '#demo-color-picker-rgb-bars-value',
    4.   targetElSetBackgroundColor: true,
    5.   modules: ['rgb-bars'],
    6.   openIn: 'auto',
    7.   barValue: true,
    8.   barLabel: true,
    9.   formatValue: function (value) {
    10.     return 'rgb(' + value.rgb.join(', ') + ')';
    11.   },
    12.   value: {
    13.     hex: '#0000ff',
    14.   },
    15. });

    RGB Sliders + Colors

    1. <div class="list no-hairlines-md">
    2.   <ul>
    3.     <li>
    4.       <div class="item-content item-input">
    5.         <div class="item-media">
    6.           <i class="icon demo-list-icon" id="demo-color-picker-rgb-initial-current-colors-value"></i>
    7.         </div>
    8.         <div class="item-inner">
    9.           <div class="item-input-wrap">
    10.             <input type="text" placeholder="Color" readonly="readonly" id="demo-color-picker-rgb-initial-current-colors"/>
    11.           </div>
    12.         </div>
    13.       </div>
    14.     </li>
    15.   </ul>
    16. </div>
    1. var colorPickerRgbInitialCurrentColors = app.colorPicker.create({
    2.   inputEl: '#demo-color-picker-rgb-initial-current-colors',
    3.   targetEl: '#demo-color-picker-rgb-initial-current-colors-value',
    4.   targetElSetBackgroundColor: true,
    5.   modules: ['initial-current-colors', 'rgb-sliders'],
    6.   openIn: 'popover',
    7.   sliderValue: true,
    8.   sliderLabel: true,
    9.   formatValue: function (value) {
    10.     return 'rgb(' + value.rgb.join(', ') + ')';
    11.   },
    12.   value: {
    13.     hex: '#ffff00',
    14.   },
    15. });

    Palette

    1. <div class="list no-hairlines-md">
    2.   <ul>
    3.     <li>
    4.       <div class="item-content item-input">
    5.         <div class="item-media">
    6.           <i class="icon demo-list-icon" id="demo-color-picker-palette-value"></i>
    7.         </div>
    8.         <div class="item-inner">
    9.           <div class="item-input-wrap">
    10.             <input type="text" placeholder="Color" readonly="readonly" id="demo-color-picker-palette"/>
    11.           </div>
    12.         </div>
    13.       </div>
    14.     </li>
    15.   </ul>
    16. </div>
    1. var colorPickerPalette = app.colorPicker.create({
    2.   inputEl: '#demo-color-picker-palette',
    3.   targetEl: '#demo-color-picker-palette-value',
    4.   targetElSetBackgroundColor: true,
    5.   modules: ['palette'],
    6.   openIn: 'auto',
    7.   openInPhone: 'sheet',
    8.   palette: [
    9.     ['#FFEBEE', '#FFCDD2', '#EF9A9A', '#E57373', '#EF5350', '#F44336', '#E53935', '#D32F2F', '#C62828', '#B71C1C'],
    10.     ['#F3E5F5', '#E1BEE7', '#CE93D8', '#BA68C8', '#AB47BC', '#9C27B0', '#8E24AA', '#7B1FA2', '#6A1B9A', '#4A148C'],
    11.     ['#E8EAF6', '#C5CAE9', '#9FA8DA', '#7986CB', '#5C6BC0', '#3F51B5', '#3949AB', '#303F9F', '#283593', '#1A237E'],
    12.     ['#E1F5FE', '#B3E5FC', '#81D4FA', '#4FC3F7', '#29B6F6', '#03A9F4', '#039BE5', '#0288D1', '#0277BD', '#01579B'],
    13.     ['#E0F2F1', '#B2DFDB', '#80CBC4', '#4DB6AC', '#26A69A', '#009688', '#00897B', '#00796B', '#00695C', '#004D40'],
    14.     ['#F1F8E9', '#DCEDC8', '#C5E1A5', '#AED581', '#9CCC65', '#8BC34A', '#7CB342', '#689F38', '#558B2F', '#33691E'],
    15.     ['#FFFDE7', '#FFF9C4', '#FFF59D', '#FFF176', '#FFEE58', '#FFEB3B', '#FDD835', '#FBC02D', '#F9A825', '#F57F17'],
    16.     ['#FFF3E0', '#FFE0B2', '#FFCC80', '#FFB74D', '#FFA726', '#FF9800', '#FB8C00', '#F57C00', '#EF6C00', '#E65100'],
    17.   ],
    18.   value: {
    19.     hex: '#FFEBEE',
    20.   },
    21.   formatValue: function (value) {
    22.     return value.hex;
    23.   },
    24. });

    Pro Mode

    1. <div class="list no-hairlines-md">
    2.   <ul>
    3.     <li>
    4.       <div class="item-content item-input">
    5.         <div class="item-media">
    6.           <i class="icon demo-list-icon" id="demo-color-picker-pro-value"></i>
    7.         </div>
    8.         <div class="item-inner">
    9.           <div class="item-input-wrap">
    10.             <input type="text" placeholder="Color" readonly="readonly" id="demo-color-picker-pro"/>
    11.           </div>
    12.         </div>
    13.       </div>
    14.     </li>
    15.   </ul>
    16. </div>
    1. var colorPickerRgbPro = app.colorPicker.create({
    2.   inputEl: '#demo-color-picker-pro',
    3.   targetEl: '#demo-color-picker-pro-value',
    4.   targetElSetBackgroundColor: true,
    5.   modules: ['initial-current-colors', 'sb-spectrum', 'hsb-sliders', 'rgb-sliders', 'alpha-slider', 'hex', 'palette'],
    6.   openIn: 'auto',
    7.   sliderValue: true,
    8.   sliderValueEditable: true,
    9.   sliderLabel: true,
    10.   hexLabel: true,
    11.   hexValueEditable: true,
    12.   groupedModules: true,
    13.   palette: [
    14.     ['#FFEBEE', '#FFCDD2', '#EF9A9A', '#E57373', '#EF5350', '#F44336', '#E53935', '#D32F2F', '#C62828', '#B71C1C'],
    15.     ['#F3E5F5', '#E1BEE7', '#CE93D8', '#BA68C8', '#AB47BC', '#9C27B0', '#8E24AA', '#7B1FA2', '#6A1B9A', '#4A148C'],
    16.     ['#E8EAF6', '#C5CAE9', '#9FA8DA', '#7986CB', '#5C6BC0', '#3F51B5', '#3949AB', '#303F9F', '#283593', '#1A237E'],
    17.     ['#E1F5FE', '#B3E5FC', '#81D4FA', '#4FC3F7', '#29B6F6', '#03A9F4', '#039BE5', '#0288D1', '#0277BD', '#01579B'],
    18.     ['#E0F2F1', '#B2DFDB', '#80CBC4', '#4DB6AC', '#26A69A', '#009688', '#00897B', '#00796B', '#00695C', '#004D40'],
    19.     ['#F1F8E9', '#DCEDC8', '#C5E1A5', '#AED581', '#9CCC65', '#8BC34A', '#7CB342', '#689F38', '#558B2F', '#33691E'],
    20.     ['#FFFDE7', '#FFF9C4', '#FFF59D', '#FFF176', '#FFEE58', '#FFEB3B', '#FDD835', '#FBC02D', '#F9A825', '#F57F17'],
    21.     ['#FFF3E0', '#FFE0B2', '#FFCC80', '#FFB74D', '#FFA726', '#FF9800', '#FB8C00', '#F57C00', '#EF6C00', '#E65100'],
    22.   ],
    23.   formatValue: function (value) {
    24.     return 'rgba(' + value.rgba.join(', ') + ')';
    25.   },
    26.   value: {
    27.     hex: '#00ffff',
    28.   },
    29. });

    Inline Color Picker

    1. var colorPickerInline = app.colorPicker.create({
    2.   containerEl: '#demo-color-picker-inline',
    3.   modules: ['sb-spectrum', 'hsb-sliders', 'alpha-slider'],
    4.   value: {
    5.     hex: '#77ff66',
    6.   },