diff --git a/app/assets/javascripts/forms.js.coffee b/app/assets/javascripts/forms.js.coffee
index 65fe1d719..1bda27b2e 100644
--- a/app/assets/javascripts/forms.js.coffee
+++ b/app/assets/javascripts/forms.js.coffee
@@ -24,11 +24,16 @@ App.Forms =
     )
 
   synchronizeInputs: ->
-    $("[name='progress_bar[percentage]']").on
+    progress_bar = "[name='progress_bar[percentage]']"
+    process_background = "[name='legislation_process[background_color]']"
+    process_font = "[name='legislation_process[font_color]']"
+
+    inputs = $("#{progress_bar}, #{process_background}, #{process_font}")
+    inputs.on
       input: ->
         $("[name='#{this.name}']").val($(this).val())
 
-    $("[name='progress_bar[percentage]'][type='range']").trigger("input")
+    inputs.trigger("input")
 
   hideOrShowFieldsAfterSelection: ->
     $("[name='progress_bar[kind]']").on
diff --git a/app/views/admin/legislation/processes/_form.html.erb b/app/views/admin/legislation/processes/_form.html.erb
index 86c419b07..952b78cdd 100644
--- a/app/views/admin/legislation/processes/_form.html.erb
+++ b/app/views/admin/legislation/processes/_form.html.erb
@@ -213,26 +213,32 @@
     <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, nil, for: "background_color_input" %>
+    <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",
+                                            id: "background_color_input" %>
       </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, nil, for: "font_color_input" %>
+    <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",
+                                      id: "font_color_input" %>
       </div>
     </div>
   </div>
diff --git a/config/locales/en/activerecord.yml b/config/locales/en/activerecord.yml
index 302938c17..edbe05ad6 100644
--- a/config/locales/en/activerecord.yml
+++ b/config/locales/en/activerecord.yml
@@ -244,6 +244,8 @@ en:
         allegations_start_date: Allegations start date
         allegations_end_date: Allegations end date
         result_publication_date: Final result publication date
+        background_color: Background color
+        font_color: Font color
       legislation/process/translation:
         title: Process Title
         summary: Summary
diff --git a/config/locales/en/admin.yml b/config/locales/en/admin.yml
index f9f0616d3..40c9c3dbb 100644
--- a/config/locales/en/admin.yml
+++ b/config/locales/en/admin.yml
@@ -439,8 +439,7 @@ en:
           homepage_description: Here you can explain the content of the process
           homepage_enabled: Homepage enabled
           banner_title: Header colors
-          banner_background_color: Background colour
-          banner_font_color: Font colour
+          color_help: Hexadecimal format
         index:
           create: New process
           delete: Delete
diff --git a/config/locales/es/activerecord.yml b/config/locales/es/activerecord.yml
index fbd957971..f0997135d 100644
--- a/config/locales/es/activerecord.yml
+++ b/config/locales/es/activerecord.yml
@@ -244,6 +244,8 @@ es:
         allegations_start_date: Fecha de inicio de alegaciones
         allegations_end_date: Fecha de fin de alegaciones
         result_publication_date: Fecha de publicación del resultado final
+        background_color: Color del fondo
+        font_color: Color del texto
       legislation/process/translation:
         title: Título del proceso
         summary: Resumen
diff --git a/config/locales/es/admin.yml b/config/locales/es/admin.yml
index 0ae574f4b..ce8da4975 100644
--- a/config/locales/es/admin.yml
+++ b/config/locales/es/admin.yml
@@ -440,8 +440,7 @@ es:
           homepage_description: Aquí puedes explicar el contenido del proceso
           homepage_enabled: Homepage activada
           banner_title: Colores del encabezado
-          banner_background_color: Color de fondo
-          banner_font_color: Color del texto
+          color_help: Formato hexadecimal
         index:
           create: Nuevo proceso
           delete: Borrar