diff --git a/solr/CHANGES.txt b/solr/CHANGES.txt
index 95bbe3633de..a42a8bd25c4 100644
--- a/solr/CHANGES.txt
+++ b/solr/CHANGES.txt
@@ -83,6 +83,8 @@ Optimizations
 * SOLR-4341: Admin UI - Plugins/Stats Page contains loooong
   Values which result in horizontal Scrollbar (steffkes)
 
+* SOLR-3915: Color Legend for Cloud UI (steffkes)
+
 Other Changes
 ----------------------
 
diff --git a/solr/webapp/web/css/styles/cloud.css b/solr/webapp/web/css/styles/cloud.css
index b3708576da2..3c5967ca509 100644
--- a/solr/webapp/web/css/styles/cloud.css
+++ b/solr/webapp/web/css/styles/cloud.css
@@ -231,11 +231,39 @@
   color: #00f;
 }
 
+#content #cloud #legend
+{
+  border: 1px solid #f0f0f0;
+  padding: 10px;
+  position: absolute;
+  right: 0;
+  bottom: 0;
+}
+
+#content #cloud #legend li
+{
+  padding-left: 15px;
+  position: relative;
+}
+
+#content #cloud #legend li svg
+{
+  position: absolute;
+  left: 0;
+  top: 2px;
+}
+
+#content #graph-content
+{
+  min-height: 400px;
+}
+
 #content #graph-content .node
 {
   fill: #333;
 }
 
+#content #cloud #legend circle,
 #content #graph-content .node circle
 {
   fill: #fff;
@@ -265,6 +293,7 @@
   stroke-width: 1.5px;
 }
 
+#content #cloud #legend .gone circle,
 #content #graph-content .node.gone circle,
 #content #graph-content .link.gone
 {
@@ -276,8 +305,16 @@
   fill: #f0f0f0;
 }
 
+#content #cloud #legend ul .gone
+{
+  color: #e0e0e0;
+}
+
+#content #cloud #legend .recovery_failed,
+#content #cloud #legend .recovery_failed circle,
 #content #graph-content .node.recovery_failed circle
 {
+  color: #C43C35;
   stroke: #C43C35;
 }
 
@@ -286,8 +323,11 @@
   fill: #C43C35;
 }
 
+#content #cloud #legend .down,
+#content #cloud #legend .down circle,
 #content #graph-content .node.down circle
 {
+  color: #c48f00;
   stroke: #c48f00;
 }
 
@@ -296,8 +336,11 @@
   fill: #c48f00;
 }
 
+#content #cloud #legend .recovering,
+#content #cloud #legend .recovering circle,
 #content #graph-content .node.recovering circle
 {
+  color: #d5dd00;
   stroke: #d5dd00;
 }
 
@@ -306,8 +349,11 @@
   fill: #d5dd00;
 }
 
+#content #cloud #legend .active,
+#content #cloud #legend .active circle,
 #content #graph-content .node.active circle
 {
+  color: #57A957;
   stroke: #57A957;
 }
 
@@ -316,11 +362,17 @@
   fill: #57A957;
 }
 
+#content #cloud #legend .leader circle,
 #content #graph-content .node.leader circle
 {
   fill: #000;
 }
 
+#content #cloud #legend .leader circle
+{
+  stroke: #fff;
+}
+
 #content #graph-content .link.lvl-2,
 #content #graph-content .link.leader
 {
diff --git a/solr/webapp/web/tpl/cloud.html b/solr/webapp/web/tpl/cloud.html
index 44342b7667d..377124926a7 100644
--- a/solr/webapp/web/tpl/cloud.html
+++ b/solr/webapp/web/tpl/cloud.html
@@ -39,6 +39,17 @@ limitations under the License.
 
       <div id="canvas"></div>
 
+      <div id="legend">
+        <ul>
+          <li class="leader"><svg width="15" height="15"><g transform="translate(5,2)"><g transform="translate(0,5)"><circle r="4.5"></circle></g></g></svg> Leader</li>
+          <li class="active"><svg width="15" height="15"><g transform="translate(5,2)"><g transform="translate(0,5)"><circle r="4.5"></circle></g></g></svg> Active</li>
+          <li class="recovering"><svg width="15" height="15"><g transform="translate(5,2)"><g transform="translate(0,5)"><circle r="4.5"></circle></g></g></svg> Recovering</li>
+          <li class="down"><svg width="15" height="15"><g transform="translate(5,2)"><g transform="translate(0,5)"><circle r="4.5"></circle></g></g></svg> Down</li>
+          <li class="recovery_failed"><svg width="15" height="15"><g transform="translate(5,2)"><g transform="translate(0,5)"><circle r="4.5"></circle></g></g></svg> Recovery Failed</li>
+          <li class="gone"><svg width="15" height="15"><g transform="translate(5,2)"><g transform="translate(0,5)"><circle r="4.5"></circle></g></g></svg> Gone</li>
+        </ul>
+      </div>
+
     </div>
 
   </div>