diff --git a/web/src/beta/ui/fields/ColorField.tsx b/web/src/beta/ui/fields/ColorField.tsx
new file mode 100644
index 0000000000..d57cef92ce
--- /dev/null
+++ b/web/src/beta/ui/fields/ColorField.tsx
@@ -0,0 +1,18 @@
+import { FC } from "react";
+
+import { ColorInput, ColorInputProps } from "@reearth/beta/lib/reearth-ui";
+
+import CommonField, { CommonFieldProps } from "./CommonField";
+
+export type ColorInputFieldProps = CommonFieldProps &
+  Pick<ColorInputProps, "value" | "size" | "onChange" | "alphaDisabled" | "disabled">;
+
+const ColorInputField: FC<ColorInputFieldProps> = ({ title, description, ...props }) => {
+  return (
+    <CommonField title={title} description={description}>
+      <ColorInput {...props} />
+    </CommonField>
+  );
+};
+
+export default ColorInputField;
diff --git a/web/src/beta/ui/fields/index.ts b/web/src/beta/ui/fields/index.ts
index 1197c87390..b88ebc84b5 100644
--- a/web/src/beta/ui/fields/index.ts
+++ b/web/src/beta/ui/fields/index.ts
@@ -1,2 +1,3 @@
 export * from "./CommonField";
 export * from "./InputField";
+export * from "./ColorField";