Add colorblock to select2 (4.0.2) multi-select

I store Hex colorcodes in my database . What i like to achieve is this (Or something similar): http://i.stack.imgur.com/2PbXj.png

http://i.stack.imgur.com/3SNP0.png

In a normal multiselect i can do something like this:

    <div class="col-sm-10">
    <select id="colors" name="colors[]" multiple class="form-control">
      @foreach($colors as $key => $color)
        <option value="{{$key}}" style="background-color:{{$color->code}}"></option>
      @endforeach
     </select>
    </div>

But when using the Select2 - plugin, the styles get overwritten. I also tried to add a span or div inside the select-option like so:

<option value="{{$key}}"><span style="background-color:{{$color->code}}"></span>{{$color->code}}</option>

But this also gets overwritten.

I found this example -> https://select2.github.io/examples.html#templating in the documentation, but i am not really sure how to adapt it to use with laravel

    function formatState (state) {
      if (!state.id) { return state.text; }
      var $state = $(
        '<span><img src="vendor/images/flags/' + state.element.value.toLowerCase() + '.png" class="img-flag" /> ' + state.text + '</span>'
      );
      return $state;
    };

    $(".js-example-templating").select2({
      templateResult: formatState
    });

    ```

Select 2 Version : 4.0.2