diff --git a/app/views/admin/legislation/processes/_form.html.erb b/app/views/admin/legislation/processes/_form.html.erb
index 86c419b07..d691f1016 100644
--- a/app/views/admin/legislation/processes/_form.html.erb
+++ b/app/views/admin/legislation/processes/_form.html.erb
@@ -213,26 +213,28 @@
     <h3><%= t("admin.legislation.processes.form.banner_title") %></h3>
   </div>
 
-  <div class="small-3 column">
-    <%= f.label :sections, t("admin.legislation.processes.form.banner_background_color") %>
+  <div class="small-6 large-3 column">
+    <%= f.label :background_color %>
+    <p class="help-text"><%= t("admin.legislation.processes.form.color_help") %></p>
     <div class="row collapse">
-      <div class="small-6 column">
-        <%= color_field(:process, :background_color) %>
+      <div class="small-12 medium-6 column">
+        <%= f.text_field :background_color, label: false, type: :color %>
       </div>
-      <div class="small-6 column">
-        <%= f.text_field :background_color, label: false %>
+      <div class="small-12 medium-6 column">
+        <%= f.text_field :background_color, label: false, placeholder: "#e7f2fc" %>
       </div>
     </div>
   </div>
 
-  <div class="small-3 column end">
-    <%= f.label :sections, t("admin.legislation.processes.form.banner_font_color") %>
+  <div class="small-6 large-3 column end">
+    <%= f.label :font_color %>
+    <p class="help-text"><%= t("admin.legislation.processes.form.color_help") %></p>
     <div class="row collapse">
-      <div class="small-6 column">
-        <%= color_field(:process, :font_color) %>
+      <div class="small-12 medium-6 column">
+        <%= f.text_field :font_color, label: false, type: :color %>
       </div>
-      <div class="small-6 column">
-        <%= f.text_field :font_color, label: false %>
+      <div class="small-12 medium-6 column">
+        <%= f.text_field :font_color, label: false, placeholder: "#222222" %>
       </div>
     </div>
   </div>
diff --git a/config/locales/en/admin.yml b/config/locales/en/admin.yml
index 7ee184a37..40c9c3dbb 100644
--- a/config/locales/en/admin.yml
+++ b/config/locales/en/admin.yml
@@ -439,6 +439,7 @@ en:
           homepage_description: Here you can explain the content of the process
           homepage_enabled: Homepage enabled
           banner_title: Header colors
+          color_help: Hexadecimal format
         index:
           create: New process
           delete: Delete
diff --git a/config/locales/es/admin.yml b/config/locales/es/admin.yml
index 1eff5d4d3..ce8da4975 100644
--- a/config/locales/es/admin.yml
+++ b/config/locales/es/admin.yml
@@ -440,6 +440,7 @@ es:
           homepage_description: Aquí puedes explicar el contenido del proceso
           homepage_enabled: Homepage activada
           banner_title: Colores del encabezado
+          color_help: Formato hexadecimal
         index:
           create: Nuevo proceso
           delete: Borrar