Ionic select input of colours

Question

I am trying to add a select input of colours. The colours that I want to add as options are the following: http://ionicframework.com/docs/components/#header How can I write the select so that when the user selects a colour, he sees the option as the colour and not as the name of colour?

This is what I have now, it is acceptable when running in browser but when I run from phone, the background colour is not visible and the user only sees the name of the colour:

   <select ng-model="category.colour" required>
                    <option selected style="background-color: white" class="light">light</option>
                    <option style="background-color: cornsilk" class="stable">stable</option>
                    <option style="background-color: DodgerBlue " class="positive">positive</option>
                    <option style="background-color: aqua" class="calm">calm</option>
                    <option style="background-color: YellowGreen" class="balanced">balanced</option>
                    <option style="background-color: Gold" class="energized">energized</option>
                    <option style="background-color: Crimson " class="assertive">assertive</option>
                    <option style="background-color: BlueViolet " class="royal">royal</option>
                    <option style="background-color: black" class="dark">dark</option>
                </select> 

Answer 1

I've implemented color and image selector with the latest version of ionic and using ion-select.

You can read a brief explanation at https://forum.ionicframework.com/t/ionic-select-list-option-with-flag-image/90972/10

The git repository is: https://github.com/ketanyekale/ionic-color-and-image-selector