diff --git a/docs/howto/customize-state-colors-ui.rst b/docs/howto/customize-state-colors-ui.rst
new file mode 100644
index 00000000000..c8569503a5b
--- /dev/null
+++ b/docs/howto/customize-state-colors-ui.rst
@@ -0,0 +1,70 @@
+ .. Licensed to the Apache Software Foundation (ASF) under one
+    or more contributor license agreements.  See the NOTICE file
+    distributed with this work for additional information
+    regarding copyright ownership.  The ASF licenses this file
+    to you under the Apache License, Version 2.0 (the
+    "License"); you may not use this file except in compliance
+    with the License.  You may obtain a copy of the License at
+
+ ..   http://www.apache.org/licenses/LICENSE-2.0
+
+ .. Unless required by applicable law or agreed to in writing,
+    software distributed under the License is distributed on an
+    "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+    KIND, either express or implied.  See the License for the
+    specific language governing permissions and limitations
+    under the License.
+
+Customizing state colours in UI
+===============================
+
+.. versionadded:: 1.10.11
+
+To change the colors for TaskInstance/DagRun State in the Airflow Webserver, perform the
+following steps:
+
+1.  Create ``airflow_local_settings.py`` file and put in on ``$PYTHONPATH`` or
+    to ``$AIRFLOW_HOME/config`` folder. (Airflow adds ``$AIRFLOW_HOME/config`` on ``PYTHONPATH`` when
+    Airflow is initialized)
+
+2.  Add the following contents to ``airflow_local_settings.py`` file. Change the colors to whatever you
+    would like.
+
+    .. code-block:: python
+
+      STATE_COLORS = {
+        "queued": 'darkgray',
+        "running": '#01FF70',
+        "success": '#2ECC40',
+        "failed": 'firebrick',
+        "up_for_retry": 'yellow',
+        "up_for_reschedule": 'turquoise',
+        "upstream_failed": 'orange',
+        "skipped": 'darkorchid',
+        "scheduled": 'tan',
+      }
+
+
+
+3.  Restart Airflow Webserver.
+
+Screenshots
+-----------
+
+Before
+^^^^^^
+
+.. image:: ../img/change-ui-colors/dags-page-old.png
+
+.. image:: ../img/change-ui-colors/graph-view-old.png
+
+.. image:: ../img/change-ui-colors/tree-view-old.png
+
+After
+^^^^^^
+
+.. image:: ../img/change-ui-colors/dags-page-new.png
+
+.. image:: ../img/change-ui-colors/graph-view-new.png
+
+.. image:: ../img/change-ui-colors/tree-view-new.png
diff --git a/docs/howto/index.rst b/docs/howto/index.rst
index 387ba3b83f7..837f0f3a632 100644
--- a/docs/howto/index.rst
+++ b/docs/howto/index.rst
@@ -34,6 +34,7 @@ configuring an Airflow environment.
     set-config
     initialize-database
     operator/index
+    customize-state-colors-ui
     custom-operator
     connection/index
     write-logs
diff --git a/docs/img/change-ui-colors/dags-page-new.png b/docs/img/change-ui-colors/dags-page-new.png
new file mode 100644
index 00000000000..d2ffe1f319b
Binary files /dev/null and b/docs/img/change-ui-colors/dags-page-new.png differ
diff --git a/docs/img/change-ui-colors/dags-page-old.png b/docs/img/change-ui-colors/dags-page-old.png
new file mode 100644
index 00000000000..5078d016886
Binary files /dev/null and b/docs/img/change-ui-colors/dags-page-old.png differ
diff --git a/docs/img/change-ui-colors/graph-view-new.png b/docs/img/change-ui-colors/graph-view-new.png
new file mode 100644
index 00000000000..b3674612358
Binary files /dev/null and b/docs/img/change-ui-colors/graph-view-new.png differ
diff --git a/docs/img/change-ui-colors/graph-view-old.png b/docs/img/change-ui-colors/graph-view-old.png
new file mode 100644
index 00000000000..ceaf8d4c33f
Binary files /dev/null and b/docs/img/change-ui-colors/graph-view-old.png differ
diff --git a/docs/img/change-ui-colors/tree-view-new.png b/docs/img/change-ui-colors/tree-view-new.png
new file mode 100644
index 00000000000..6a5b2d757ef
Binary files /dev/null and b/docs/img/change-ui-colors/tree-view-new.png differ
diff --git a/docs/img/change-ui-colors/tree-view-old.png b/docs/img/change-ui-colors/tree-view-old.png
new file mode 100644
index 00000000000..8dedde68db8
Binary files /dev/null and b/docs/img/change-ui-colors/tree-view-old.png differ