diff --git a/index.html b/index.html
index f9c241c..20f0f40 100644
--- a/index.html
+++ b/index.html
@@ -181,6 +181,11 @@
 
       <br />
 
+      <label for='fcolor'>Select your favorite color</label>
+      <input type='color' name='fcolor' id='fcolor' />
+
+      <br />
+
       <div>
         <label for='volume'>Volume</label>
         <input type='range' name='volume' id='volume' min='0' max='11' />
diff --git a/src/parts/_forms.css b/src/parts/_forms.css
index b6b7686..4d3fe79 100644
--- a/src/parts/_forms.css
+++ b/src/parts/_forms.css
@@ -31,6 +31,11 @@ select {
   outline: none;
 }
 
+input[type='color'] {
+  min-height: 2rem;
+  padding: 8px;
+}
+
 input,
 select,
 button,