diff --git a/src/core/courses/components/course-progress/core-courses-course-progress.html b/src/core/courses/components/course-progress/core-courses-course-progress.html
index fb870dbba..646d9edcb 100644
--- a/src/core/courses/components/course-progress/core-courses-course-progress.html
+++ b/src/core/courses/components/course-progress/core-courses-course-progress.html
@@ -1,5 +1,5 @@
-<ion-card [attr.course-color]="course.id % 10">
-    <div (click)="openCourse(course)" class="core-course-thumb" [class.core-course-color-img]="course.courseImage">
+<ion-card [attr.course-color]="course.color ? null : course.colorNumber">
+    <div (click)="openCourse(course)" class="core-course-thumb" [class.core-course-color-img]="course.courseImage" [style.background-color]="course.color">
         <img *ngIf="course.courseImage" [src]="course.courseImage" core-external-content alt=""/>
     </div>
     <ion-item tappable text-wrap detail-none (click)="openCourse(course)" [title]="course.displayname || course.fullname" class="core-course-link" [class.item-disabled]="course.visible == 0" [class.core-course-more-than-title]="(course.progress != null && course.progress >= 0)">
diff --git a/src/core/courses/components/course-progress/course-progress.scss b/src/core/courses/components/course-progress/course-progress.scss
index ef274566e..a5f0f750a 100644
--- a/src/core/courses/components/course-progress/course-progress.scss
+++ b/src/core/courses/components/course-progress/course-progress.scss
@@ -21,6 +21,7 @@ ion-app.app-root core-courses-course-progress {
             position: relative;
             background-position: center;
             background-size: cover;
+            @include core-transition(all, 50ms);
 
             &.core-course-color-img {
                 background: white;
diff --git a/src/core/courses/providers/helper.ts b/src/core/courses/providers/helper.ts
index 33d4ca571..b918d3b1c 100644
--- a/src/core/courses/providers/helper.ts
+++ b/src/core/courses/providers/helper.ts
@@ -15,6 +15,7 @@
 import { Injectable } from '@angular/core';
 import { PopoverController } from 'ionic-angular';
 import { CoreUtilsProvider } from '@providers/utils/utils';
+import { CoreSitesProvider } from '@providers/sites';
 import { CoreCoursesProvider } from './courses';
 import { AddonCourseCompletionProvider } from '@addon/coursecompletion/providers/coursecompletion';
 import { TranslateService } from '@ngx-translate/core';
@@ -26,11 +27,12 @@ import { CoreCoursePickerMenuPopoverComponent } from '@components/course-picker-
 @Injectable()
 export class CoreCoursesHelperProvider {
 
-    constructor(private coursesProvider: CoreCoursesProvider,
-            private utils: CoreUtilsProvider,
-            private courseCompletionProvider: AddonCourseCompletionProvider,
-            private translate: TranslateService,
-            private popoverCtrl: PopoverController) { }
+    constructor(protected coursesProvider: CoreCoursesProvider,
+            protected utils: CoreUtilsProvider,
+            protected courseCompletionProvider: AddonCourseCompletionProvider,
+            protected translate: TranslateService,
+            protected popoverCtrl: PopoverController,
+            protected sitesProvider: CoreSitesProvider) { }
 
     /**
      * Get the courses to display the course picker popover. If a courseId is specified, it will also return its categoryId.
@@ -105,10 +107,22 @@ export class CoreCoursesHelperProvider {
             return Promise.resolve();
         }
 
-        const promises = [];
-        let coursesInfo = [];
+        let coursesInfo = [],
+            courseInfoAvailable = false;
 
-        let courseInfoAvalaible = false;
+        const site = this.sitesProvider.getCurrentSite(),
+            promises = [],
+            colors = [];
+
+        if (site.isVersionGreaterEqualThan('3.8')) {
+            promises.push(site.getConfig().then((configs) => {
+                for (let x = 0; x < 10; x++) {
+                    colors[x] = configs['core_admin_coursecolor' + (x + 1)] || null;
+                }
+            }).catch(() => {
+                // Ignore errors.
+            }));
+        }
 
         if (this.coursesProvider.isGetCoursesByFieldAvailable() && (loadCategoryNames ||
                 (typeof courses[0].overviewfiles == 'undefined' && typeof courses[0].displayname == 'undefined'))) {
@@ -116,7 +130,7 @@ export class CoreCoursesHelperProvider {
                 return course.id;
             }).join(',');
 
-            courseInfoAvalaible = true;
+            courseInfoAvailable = true;
 
             // Get the extra data for the courses.
             promises.push(this.coursesProvider.getCoursesByField('ids', courseIds).then((coursesInfos) => {
@@ -126,7 +140,11 @@ export class CoreCoursesHelperProvider {
 
         return Promise.all(promises).then(() => {
             courses.forEach((course) => {
-                this.loadCourseExtraInfo(course, courseInfoAvalaible ? coursesInfo[course.id] : course, loadCategoryNames);
+                this.loadCourseExtraInfo(course, courseInfoAvailable ? coursesInfo[course.id] : course, loadCategoryNames);
+                if (!course.courseImage) {
+                    course.colorNumber = course.id % 10;
+                    course.color = colors[course.colorNumber];
+                }
             });
         });
     }