diff --git a/Tests/LibWeb/Ref/color-hsl.html b/Tests/LibWeb/Ref/color-hsl.html
new file mode 100644
index 00000000000..ee8507a95e9
--- /dev/null
+++ b/Tests/LibWeb/Ref/color-hsl.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<link rel="match" href="reference/color-hsl-ref.html" />
+<style>
+    div {
+        width: 200px;
+        height: 20px;
+    }
+    #d1 { background-color: hsla(120.0, 75%, 50%, 20%); }
+    #d2 { background-color: hsla(120, 75%, 50%, 0.6); }
+    #d3 { background-color: hsla(120 75% 50% / 60%); }
+    #d4 { background-color: hsla(120.0 75% 50% / 1.0); }
+    #d5 { background-color: hsla(120.0, 75%, 50%); }
+    #d6 { background-color: hsla(120 75% 50%); }
+    #d7 { background-color: hsl(120, 75%, 50%, 0.2); }
+    #d8 { background-color: hsl(120, 75%, 50%, 60%); }
+    #d9 { background-color: hsl(120 75% 50% / 0.6); }
+    #d10 { background-color: hsl(120 75% 50% / 60%); }
+    #d11 { background-color: hsl(600deg, 75%, 50%); }
+    #d12 { background-color: hsl(2.6666666666turn, 75%, 50%); }
+    #d13 { background-color: hsl(1.2e2, 75%, 50%, 0.6); }
+    #d14 { background-color: hsla(540, 100%, 50%, 0.6); }
+    #d15 { background-color: hsl(none none none / none); }
+    #d16 { background-color: hsl(none 100% 50%); }
+    #d17 { background-color: hsl(120 none 50%); }
+    #d18 { background-color: hsl(120 80% none); }
+    #d19 { background-color: hsl(120 100% 50% / none); }
+</style>
+<div id="d1">1</div>
+<div id="d2">2</div>
+<div id="d3">3</div>
+<div id="d4">4</div>
+<div id="d5">5</div>
+<div id="d6">6</div>
+<div id="d7">7</div>
+<div id="d8">8</div>
+<div id="d9">9</div>
+<div id="d10">10</div>
+<div id="d11">11</div>
+<div id="d12">12</div>
+<div id="d13">13</div>
+<div id="d14">14</div>
+<div id="d15">15</div>
+<div id="d16">16</div>
+<div id="d17">17</div>
+<div id="d18">18</div>
+<div id="d19">19</div>
diff --git a/Tests/LibWeb/Ref/color-hwb.html b/Tests/LibWeb/Ref/color-hwb.html
new file mode 100644
index 00000000000..3861d11721c
--- /dev/null
+++ b/Tests/LibWeb/Ref/color-hwb.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<link rel="match" href="reference/color-hwb-ref.html" />
+<style>
+    div {
+        width: 200px;
+        height: 20px;
+    }
+    #d1 { background-color: hwb(100 40% 60%); }
+    #d2 { background-color: hwb(120 50% 0% / 0.5); }
+    #d3 { background-color: hwb(120 50% 0% / 0.5); }
+    #d4 { background-color: hwb(none none none / none); }
+    #d5 { background-color: hwb(none 50% 0% / 50%); }
+    #d6 { background-color: hwb(120 none 0% / 60%); }
+    #d7 { background-color: hwb(120 50% none / 50%); }
+    #d8 { background-color: hwb(120 50% 0% / none); }
+</style>
+<div id="d1">1</div>
+<div id="d2">2</div>
+<div id="d3">3</div>
+<div id="d4">4</div>
+<div id="d5">5</div>
+<div id="d6">6</div>
+<div id="d7">7</div>
+<div id="d8">8</div>
diff --git a/Tests/LibWeb/Ref/color-oklab.html b/Tests/LibWeb/Ref/color-oklab.html
new file mode 100644
index 00000000000..a3463a55644
--- /dev/null
+++ b/Tests/LibWeb/Ref/color-oklab.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<link rel="match" href="reference/color-oklab-ref.html" />
+<style>
+    div {
+        width: 200px;
+        height: 20px;
+    }
+    #d1 { background-color: oklab(51.975% -0.1403 0.10768); }
+    #d2 { background-color: oklab(50% 0.05 0); }
+    #d3 { background-color: oklab(51.975% -35.075% 26.92%); }
+    #d4 { background-color: oklab(none none none / none); }
+    #d5 { background-color: oklab(none 0 10 / 60%); }
+    #d6 { background-color: oklab(120 0 none / 50%); }
+    #d7 { background-color: oklab(120 0 10 / none); }
+</style>
+<div id="d1">1</div>
+<div id="d2">2</div>
+<div id="d3">3</div>
+<div id="d4">4</div>
+<div id="d5">5</div>
+<div id="d6">6</div>
+<div id="d7">7</div>
diff --git a/Tests/LibWeb/Ref/color-oklch.html b/Tests/LibWeb/Ref/color-oklch.html
new file mode 100644
index 00000000000..4b56df1a5b2
--- /dev/null
+++ b/Tests/LibWeb/Ref/color-oklch.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<link rel="match" href="reference/color-oklch-ref.html" />
+<style>
+    div {
+        width: 200px;
+        height: 20px;
+    }
+    #d1 { background-color: oklch(51.975% 0.17686 142.495); }
+    #d2 { background-color: oklch(50% 0.2 270); }
+    #d3 { background-color: oklch(51.975% 44.215% 142.495); }
+    #d4 { background-color: oklch(none none none / none); }
+    #d5 { background-color: oklch(none 0 10 / 60%); }
+    #d6 { background-color: oklch(120 0 none / 50%); }
+    #d7 { background-color: oklch(120 0 10 / none); }
+</style>
+<div id="d1">1</div>
+<div id="d2">2</div>
+<div id="d3">3</div>
+<div id="d4">4</div>
+<div id="d5">5</div>
+<div id="d6">6</div>
+<div id="d7">7</div>
diff --git a/Tests/LibWeb/Ref/color-rgb.html b/Tests/LibWeb/Ref/color-rgb.html
new file mode 100644
index 00000000000..0bc2345e11d
--- /dev/null
+++ b/Tests/LibWeb/Ref/color-rgb.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<link rel="match" href="reference/color-rgb-ref.html" />
+<style>
+    div {
+        width: 200px;
+        height: 20px;
+    }
+    #d1 { background-color: rgba(257 30 40); }
+    #d2 { background-color: rgb(none none none / none); }
+    #d3 { background-color: rgb(none 100% 60%); }
+    #d4 { background-color: rgb(120 100% 50% / none); }
+</style>
+<div id="d1">1</div>
+<div id="d2">2</div>
+<div id="d3">3</div>
+<div id="d4">4</div>
diff --git a/Tests/LibWeb/Ref/reference/color-hsl-ref.html b/Tests/LibWeb/Ref/reference/color-hsl-ref.html
new file mode 100644
index 00000000000..1f64585069c
--- /dev/null
+++ b/Tests/LibWeb/Ref/reference/color-hsl-ref.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<style>
+    div {
+        width: 200px;
+        height: 20px;
+    }
+    #d1 { background-color: #d2f9d2; }
+    #d2 { background-color: #79ec79; }
+    #d3 { background-color: #79ec79; }
+    #d4 { background-color: #20df20; }
+    #d5 { background-color: #20df20; }
+    #d6 { background-color: #20df20; }
+    #d7 { background-color: #d2f9d2; }
+    #d8 { background-color: #79ec79; }
+    #d9 { background-color: #79ec79; }
+    #d10 { background-color: #79ec79; }
+    #d11 { background-color: #2020df; }
+    #d12 { background-color: #2020df; }
+    #d13 { background-color: #79ec79; }
+    #d14 { background-color: #66ffff; }
+    #d15 { background-color: #ffffff; }
+    #d16 { background-color: #ff0000; }
+    #d17 { background-color: #808080; }
+    #d18 { background-color: #000000; }
+    #d19 { background-color: #ffffff; }
+</style>
+<div id="d1">1</div>
+<div id="d2">2</div>
+<div id="d3">3</div>
+<div id="d4">4</div>
+<div id="d5">5</div>
+<div id="d6">6</div>
+<div id="d7">7</div>
+<div id="d8">8</div>
+<div id="d9">9</div>
+<div id="d10">10</div>
+<div id="d11">11</div>
+<div id="d12">12</div>
+<div id="d13">13</div>
+<div id="d14">14</div>
+<div id="d15">15</div>
+<div id="d16">16</div>
+<div id="d17">17</div>
+<div id="d18">18</div>
+<div id="d19">19</div>
diff --git a/Tests/LibWeb/Ref/reference/color-hwb-ref.html b/Tests/LibWeb/Ref/reference/color-hwb-ref.html
new file mode 100644
index 00000000000..0215cee10a6
--- /dev/null
+++ b/Tests/LibWeb/Ref/reference/color-hwb-ref.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<style>
+    div {
+        width: 200px;
+        height: 20px;
+    }
+    #d1 { background-color: #666666; }
+    #d2 { background-color: #bfffbf; }
+    #d3 { background-color: #bfffbf; }
+    #d4 { background-color: #ffffff; }
+    #d5 { background-color: #ffbfbf; }
+    #d6 { background-color: #66ff66; }
+    #d7 { background-color: #bfffbf; }
+    #d8 { background-color: #ffffff; }
+</style>
+<div id="d1">1</div>
+<div id="d2">2</div>
+<div id="d3">3</div>
+<div id="d4">4</div>
+<div id="d5">5</div>
+<div id="d6">6</div>
+<div id="d7">7</div>
+<div id="d8">8</div>
diff --git a/Tests/LibWeb/Ref/reference/color-oklab-ref.html b/Tests/LibWeb/Ref/reference/color-oklab-ref.html
new file mode 100644
index 00000000000..c1b60978b48
--- /dev/null
+++ b/Tests/LibWeb/Ref/reference/color-oklab-ref.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<style>
+    div {
+        width: 200px;
+        height: 20px;
+    }
+    #d1 { background-color: #008000; }
+    #d2 { background-color: #7c5762; }
+    #d3 { background-color: #008000; }
+    #d4 { background-color: #ffffff; }
+    #d5 { background-color: #66ff66; }
+    #d6 { background-color: #ffffff; }
+    #d7 { background-color: #ffffff; }
+</style>
+<div id="d1">1</div>
+<div id="d2">2</div>
+<div id="d3">3</div>
+<div id="d4">4</div>
+<div id="d5">5</div>
+<div id="d6">6</div>
+<div id="d7">7</div>
diff --git a/Tests/LibWeb/Ref/reference/color-oklch-ref.html b/Tests/LibWeb/Ref/reference/color-oklch-ref.html
new file mode 100644
index 00000000000..9d1a5c579af
--- /dev/null
+++ b/Tests/LibWeb/Ref/reference/color-oklch-ref.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<style>
+    div {
+        width: 200px;
+        height: 20px;
+    }
+    #d1 { background-color: #008000; }
+    #d2 { background-color: #3b51d3; }
+    #d3 { background-color: #008000; }
+    #d4 { background-color: #ffffff; }
+    #d5 { background-color: #666666; }
+    #d6 { background-color: #ffffff; }
+    #d7 { background-color: #ffffff; }
+</style>
+<div id="d1">1</div>
+<div id="d2">2</div>
+<div id="d3">3</div>
+<div id="d4">4</div>
+<div id="d5">5</div>
+<div id="d6">6</div>
+<div id="d7">7</div>
diff --git a/Tests/LibWeb/Ref/reference/color-rgb-ref.html b/Tests/LibWeb/Ref/reference/color-rgb-ref.html
new file mode 100644
index 00000000000..5a97ccacc70
--- /dev/null
+++ b/Tests/LibWeb/Ref/reference/color-rgb-ref.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<style>
+    div {
+        width: 200px;
+        height: 20px;
+    }
+    #d1 { background-color: #ff1e28; }
+    #d2 { background-color: #ffffff; }
+    #d3 { background-color: #00ff99; }
+    #d4 { background-color: #ffffff; }
+</style>
+<div id="d1">1</div>
+<div id="d2">2</div>
+<div id="d3">3</div>
+<div id="d4">4</div>
