diff --git a/demos/widget-factory/widget-factory.c b/demos/widget-factory/widget-factory.c
index af549dd8eb..9d2eab0d31 100644
--- a/demos/widget-factory/widget-factory.c
+++ b/demos/widget-factory/widget-factory.c
@@ -410,6 +410,83 @@ populate_model (GtkTreeStore *store)
                       -1);
 }
 
+static void
+populate_colors (GtkWidget *widget)
+{
+  struct { const gchar *name; const gchar *color; } colors[] = {
+    { "Red 2.5", "#C8828C" },
+    { "Red 5", "#C98286" },
+    { "Red 7.5", "#C9827F" },
+    { "Red 10", "#C98376" },
+    { "Red/Yellow 2.5", "#C8856D" },
+    { "Red/Yellow 5", "#C58764" },
+    { "Red/Yellow 7.5", "#C1895E" },
+    { "Red/Yellow 10", "#BB8C56" },
+    { "Yellow 2.5", "#B58F4F" },
+    { "Yellow 5", "#AD924B" },
+    { "Yellow 7.5", "#A79548" },
+    { "Yellow 10", "#A09749" },
+    { "Yellow/Green 2.5", "#979A4E" },
+    { "Yellow/Green 5", "#8D9C55" },
+    { "Yellow/Green 7.5", "#7F9F62" },
+    { "Yellow/Green 10", "#73A06E" },
+    { "Geen 2.5", "#65A27C" },
+    { "Green 5", "#5CA386" },
+    { "Green 7.5", "#57A38D" },
+    { "Green 10", "#52A394" },
+    { "Green/Blue 2.5", "#4EA39A" },
+    { "Green/Blue 5", "#49A3A2" },
+    { "Green/Blue 7.5", "#46A2AA" },
+    { "Green/Blue 10", "#46A1B1" },
+    { "Blue 2.5", "#49A0B8" },
+    { "Blue 5", "#529EBD" },
+    { "Blue 7.5", "#5D9CC1" },
+    { "Blue 10", "#689AC3" },
+    { "Blue/Purple 2.5", "#7597C5" },
+    { "Blue/Purple 5", "#8095C6" },
+    { "Blue/Purple 7.5", "#8D91C6" },
+    { "Blue/Purple 10", "#988EC4" },
+    { "Purple 2.5", "#A08CC1" },
+    { "Purple 5", "#A88ABD" },
+    { "Purple 7.5", "#B187B6" },
+    { "Purple 10", "#B786B0" },
+    { "Purple/Red 2.5", "#BC84A9" },
+    { "Purple/Red 5", "#C183A0" },
+    { "Purple/Red 7.5", "#C48299" },
+    { "Purple/Red 10", "#C68292" }
+  };
+  gint i;
+  GtkWidget *row, *box, *label, *swatch;
+  GdkRGBA rgba;
+
+  for (i = 0; i < G_N_ELEMENTS (colors); i++)
+    {
+      row = gtk_box_new (GTK_ORIENTATION_HORIZONTAL, 20);
+      label = gtk_label_new (colors[i].name);
+      g_object_set (label,
+                    "halign", GTK_ALIGN_START,
+                    "valign", GTK_ALIGN_CENTER,
+                    "margin", 6,
+                    "xalign", 0,
+                    NULL);
+      gtk_box_pack_start (GTK_BOX (row), label, TRUE, TRUE, 0);
+      gdk_rgba_parse (&rgba, colors[i].color);
+      swatch = g_object_new (g_type_from_name ("GtkColorSwatch"),
+                             "rgba", &rgba,
+                             "selectable", FALSE,
+                             "halign", GTK_ALIGN_END,
+                             "valign", GTK_ALIGN_CENTER,
+                             "margin", 6,
+                             "height-request", 24,
+                             NULL);
+      box = gtk_box_new (GTK_ORIENTATION_HORIZONTAL, 0);
+      gtk_container_add (GTK_CONTAINER (box), swatch);
+      gtk_box_pack_start (GTK_BOX (row), box, FALSE, FALSE, 0);
+      gtk_widget_show_all (row);
+      gtk_list_box_insert (GTK_LIST_BOX (widget), row, -1);
+    }
+}
+
 static void
 activate (GApplication *app)
 {
@@ -498,6 +575,8 @@ activate (GApplication *app)
   populate_model ((GtkTreeStore *)gtk_tree_view_get_model (GTK_TREE_VIEW (widget)));
   gtk_tree_view_expand_all (GTK_TREE_VIEW (widget));
 
+  populate_colors ((GtkWidget *)gtk_builder_get_object (builder, "munsell"));
+
   gtk_widget_show_all (GTK_WIDGET (window));
 
   g_object_unref (builder);
diff --git a/demos/widget-factory/widget-factory.ui b/demos/widget-factory/widget-factory.ui
index 8731689b32..e5bbf4d483 100644
--- a/demos/widget-factory/widget-factory.ui
+++ b/demos/widget-factory/widget-factory.ui
@@ -1895,10 +1895,7 @@ Suspendisse feugiat quam quis dolor accumsan cursus. </property>
                         <child>
                           <object class="GtkBox" id="page2box">
                             <property name="visible">True</property>
-                            <property name="margin-top">10</property>
-                            <property name="margin-bottom">10</property>
-                            <property name="margin-start">10</property>
-                            <property name="margin-end">10</property>
+                            <property name="margin">10</property>
                             <property name="spacing">20</property>
                             <child>
                               <object class="GtkLabel" id="page2note">
@@ -2811,63 +2808,109 @@ Suspendisse feugiat quam quis dolor accumsan cursus. </property>
             <child>
               <object class="GtkBox">
                 <property name="visible">True</property>
-                <property name="orientation">vertical</property>
-                <property name="margin">10</property>
+                <property name="orientation">horizontal</property>
+                <property name="border-width">16</property>
+                <property name="spacing">10</property>
                 <child>
-                  <object class="GtkScrolledWindow">
+                  <object class="GtkBox">
                     <property name="visible">True</property>
-                    <property name="hscrollbar-policy">never</property>
-                    <property name="vscrollbar-policy">always</property>
-                    <property name="height-request">300</property>
-                    <property name="halign">start</property>
-                    <property name="shadow-type">in</property>
+                    <property name="orientation">vertical</property>
+                    <property name="spacing">10</property>
+                <child>
+                  <object class="GtkBox">
+                    <property name="visible">True</property>
+                    <property name="orientation">vertical</property>
+                    <property name="spacing">4</property>
                     <child>
-                      <object class="GtkTreeView" id="charletree">
+                      <object class="GtkScrolledWindow">
                         <property name="visible">True</property>
-                        <property name="enable-grid-lines">vertical</property>
-                        <property name="enable-tree-lines">True</property>
-                        <property name="rules-hint">True</property>
-                        <property name="rubber-banding">True</property>
-                        <property name="model">charlemodel</property>
-                        <child internal-child="selection">
-                          <object class="GtkTreeSelection">
-                            <property name="mode">multiple</property>
-                          </object>
-                        </child>
+                        <property name="hscrollbar-policy">never</property>
+                        <property name="vscrollbar-policy">always</property>
+                        <property name="height-request">300</property>
+                        <property name="halign">start</property>
+                        <property name="shadow-type">in</property>
                         <child>
-                          <object class="GtkTreeViewColumn">
+                          <object class="GtkTreeView" id="charletree">
                             <property name="visible">True</property>
-                            <property name="title" translatable="yes">Name</property>
+                            <property name="enable-grid-lines">vertical</property>
+                            <property name="enable-tree-lines">True</property>
+                            <property name="rules-hint">True</property>
+                            <property name="rubber-banding">True</property>
+                            <property name="model">charlemodel</property>
+                            <child internal-child="selection">
+                              <object class="GtkTreeSelection">
+                                <property name="mode">multiple</property>
+                              </object>
+                            </child>
                             <child>
-                              <object class="GtkCellRendererText"/>
-                              <attributes>
-                                <attribute name="text">0</attribute>
-                              </attributes>
+                              <object class="GtkTreeViewColumn">
+                                <property name="visible">True</property>
+                                <property name="title" translatable="yes">Name</property>
+                                <child>
+                                  <object class="GtkCellRendererText"/>
+                                  <attributes>
+                                    <attribute name="text">0</attribute>
+                                  </attributes>
+                                </child>
+                              </object>
+                            </child>
+                            <child>
+                              <object class="GtkTreeViewColumn">
+                                <property name="visible">True</property>
+                                <property name="title" translatable="yes">Birth</property>
+                                <child>
+                                  <object class="GtkCellRendererText"/>
+                                  <attributes>
+                                    <attribute name="text">1</attribute>
+                                  </attributes>
+                                </child>
+                              </object>
+                            </child>
+                            <child>
+                              <object class="GtkTreeViewColumn">
+                                <property name="visible">True</property>
+                                <property name="title" translatable="yes">Death</property>
+                                <child>
+                                  <object class="GtkCellRendererText"/>
+                                  <attributes>
+                                    <attribute name="text">2</attribute>
+                                  </attributes>
+                                </child>
+                              </object>
                             </child>
                           </object>
                         </child>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="GtkLabel">
+                        <property name="visible">True</property>
+                        <property name="selectable">True</property>
+                        <property name="halign">start</property>
+                        <property name="use-markup">True</property>
+                        <property name="label" translatable="True"><![CDATA[<small>Data source: <a href="http://en.wikipedia.org/wiki/Charlemagne#Ancestry">Wikipedia</a></small>]]></property>
+                      </object>
+                    </child>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="GtkSeparator">
+                        <property name="visible">True</property>
+                        <property name="orientation">horizontal</property>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="GtkScrolledWindow">
+                        <property name="visible">True</property>
+                        <property name="hscrollbar-policy">never</property>
+                        <property name="vscrollbar-policy">automatic</property>
+                        <property name="halign">fill</property>
+                        <property name="vexpand">True</property>
+                        <property name="shadow-type">in</property>
                         <child>
-                          <object class="GtkTreeViewColumn">
+                          <object class="GtkListBox" id="munsell">
                             <property name="visible">True</property>
-                            <property name="title" translatable="yes">Birth</property>
-                            <child>
-                              <object class="GtkCellRendererText"/>
-                              <attributes>
-                                <attribute name="text">1</attribute>
-                              </attributes>
-                            </child>
-                          </object>
-                        </child>
-                        <child>
-                          <object class="GtkTreeViewColumn">
-                            <property name="visible">True</property>
-                            <property name="title" translatable="yes">Death</property>
-                            <child>
-                              <object class="GtkCellRendererText"/>
-                              <attributes>
-                                <attribute name="text">2</attribute>
-                              </attributes>
-                            </child>
+                            <property name="selection-mode">single</property>
                           </object>
                         </child>
                       </object>
@@ -2875,13 +2918,9 @@ Suspendisse feugiat quam quis dolor accumsan cursus. </property>
                   </object>
                 </child>
                 <child>
-                  <object class="GtkLabel">
+                  <object class="GtkSeparator">
                     <property name="visible">True</property>
-                    <property name="selectable">True</property>
-                    <property name="halign">start</property>
-                    <property name="margin-top">6</property>
-                    <property name="use-markup">True</property>
-                    <property name="label" translatable="True"><![CDATA[<small>Data source: <a href="http://en.wikipedia.org/wiki/Charlemagne#Ancestry">Wikipedia</a></small>]]></property>
+                    <property name="orientation">vertical</property>
                   </object>
                 </child>
                 <child>