diff --git a/app/views/admin/broadcast_messages/index.html.haml b/app/views/admin/broadcast_messages/index.html.haml
index c0afaf16d8faea85f727eea7280f55420f867b32..7e29311bf42c6f8d7cf8a6f18f362a11af4ef902 100644
--- a/app/views/admin/broadcast_messages/index.html.haml
+++ b/app/views/admin/broadcast_messages/index.html.haml
@@ -21,13 +21,11 @@
   .form-group.js-toggle-colors-container.hide
     = f.label :color, "Background Color", class: 'control-label'
     .col-sm-10
-      = f.text_field :color, placeholder: "#AA33EE", class: "form-control"
-      .light 6 character hex values starting with a # sign.
+      = f.color_field :color, value: "#AA33EE", class: "form-control"
   .form-group.js-toggle-colors-container.hide
     = f.label :font, "Font Color", class: 'control-label'
     .col-sm-10
-      = f.text_field :font, placeholder: "#224466", class: "form-control"
-      .light 6 character hex values starting with a # sign.
+      = f.color_field :font, value: "#224466", class: "form-control"
   .form-group
     = f.label :starts_at, class: 'control-label'
     .col-sm-10.datetime-controls
diff --git a/app/views/projects/labels/_form.html.haml b/app/views/projects/labels/_form.html.haml
index 2305fce112e23a506c0a305c0946c038df8a7fa9..ad993db6c0b584646277dfd2b5f5610a2fbc31ff 100644
--- a/app/views/projects/labels/_form.html.haml
+++ b/app/views/projects/labels/_form.html.haml
@@ -16,9 +16,9 @@
     .col-sm-10
       .input-group
         .input-group-addon.label-color-preview  
-        = f.color_field :color, placeholder: "#AA33EE", class: "form-control"
+        = f.color_field :color, value: "#AA33EE", class: "form-control"
       .help-block
-        6 character hex values starting with a # sign.
+        Choose any color.
         %br
         Or you can choose one of suggested colors below