diff --git a/muk_web_utils/__manifest__.py b/muk_web_utils/__manifest__.py
index 734a716..02be89f 100644
--- a/muk_web_utils/__manifest__.py
+++ b/muk_web_utils/__manifest__.py
@@ -20,7 +20,7 @@
 { 
     "name": "MuK Web Utils",
     "summary": """Utility Features""",
-    "version": "12.0.2.6.0",
+    "version": "12.0.2.7.0",
     "category": "Extra Tools",
     "license": "AGPL-3",
     "author": "MuK IT",
diff --git a/muk_web_utils/doc/changelog.rst b/muk_web_utils/doc/changelog.rst
index c61955c..748458c 100644
--- a/muk_web_utils/doc/changelog.rst
+++ b/muk_web_utils/doc/changelog.rst
@@ -1,3 +1,8 @@
+`2.7.0`
+-------
+
+- Added color index field widget
+
 `2.6.0`
 -------
 
diff --git a/muk_web_utils/static/src/js/fields/color.js b/muk_web_utils/static/src/js/fields/color.js
index a68cb98..d5c3fe8 100644
--- a/muk_web_utils/static/src/js/fields/color.js
+++ b/muk_web_utils/static/src/js/fields/color.js
@@ -17,7 +17,7 @@
 *
 **********************************************************************************/
 
-odoo.define('muk_web_utils.ColorChar', function (require) {
+odoo.define('muk_web_utils.color', function (require) {
 "use strict";
 
 var core = require('web.core');
@@ -25,6 +25,8 @@ var fields = require('web.basic_fields');
 var registry = require('web.field_registry');
 var colorpicker = require('web.colorpicker');
 
+var AbstractField = require('web.AbstractField');
+
 var _t = core._t;
 var QWeb = core.qweb;
 
@@ -63,7 +65,7 @@ var FieldColor = fields.InputField.extend({
     	if((/(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i).test(value)) {
     		return value;
     	} else {
-    		throw new Error(_.str.sprintf(core._t("'%s' is not a correct color value"), value));
+    		throw new Error(_.str.sprintf(_t("'%s' is not a correct color value"), value));
     	}
     },
     _onCustomColorButtonClick: function () {
@@ -79,7 +81,43 @@ var FieldColor = fields.InputField.extend({
     },
 });
 
+var FieldColorIndex = AbstractField.extend({
+    events: _.extend({}, AbstractField.prototype.events, {
+        'change': '_onChange',
+    }),
+	template: 'muk_web_utils.FieldColorIndex',
+    supportedFieldTypes: ['integer'],
+    isSet: function () {
+    	return this.value === 0 || this._super.apply(this, arguments);
+    },
+    getFocusableElement: function () {
+        return this.$el.is('select') ? this.$el : $();
+    },
+    _renderEdit: function () {
+        this.$el.addClass('mk_color_index_' + this.value);
+        this.$('option[value="' + this.value + '"]').prop('selected', true);
+    },
+    _renderReadonly: function () {
+        this.$el.addClass('mk_color_index_' + this.value);
+        this.$el.empty().text('Color ' + this._formatValue(this.value));
+    },
+    _onChange: function (event) {
+    	this.$el.removeClass(function (index, className) {
+    	    return (className.match (/(^|\s)mk_color_index_\S+/g) || []).join(' ');
+    	});
+    	this.$el.addClass('mk_color_index_' + this.$el.val());
+    	this._setValue(this.$el.val());
+    },
+    _parseValue: function (value) {
+    	if(0 > value || value > 12) {
+    		throw new Error(_.str.sprintf(_t("'%s' is not a correct color index (0-12)"), value));
+    	} 
+    	return value;
+    },
+});
+
 registry.add('color', FieldColor);
+registry.add('color_index', FieldColorIndex);
 
 return FieldColor;
 
diff --git a/muk_web_utils/static/src/scss/color.scss b/muk_web_utils/static/src/scss/color.scss
index 51df2bf..693e7ac 100644
--- a/muk_web_utils/static/src/scss/color.scss
+++ b/muk_web_utils/static/src/scss/color.scss
@@ -39,4 +39,25 @@
 		margin-bottom: 0.25rem;
     	line-height: 1.42rem;
     }
+}
+
+span.mk_field_color_index {
+	@for $size from 1 through length($o-colors) {
+        &.mk_color_index_#{$size - 1} {
+            color: nth($o-colors, $size);
+        }
+    }
+}
+
+select.mk_field_color_index {
+	&.mk_color_index_0, .mk_color_index_0 {
+		background-color: $white ! important;
+    	color: nth($o-colors, 1) ! important;
+	}
+	@for $size from 2 through length($o-colors) {
+        &.mk_color_index_#{$size - 1}, .mk_color_index_#{$size - 1} {
+            background-color: nth($o-colors, $size) ! important;
+			color: $white ! important;
+        }
+    }
 }
\ No newline at end of file
diff --git a/muk_web_utils/static/src/xml/color.xml b/muk_web_utils/static/src/xml/color.xml
index 253e1ad..26e38e8 100644
--- a/muk_web_utils/static/src/xml/color.xml
+++ b/muk_web_utils/static/src/xml/color.xml
@@ -34,4 +34,27 @@
     </div>
 </t>
 
+<t t-name="muk_web_utils.FieldColorIndex">
+    <span t-if="widget.mode === 'readonly'" class="mk_field_color_index"/>
+    <select t-if="widget.mode !== 'readonly'"
+        class="o_input mk_field_color_index"
+        t-att-name="widget.name"
+        t-att-tabindex="widget.attrs.tabindex"
+        t-att-autofocus="widget.attrs.autofocus"
+        t-att-id="widget.idForLabel">
+        <option class="mk_color_index_0" value="0">Color 0</option>
+        <option class="mk_color_index_1" value="1">Color 1</option>
+        <option class="mk_color_index_2" value="2">Color 2</option>
+        <option class="mk_color_index_3" value="3">Color 3</option>
+        <option class="mk_color_index_4" value="4">Color 4</option>
+        <option class="mk_color_index_5" value="5">Color 5</option>
+        <option class="mk_color_index_6" value="6">Color 6</option>
+        <option class="mk_color_index_7" value="7">Color 7</option>
+        <option class="mk_color_index_8" value="8">Color 8</option>
+        <option class="mk_color_index_9" value="9">Color 9</option>
+        <option class="mk_color_index_10" value="10">Color 10</option>
+        <option class="mk_color_index_11" value="11">Color 11</option>
+	</select>
+</t>
+
 </templates>
\ No newline at end of file