Color Picker

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

Color Picker App Methods

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:

var colorPicker = app.colorPicker.create({
  inputEl: '#color-input',
  value: {
    hex: '#ff000',
  },
});

Color Picker Parameters

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

palette: [‘#ff0000’, ‘#00ff00’, …]

palette: [
  // first row
  [‘#ff0000’, ‘#00ff00’, …]
  // second row
  [‘#0000ff’, ‘#f0000f’, …]
  …
]

[
  [‘#FFEBEE’, ‘#FFCDD2’, ‘#EF9A9A’, ‘#E57373’, ‘#EF5350’, ‘#F44336’, ‘#E53935’, ‘#D32F2F’, ‘#C62828’, ‘#B71C1C’],
  [‘#F3E5F5’, ‘#E1BEE7’, ‘#CE93D8’, ‘#BA68C8’, ‘#AB47BC’, ‘#9C27B0’, ‘#8E24AA’, ‘#7B1FA2’, ‘#6A1B9A’, ‘#4A148C’],
  [‘#E8EAF6’, ‘#C5CAE9’, ‘#9FA8DA’, ‘#7986CB’, ‘#5C6BC0’, ‘#3F51B5’, ‘#3949AB’, ‘#303F9F’, ‘#283593’, ‘#1A237E’],
  [‘#E1F5FE’, ‘#B3E5FC’, ‘#81D4FA’, ‘#4FC3F7’, ‘#29B6F6’, ‘#03A9F4’, ‘#039BE5’, ‘#0288D1’, ‘#0277BD’, ‘#01579B’],
  [‘#E0F2F1’, ‘#B2DFDB’, ‘#80CBC4’, ‘#4DB6AC’, ‘#26A69A’, ‘#009688’, ‘#00897B’, ‘#00796B’, ‘#00695C’, ‘#004D40’],
  [‘#F1F8E9’, ‘#DCEDC8’, ‘#C5E1A5’, ‘#AED581’, ‘#9CCC65’, ‘#8BC34A’, ‘#7CB342’, ‘#689F38’, ‘#558B2F’, ‘#33691E’],
  [‘#FFFDE7’, ‘#FFF9C4’, ‘#FFF59D’, ‘#FFF176’, ‘#FFEE58’, ‘#FFEB3B’, ‘#FDD835’, ‘#FBC02D’, ‘#F9A825’, ‘#F57F17’],
  [‘#FFF3E0’, ‘#FFE0B2’, ‘#FFCC80’, ‘#FFB74D’, ‘#FFA726’, ‘#FF9800’, ‘#FB8C00’, ‘#F57C00’, ‘#EF6C00’, ‘#E65100’],
]

var colorPicker = app.colorPicker.create({
  …
  on: {
    opened: function () {
      console.log(‘Color Picker opened’)
    }
  }
})

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

var app = new Framework7({
  colorPicker: {
    modules: ['hb-spectrum', 'hue-slider'],
    url: 'select-color/',
  }
});

Color Picker Modules

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:

Custom Modules

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:

var colorPicker = app.colorPicker.create({
  // ...
  modules: [
    'sb-spectrum',
    // custom module with only render function
    {
      render: function() {
        return '<p class="text-align-center">Enter HUE value:</p>'
      },
    },
    'hue-slider',
  ]
})

For inspiration and how things work in modules, check the built-in modules source code.

Color Picker Value

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

For example:

var colorPicker = app.colorPicker.create({
  ...
  on: {
    change: function (value) {
      console.log(`HEX value is ${value.hex}. Opacity is ${value.alpha}`);
      $('.some-element').css('background-color', `rgba(${value.rgba.join(', ')})`);
    }
  }
})

Color Picker Methods & Properties

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

var colorPicker = app.colorPicker.create({
  value: ‘#ff0000’,
});
// update only hue
colorPicker.setValue({ hue: 200 });
// update only alpha
colorPicker.setValue({ alpha: 0.2 });
// set value by hex
colorPicker.setValue({ hex: ‘#ff00ff’ });

Color Picker Events

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

DOM Events

App and Color Picker Instance Events

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

CSS Variables

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

:root {
  --f7-color-picker-sheet-bg-color: #fff;
  --f7-color-picker-popup-bg-color: #fff;
  --f7-color-picker-popover-width: 350px;
  --f7-color-picker-slider-size: 6px;
  --f7-color-picker-slider-knob-size: 16px;
  --f7-color-picker-bar-size: 50px;
  --f7-color-picker-bar-min-height: 260px;
  --f7-color-picker-value-bg-color: rgba(0, 0, 0, 0.05);
  --f7-color-picker-value-width: 64px;
  --f7-color-picker-value-height: 32px;
  --f7-color-picker-value-font-size: 16px;
  --f7-color-picker-value-border-radius: 4px;
  --f7-color-picker-hex-value-width: 84px;
  --f7-color-picker-label-font-size: 14px;
  --f7-color-picker-label-width: 10px;
  --f7-color-picker-label-height: 14px;
  --f7-color-picker-sb-spectrum-height: 260px;
  --f7-color-picker-sb-spectrum-handle-size: 16px;
  --f7-color-picker-wheel-width: 330px;
  --f7-color-picker-group-bg-color: rgba(0, 0, 0, 0.05);
  --f7-color-picker-group-value-bg-color: #fff;
  --f7-color-picker-palette-value-width: 36px;
  --f7-color-picker-palette-value-height: 36px;
  --f7-color-picker-initial-current-color-height: 40px;
  --f7-color-picker-initial-current-color-border-radius: 4px;
}
:root .theme-dark,
:root.theme-dark {
  --f7-color-picker-sheet-bg-color: #171717;
  --f7-color-picker-popup-bg-color: #171717;
  --f7-color-picker-value-bg-color: rgba(255, 255, 255, 0.1);
  --f7-color-picker-group-bg-color: #000;
  --f7-color-picker-group-value-bg-color: rgba(255, 255, 255, 0.12);
}

Examples

Color Wheel

<div class="list no-hairlines-md">
  <ul>
    <li>
      <div class="item-content item-input">
        <div class="item-media">
          <i class="icon demo-list-icon" id="demo-color-picker-wheel-value"></i>
        </div>
        <div class="item-inner">
          <div class="item-input-wrap">
            <input type="text" placeholder="Color" readonly="readonly" id="demo-color-picker-wheel"/>
          </div>
        </div>
      </div>
    </li>
  </ul>
</div>

var colorPickerWheel = app.colorPicker.create({
  inputEl: '#demo-color-picker-wheel',
  targetEl: '#demo-color-picker-wheel-value',
  targetElSetBackgroundColor: true,
  modules: ['wheel'],
  openIn: 'popover',
  value: {
    hex: '#00ff00',
  },
});

Saturation-Brightness Spectrum

<div class="list no-hairlines-md">
  <ul>
    <li>
      <div class="item-content item-input">
        <div class="item-media">
          <i class="icon demo-list-icon" id="demo-color-picker-spectrum-value"></i>
        </div>
        <div class="item-inner">
          <div class="item-input-wrap">
            <input type="text" placeholder="Color" readonly="readonly" id="demo-color-picker-spectrum"/>
          </div>
        </div>
      </div>
    </li>
  </ul>
</div>

var colorPickerSpectrum = app.colorPicker.create({
  inputEl: '#demo-color-picker-spectrum',
  targetEl: '#demo-color-picker-spectrum-value',
  targetElSetBackgroundColor: true,
  modules: ['sb-spectrum', 'hue-slider'],
  openIn: 'popover',
  value: {
    hex: '#ff0000',
  },
});

Hue-Saturation Spectrum

<div class="list no-hairlines-md">
  <ul>
    <li>
      <div class="item-content item-input">
        <div class="item-media">
          <i class="icon demo-list-icon" id="demo-color-picker-hs-spectrum-value"></i>
        </div>
        <div class="item-inner">
          <div class="item-input-wrap">
            <input type="text" placeholder="Color" readonly="readonly" id="demo-color-picker-hs-spectrum"/>
          </div>
        </div>
      </div>
    </li>
  </ul>
</div>

var colorPickerHsSpectrum = app.colorPicker.create({
  inputEl: '#demo-color-picker-hs-spectrum',
  targetEl: '#demo-color-picker-hs-spectrum-value',
  targetElSetBackgroundColor: true,
  modules: ['hs-spectrum', 'brightness-slider'],
  openIn: 'popover',
  value: {
    hex: '#ff0000',
  },
});

RGB Sliders

<div class="list no-hairlines-md">
  <ul>
    <li>
      <div class="item-content item-input">
        <div class="item-media">
          <i class="icon demo-list-icon" id="demo-color-picker-rgb-value"></i>
        </div>
        <div class="item-inner">
          <div class="item-input-wrap">
            <input type="text" placeholder="Color" readonly="readonly" id="demo-color-picker-rgb"/>
          </div>
        </div>
      </div>
    </li>
  </ul>
</div>

var colorPickerRgb = app.colorPicker.create({
  inputEl: '#demo-color-picker-rgb',
  targetEl: '#demo-color-picker-rgb-value',
  targetElSetBackgroundColor: true,
  modules: ['rgb-sliders'],
  openIn: 'popover',
  sliderValue: true,
  sliderLabel: true,
  value: {
    hex: '#0000ff',
  },
});

RGBA Sliders

<div class="list no-hairlines-md">
  <ul>
    <li>
      <div class="item-content item-input">
        <div class="item-media">
          <i class="icon demo-list-icon" id="demo-color-picker-rgba-value"></i>
        </div>
        <div class="item-inner">
          <div class="item-input-wrap">
            <input type="text" placeholder="Color" readonly="readonly" id="demo-color-picker-rgba"/>
          </div>
        </div>
      </div>
    </li>
  </ul>
</div>

var colorPickerRgba = app.colorPicker.create({
  inputEl: '#demo-color-picker-rgba',
  targetEl: '#demo-color-picker-rgba-value',
  targetElSetBackgroundColor: true,
  modules: ['rgb-sliders', 'alpha-slider'],
  openIn: 'popover',
  sliderValue: true,
  sliderLabel: true,
  value: {
    hex: '#ff00ff',
  },
  formatValue: function (value) {
    return 'rgba(' + value.rgba.join(', ') + ')';
  },
});

HSB Sliders

<div class="list no-hairlines-md">
  <ul>
    <li>
      <div class="item-content item-input">
        <div class="item-media">
          <i class="icon demo-list-icon" id="demo-color-picker-hsb-value"></i>
        </div>
        <div class="item-inner">
          <div class="item-input-wrap">
            <input type="text" placeholder="Color" readonly="readonly" id="demo-color-picker-hsb"/>
          </div>
        </div>
      </div>
    </li>
  </ul>
</div>

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

RGB Bars

<div class="list no-hairlines-md">
  <ul>
    <li>
      <div class="item-content item-input">
        <div class="item-media">
          <i class="icon demo-list-icon" id="demo-color-picker-rgb-bars-value"></i>
        </div>
        <div class="item-inner">
          <div class="item-input-wrap">
            <input type="text" placeholder="Color" readonly="readonly" id="demo-color-picker-rgb-bars"/>
          </div>
        </div>
      </div>
    </li>
  </ul>
</div>

var colorPickerRgbBars = app.colorPicker.create({
  inputEl: '#demo-color-picker-rgb-bars',
  targetEl: '#demo-color-picker-rgb-bars-value',
  targetElSetBackgroundColor: true,
  modules: ['rgb-bars'],
  openIn: 'auto',
  barValue: true,
  barLabel: true,
  formatValue: function (value) {
    return 'rgb(' + value.rgb.join(', ') + ')';
  },
  value: {
    hex: '#0000ff',
  },
});

RGB Sliders + Colors

<div class="list no-hairlines-md">
  <ul>
    <li>
      <div class="item-content item-input">
        <div class="item-media">
          <i class="icon demo-list-icon" id="demo-color-picker-rgb-initial-current-colors-value"></i>
        </div>
        <div class="item-inner">
          <div class="item-input-wrap">
            <input type="text" placeholder="Color" readonly="readonly" id="demo-color-picker-rgb-initial-current-colors"/>
          </div>
        </div>
      </div>
    </li>
  </ul>
</div>

var colorPickerRgbInitialCurrentColors = app.colorPicker.create({
  inputEl: '#demo-color-picker-rgb-initial-current-colors',
  targetEl: '#demo-color-picker-rgb-initial-current-colors-value',
  targetElSetBackgroundColor: true,
  modules: ['initial-current-colors', 'rgb-sliders'],
  openIn: 'popover',
  sliderValue: true,
  sliderLabel: true,
  formatValue: function (value) {
    return 'rgb(' + value.rgb.join(', ') + ')';
  },
  value: {
    hex: '#ffff00',
  },
});

Palette

<div class="list no-hairlines-md">
  <ul>
    <li>
      <div class="item-content item-input">
        <div class="item-media">
          <i class="icon demo-list-icon" id="demo-color-picker-palette-value"></i>
        </div>
        <div class="item-inner">
          <div class="item-input-wrap">
            <input type="text" placeholder="Color" readonly="readonly" id="demo-color-picker-palette"/>
          </div>
        </div>
      </div>
    </li>
  </ul>
</div>

var colorPickerPalette = app.colorPicker.create({
  inputEl: '#demo-color-picker-palette',
  targetEl: '#demo-color-picker-palette-value',
  targetElSetBackgroundColor: true,
  modules: ['palette'],
  openIn: 'auto',
  openInPhone: 'sheet',
  palette: [
    ['#FFEBEE', '#FFCDD2', '#EF9A9A', '#E57373', '#EF5350', '#F44336', '#E53935', '#D32F2F', '#C62828', '#B71C1C'],
    ['#F3E5F5', '#E1BEE7', '#CE93D8', '#BA68C8', '#AB47BC', '#9C27B0', '#8E24AA', '#7B1FA2', '#6A1B9A', '#4A148C'],
    ['#E8EAF6', '#C5CAE9', '#9FA8DA', '#7986CB', '#5C6BC0', '#3F51B5', '#3949AB', '#303F9F', '#283593', '#1A237E'],
    ['#E1F5FE', '#B3E5FC', '#81D4FA', '#4FC3F7', '#29B6F6', '#03A9F4', '#039BE5', '#0288D1', '#0277BD', '#01579B'],
    ['#E0F2F1', '#B2DFDB', '#80CBC4', '#4DB6AC', '#26A69A', '#009688', '#00897B', '#00796B', '#00695C', '#004D40'],
    ['#F1F8E9', '#DCEDC8', '#C5E1A5', '#AED581', '#9CCC65', '#8BC34A', '#7CB342', '#689F38', '#558B2F', '#33691E'],
    ['#FFFDE7', '#FFF9C4', '#FFF59D', '#FFF176', '#FFEE58', '#FFEB3B', '#FDD835', '#FBC02D', '#F9A825', '#F57F17'],
    ['#FFF3E0', '#FFE0B2', '#FFCC80', '#FFB74D', '#FFA726', '#FF9800', '#FB8C00', '#F57C00', '#EF6C00', '#E65100'],
  ],
  value: {
    hex: '#FFEBEE',
  },
  formatValue: function (value) {
    return value.hex;
  },
});

Pro Mode

<div class="list no-hairlines-md">
  <ul>
    <li>
      <div class="item-content item-input">
        <div class="item-media">
          <i class="icon demo-list-icon" id="demo-color-picker-pro-value"></i>
        </div>
        <div class="item-inner">
          <div class="item-input-wrap">
            <input type="text" placeholder="Color" readonly="readonly" id="demo-color-picker-pro"/>
          </div>
        </div>
      </div>
    </li>
  </ul>
</div>

var colorPickerRgbPro = app.colorPicker.create({
  inputEl: '#demo-color-picker-pro',
  targetEl: '#demo-color-picker-pro-value',
  targetElSetBackgroundColor: true,
  modules: ['initial-current-colors', 'sb-spectrum', 'hsb-sliders', 'rgb-sliders', 'alpha-slider', 'hex', 'palette'],
  openIn: 'auto',
  sliderValue: true,
  sliderValueEditable: true,
  sliderLabel: true,
  hexLabel: true,
  hexValueEditable: true,
  groupedModules: true,
  palette: [
    ['#FFEBEE', '#FFCDD2', '#EF9A9A', '#E57373', '#EF5350', '#F44336', '#E53935', '#D32F2F', '#C62828', '#B71C1C'],
    ['#F3E5F5', '#E1BEE7', '#CE93D8', '#BA68C8', '#AB47BC', '#9C27B0', '#8E24AA', '#7B1FA2', '#6A1B9A', '#4A148C'],
    ['#E8EAF6', '#C5CAE9', '#9FA8DA', '#7986CB', '#5C6BC0', '#3F51B5', '#3949AB', '#303F9F', '#283593', '#1A237E'],
    ['#E1F5FE', '#B3E5FC', '#81D4FA', '#4FC3F7', '#29B6F6', '#03A9F4', '#039BE5', '#0288D1', '#0277BD', '#01579B'],
    ['#E0F2F1', '#B2DFDB', '#80CBC4', '#4DB6AC', '#26A69A', '#009688', '#00897B', '#00796B', '#00695C', '#004D40'],
    ['#F1F8E9', '#DCEDC8', '#C5E1A5', '#AED581', '#9CCC65', '#8BC34A', '#7CB342', '#689F38', '#558B2F', '#33691E'],
    ['#FFFDE7', '#FFF9C4', '#FFF59D', '#FFF176', '#FFEE58', '#FFEB3B', '#FDD835', '#FBC02D', '#F9A825', '#F57F17'],
    ['#FFF3E0', '#FFE0B2', '#FFCC80', '#FFB74D', '#FFA726', '#FF9800', '#FB8C00', '#F57C00', '#EF6C00', '#E65100'],
  ],
  formatValue: function (value) {
    return 'rgba(' + value.rgba.join(', ') + ')';
  },
  value: {
    hex: '#00ffff',
  },
});

Inline Color Picker

<div class="block block-strong no-padding">
  <div id="demo-color-picker-inline"></div>
</div>

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