diff --git a/addons/website_slides/data/slide_channel_tag_demo.xml b/addons/website_slides/data/slide_channel_tag_demo.xml
index aa4d31c33e7..cf522d9877d 100644
--- a/addons/website_slides/data/slide_channel_tag_demo.xml
+++ b/addons/website_slides/data/slide_channel_tag_demo.xml
@@ -6,14 +6,17 @@
     </record>
     <record id="slide_channel_tag_level_basic" model="slide.channel.tag">
         <field name="name">Basic</field>
+        <field name="color">10</field>
         <field name="group_id" ref="website_slides.slide_channel_tag_group_level"/>
     </record>
     <record id="slide_channel_tag_level_intermediate" model="slide.channel.tag">
         <field name="name">Intermediate</field>
+        <field name="color">3</field>
         <field name="group_id" ref="website_slides.slide_channel_tag_group_level"/>
     </record>
     <record id="slide_channel_tag_level_advanced" model="slide.channel.tag">
         <field name="name">Advanced</field>
+        <field name="color">1</field>
         <field name="group_id" ref="website_slides.slide_channel_tag_group_level"/>
     </record>
 
@@ -23,14 +26,17 @@
     </record>
     <record id="slide_channel_tag_role_gardener" model="slide.channel.tag">
         <field name="name">Gardener</field>
+        <field name="color">10</field>
         <field name="group_id" ref="website_slides.slide_channel_tag_group_role"/>
     </record>
     <record id="slide_channel_tag_role_carpenter" model="slide.channel.tag">
         <field name="name">Carpenter</field>
+        <field name="color">11</field>
         <field name="group_id" ref="website_slides.slide_channel_tag_group_role"/>
     </record>
     <record id="slide_channel_tag_role_furniture" model="slide.channel.tag">
         <field name="name">Furniture Designer</field>
+        <field name="color">3</field>
         <field name="group_id" ref="website_slides.slide_channel_tag_group_role"/>
     </record>
 
@@ -40,10 +46,11 @@
     </record>
     <record id="slide_channel_tag_other_1" model="slide.channel.tag">
         <field name="name">Certification</field>
+        <field name="color">7</field>
         <field name="group_id" ref="website_slides.slide_channel_tag_group_data_other"/>
     </record>
     <record id="slide_channel_tag_other_2" model="slide.channel.tag">
         <field name="name">Dog Friendly</field>
         <field name="group_id" ref="website_slides.slide_channel_tag_group_data_other"/>
     </record>
-</data></odoo>
\ No newline at end of file
+</data></odoo>
diff --git a/addons/website_slides/models/slide_channel_tag.py b/addons/website_slides/models/slide_channel_tag.py
index a6abfd4c38f..67c62cf742d 100644
--- a/addons/website_slides/models/slide_channel_tag.py
+++ b/addons/website_slides/models/slide_channel_tag.py
@@ -30,3 +30,4 @@ class SlideChannelTag(models.Model):
         'Group sequence', related='group_id.sequence',
         index=True, readonly=True, store=True)
     channel_ids = fields.Many2many('slide.channel', 'slide_channel_tag_rel', 'tag_id', 'channel_id', string='Channels')
+    color = fields.Integer(string='Color Index', help="Color to apply to this tag (including in website).")
diff --git a/addons/website_slides/static/src/scss/website_slides.scss b/addons/website_slides/static/src/scss/website_slides.scss
index fdff5ace23d..815ae9aa050 100644
--- a/addons/website_slides/static/src/scss/website_slides.scss
+++ b/addons/website_slides/static/src/scss/website_slides.scss
@@ -58,6 +58,36 @@ $o-wslides-fs-side-width: 300px;
     }
 }
 
+// Color tags according to assigned background color.
+.o_wslides_channel_tag {
+    vertical-align: middle;
+    @for $size from 1 through length($o-colors) {
+        &.o_tag_color_#{$size - 1} {
+            $background-color: white;
+            // no color selected
+            @if $size == 1 {
+                & {
+                    color: black;
+                    background-color: $background-color;
+                    box-shadow: inset 0 0 0 1px nth($o-colors, $size);
+                }
+            } @else {
+                $background-color: nth($o-colors, $size);
+                & {
+                    color: white;
+                    background-color: $background-color;
+                }
+            }
+            @at-root a#{&} {
+                &:hover {
+                    color: color-yiq($background-color);
+                    background-color: darken($background-color, 10%);
+                }
+            }
+        }
+    }
+}
+
 .o_wslides_body {
     background-color: $o-wslides-color-bg;
 
diff --git a/addons/website_slides/views/slide_channel_tag_views.xml b/addons/website_slides/views/slide_channel_tag_views.xml
index b30738f5d06..b4c4e9ab12e 100644
--- a/addons/website_slides/views/slide_channel_tag_views.xml
+++ b/addons/website_slides/views/slide_channel_tag_views.xml
@@ -74,6 +74,7 @@
                                     <field name="sequence" widget="handle"/>
                                     <field name="group_sequence" invisible="1"/>
                                     <field name="name" string="Tag Name"/>
+                                    <field name="color" string="Color" widget="color_picker"/>
                                     <control>
                                         <create string="Add a tag"/>
                                     </control>
diff --git a/addons/website_slides/views/slide_channel_views.xml b/addons/website_slides/views/slide_channel_views.xml
index a0922b398fe..c2df312e124 100644
--- a/addons/website_slides/views/slide_channel_views.xml
+++ b/addons/website_slides/views/slide_channel_views.xml
@@ -57,7 +57,7 @@
                         </div>
                         <div>
                             <field name="active" invisible="1"/>
-                            <field name="tag_ids" widget="many2many_tags" placeholder="Tags"/>
+                            <field name="tag_ids" widget="many2many_tags" options="{'color_field': 'color'}" placeholder="Tags"/>
                         </div>
                         <notebook colspan="4">
                             <page name="content" string="Content">
diff --git a/addons/website_slides/views/website_slides_templates_course.xml b/addons/website_slides/views/website_slides_templates_course.xml
index 5fe76ff83fc..75396abceb0 100644
--- a/addons/website_slides/views/website_slides_templates_course.xml
+++ b/addons/website_slides/views/website_slides_templates_course.xml
@@ -196,7 +196,7 @@
                                     <div class="mb-2 pt-1">
                                         <t t-if="channel.tag_ids">
                                             <t t-foreach="channel.tag_ids" t-as="channel_tag">
-                                                <span t-attf-class="badge badge-primary" t-esc="channel_tag.name"/>
+                                                <span t-attf-class="badge o_wslides_channel_tag #{'o_tag_color_'+str(channel_tag.color)}" t-esc="channel_tag.name"/>
                                             </t>
                                         </t>
                                         <a t-if="channel.can_upload"
@@ -593,7 +593,7 @@
             <div class="mb-2 pt-1 text-left col">
                 <t t-if="channel.tag_ids">
                     <t t-foreach="channel.tag_ids" t-as="channel_tag">
-                        <span t-attf-class="badge badge-primary" t-esc="channel_tag.name"/>
+                        <span t-attf-class="badge o_wslides_channel_tag #{'o_tag_color_'+str(channel_tag.color)}" t-esc="channel_tag.name"/>
                     </t>
                 </t>
                 <a t-if="channel.can_upload"
diff --git a/addons/website_slides/views/website_slides_templates_homepage.xml b/addons/website_slides/views/website_slides_templates_homepage.xml
index 19b35ed6e69..1389aeda8a5 100644
--- a/addons/website_slides/views/website_slides_templates_homepage.xml
+++ b/addons/website_slides/views/website_slides_templates_homepage.xml
@@ -360,7 +360,12 @@
                 <div class="font-weight-light o_wslides_desc_truncate_3" t-field="channel.description_short"/>
                 <div t-if="channel.tag_ids" class="mt-2 pt-1 o_wslides_desc_truncate_2">
                     <t t-foreach="channel.tag_ids" t-as="tag">
-                        <a t-att-href="'/slides/all?%s' % keep_query('*', tags=str((tag | search_tags).ids))" t-attf-class="badge #{'badge-primary' if tag in search_tags else 'badge-light'}" t-esc="tag.name"/>
+                        <t t-if="search_tags">
+                            <a t-att-href="'/slides/all?%s' % keep_query('*', tags=str((tag | search_tags).ids))" t-attf-class="badge #{'badge-primary' if tag in search_tags else 'o_wslides_channel_tag o_tag_color_0'}" t-esc="tag.name"/>
+                        </t>
+                        <t t-else="">
+                            <a t-att-href="'/slides/all?%s' % keep_query('*', tags=str((tag | search_tags).ids))" t-attf-class="badge o_wslides_channel_tag #{'o_tag_color_'+str(tag.color)}" t-esc="tag.name"/>
+                        </t>
                     </t>
                 </div>
             </div>
diff --git a/addons/website_slides/views/website_slides_templates_profile.xml b/addons/website_slides/views/website_slides_templates_profile.xml
index e310abf9b30..d1a5a3f60e4 100644
--- a/addons/website_slides/views/website_slides_templates_profile.xml
+++ b/addons/website_slides/views/website_slides_templates_profile.xml
@@ -50,7 +50,7 @@
 
                             <div class="overflow-hidden mb-1" style="height:24px">
                                 <t t-foreach="course.channel_id.tag_ids" t-as="tag">
-                                    <a t-att-href="'/slides/all?channel_tag_id=%s' % tag.id" class="badge badge-light" t-esc="tag.name"/>
+                                    <a t-att-href="'/slides/all?channel_tag_id=%s' % tag.id" t-attf-class="badge o_wslides_channel_tag #{'o_tag_color_'+str(tag.color)}" t-esc="tag.name"/>
                                 </t>
                             </div>