diff --git a/umap/static/umap/js/modules/browser.js b/umap/static/umap/js/modules/browser.js
index 2f9a8741..a5ef3c36 100644
--- a/umap/static/umap/js/modules/browser.js
+++ b/umap/static/umap/js/modules/browser.js
@@ -37,7 +37,7 @@ export default class Browser {
       ? U.Icon.prototype.formatUrl(feature._getIconUrl(), feature)
       : null
     title.textContent = feature.getDisplayName() || '—'
-    const bgcolor = feature.getDynamicOption(feature.staticOptions.mainColor)
+    const bgcolor = feature.getPreviewColor()
     colorBox.style.backgroundColor = bgcolor
     if (symbol && symbol !== U.SCHEMA.iconUrl.default) {
       const icon = U.Icon.makeIconElement(symbol, colorBox)
diff --git a/umap/static/umap/js/umap.features.js b/umap/static/umap/js/umap.features.js
index df355a9a..191fa638 100644
--- a/umap/static/umap/js/umap.features.js
+++ b/umap/static/umap/js/umap.features.js
@@ -1,6 +1,10 @@
 U.FeatureMixin = {
   staticOptions: { mainColor: 'color' },
 
+  getPreviewColor: function () {
+    return this.getDynamicOption(this.staticOptions.mainColor)
+  },
+
   getSyncMetadata: function () {
     return {
       subject: 'feature',
@@ -1203,6 +1207,14 @@ U.Polygon = L.Polygon.extend({
     return options
   },
 
+  getPreviewColor: function () {
+    // If user set a fillColor, use it, otherwise default to color
+    // which is usually the only one set
+    const color = this.getDynamicOption(this.staticOptions.mainColor)
+    if (color && color !== U.SCHEMA.color.default) return color
+    return this.getDynamicOption('color')
+  },
+
   getInteractionOptions: () => {
     const options = U.FeatureMixin.getInteractionOptions()
     options.push('properties._umap_options.interactive')
diff --git a/umap/static/umap/js/umap.popup.js b/umap/static/umap/js/umap.popup.js
index 411e14bd..6c4d48e1 100644
--- a/umap/static/umap/js/umap.popup.js
+++ b/umap/static/umap/js/umap.popup.js
@@ -265,7 +265,7 @@ U.PopupTemplate.OSM = U.PopupTemplate.Default.extend({
     const props = this.feature.properties
     const container = L.DomUtil.add('div')
     const title = L.DomUtil.add('h3', 'popup-title', container)
-    const color = this.feature.getDynamicOption('color')
+    const color = this.feature.getPreviewColor()
     title.style.backgroundColor = color
     const iconUrl = this.feature.getDynamicOption('iconUrl')
     const icon = U.Icon.makeIconElement(iconUrl, title)