diff --git a/pkgs/applications/editors/vscode/extensions/bierner.color-info/default.nix b/pkgs/applications/editors/vscode/extensions/bierner.color-info/default.nix
new file mode 100644
index 000000000000..03e8628db07a
--- /dev/null
+++ b/pkgs/applications/editors/vscode/extensions/bierner.color-info/default.nix
@@ -0,0 +1,18 @@
+{ lib, vscode-utils }:
+
+vscode-utils.buildVscodeMarketplaceExtension {
+  mktplcRef = {
+    name = "color-info";
+    publisher = "bierner";
+    version = "0.7.2";
+    hash = "sha256-Bf0thdt4yxH7OsRhIXeqvaxD1tbHTrUc4QJcju7Hv90=";
+  };
+  meta = {
+    description = "VSCode Extension that provides additional information about css colors";
+    downloadPage = "https://marketplace.visualstudio.com/items?itemName=bierner.color-info";
+    homepage = "https://github.com/mattbierner/vscode-color-info";
+    changelog = "https://marketplace.visualstudio.com/items/bierner.color-info/changelog";
+    license = lib.licenses.mit;
+    maintainers = [ lib.maintainers.timon ];
+  };
+}
diff --git a/pkgs/applications/editors/vscode/extensions/default.nix b/pkgs/applications/editors/vscode/extensions/default.nix
index 2be6842a5a42..2f72536b184d 100644
--- a/pkgs/applications/editors/vscode/extensions/default.nix
+++ b/pkgs/applications/editors/vscode/extensions/default.nix
@@ -580,6 +580,8 @@ let
         };
       };
 
+      bierner.color-info = callPackage ./bierner.color-info { };
+
       bierner.docs-view = buildVscodeMarketplaceExtension {
         mktplcRef = {
           name = "docs-view";