{#=== Options ============================================================================#}

{% set attr_opt = {
class:              field.class|default(''),
name_id:            key,
required:           field.required|default(false),
readonly:           field.readonly|default(false),
type:               field.hidden ? 'hidden' : 'text',
'data-format':      field.format|default('rgba'),
'data-inline':      field.inline ? 'true' : 'false',
'data-horizontal':  field.horizontal ? 'true' : 'false',
'data-align':       field.align|default('left')
}%}

{#=== FIELDSET ============================================================================#}

<fieldset class="bootstrap-colorpicker">
    <div class="col-sm-12">
        <div>
            <label class="control-label">{{field.label|default(key)}}</label>
        </div>
        <input {{ macro.attr(attr_opt) }} data-container=".{{key}}container" value="{{ context.content.get(key)|default('rgba(0,0,0,1)') }}" data-color="{{ context.content.get(key)|default('rgba(0,0,0,1)') }}"/>
        <div class="{{key}}container"></div>
        <script type="text/javascript">
            $(document).ready(function() {
                $('#{{ key }}').colorpicker().on('changeColor.colorpicker', function(event){
                  $(this).val(event.color);
                }).colorpicker('setValue', '{{ context.content.get(key)|default('rgba(0,0,0,1)') }}');
            })
        </script>
    </div>
</fieldset>

{#=== Options ============================================================================#}

{% set attr_opt = {
class:              field.class|default(''),
id:                 key,
name:               name,
required:           field.required|default(false),
readonly:           field.readonly|default(false),
type:               field.hidden ? 'hidden' : 'text',
'data-format':      field.format|default('rgba'),
'data-inline':      field.inline ? 'true' : 'false',
'data-horizontal':  field.horizontal ? 'true' : 'false',
'data-align':       field.align|default('left')
}%}

{#=== FIELDSET ============================================================================#}

<fieldset class="bootstrap-colorpicker">
    <div class="col-sm-12">
        <div>
            <label class="control-label">{{field.label|default(key)}}</label>
        </div>
        <input {{ macro.attr(attr_opt) }} data-container=".{{key}}container" value="{{ context.content.get(contentkey)|default('rgba(0,0,0,1)') }}" data-color="{{ context.content.get(contentkey)|default('rgba(0,0,0,1)') }}"/>
        <div class="{{key}}container"></div>
        <script type="text/javascript">
            $(document).ready(function() {
                $('#{{ key }}').colorpicker().on('changeColor.colorpicker', function(event){
                  $(this).val(event.color);
                }).colorpicker('setValue', '{{ context.content.get(contentkey)|default('rgba(0,0,0,1)') }}');
            })
        </script>
    </div>
</fieldset>

Fix when used in templatefields
Fix when used in templatefields