diff --git a/assets/styles/palette.css b/assets/styles/palette.css
new file mode 100644
index 0000000..9ee0de9
--- /dev/null
+++ b/assets/styles/palette.css
@@ -0,0 +1,44 @@
+.color {
+ border: solid var(--color-text);
+ border-radius: 0 2rem 0 2rem;
+ width: 50%;
+ margin: 1rem auto;
+ text-align: center;
+ padding: .5rem;
+ font-weight: 900;
+}
+
+@media (max-width: 1050px) {
+ .color {
+ width: 70%;
+ }
+}
+
+@media (max-width: 650px) {
+ .color {
+ width: 100%;
+ }
+}
+
+#dark { background-color: var(--color-dark); }
+#light { background-color: var(--color-light); }
+#purple-dark { background-color: var(--color-purple-dark); }
+#purple-light { background-color: var(--color-purple-light); }
+#pink-dark { background-color: var(--color-pink-dark); }
+#pink-light { background-color: var(--color-pink-light); }
+#orange-dark { background-color: var(--color-orange-dark); }
+#orange-light { background-color: var(--color-orange-light); }
+
+#dark,
+#purple-dark,
+#pink-dark,
+#orange-dark {
+ color: var(--color-light);
+}
+
+#light,
+#purple-light,
+#pink-light,
+#orange-light {
+ color: var(--color-dark);
+}
diff --git a/palette/index.html b/palette/index.html
new file mode 100644
index 0000000..866a8f3
--- /dev/null
+++ b/palette/index.html
@@ -0,0 +1,41 @@
+
+
+
+ {{title}}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Site palette
+ #130024
+ #ffdff3
+ #570d93
+ #b675ec
+ #8f0d66
+ #e771c2
+ #ba4f1d
+ #e88a5c
+
+
+