diff --git a/dashboard/src/components/group/Edit.svelte b/dashboard/src/components/group/Edit.svelte
index 04dc80b4..bad47ab2 100644
--- a/dashboard/src/components/group/Edit.svelte
+++ b/dashboard/src/components/group/Edit.svelte
@@ -118,7 +118,14 @@
     </Col>
     <Col xs={12} lg={4} class="mb-2">
         <Label>Color:</Label>
-        <Input bind:value={input.color} type="text" placeholder={group.color} aria-label="group color"/>
+        <Row>
+            <Col xs={9}>
+                <Input type="text" bind:value={input.color} aria-label="group color value"/>
+            </Col>
+            <Col>
+                <Input class="p-0 w-100" on:change={(e) => input.color = e.target.value.slice(1, 7)} type="color" aria-label="color picker" />
+            </Col>
+        </Row>
     </Col>
     <Col xs={12} lg={4} class="mb-2">
         <Label>Icon url:</Label>
diff --git a/dashboard/src/components/group/NewGroup.svelte b/dashboard/src/components/group/NewGroup.svelte
index f0db8f1f..7905c1cf 100644
--- a/dashboard/src/components/group/NewGroup.svelte
+++ b/dashboard/src/components/group/NewGroup.svelte
@@ -95,7 +95,14 @@
             </Col>
             <Col xs={12} lg={4} class="mb-2">
                 <Label>Color:</Label>
-                <Input bind:value={input.color} type="text"/>
+                <Row>
+                    <Col xs={9}>
+                        <Input type="text" bind:value={input.color} aria-label="group color value"/>
+                    </Col>
+                    <Col>
+                        <Input class="p-0 w-100" on:change={(e) => input.color = e.target.value.slice(1, 7)} type="color" aria-label="color picker" />
+                    </Col>
+                </Row>
             </Col>
             <Col xs={12} lg={4} class="mb-2">
                 <Label>Icon url:</Label>
diff --git a/dashboard/src/components/member/Edit.svelte b/dashboard/src/components/member/Edit.svelte
index 76ba710b..6ab730dc 100644
--- a/dashboard/src/components/member/Edit.svelte
+++ b/dashboard/src/components/member/Edit.svelte
@@ -149,7 +149,14 @@
     </Col>
     <Col xs={12} lg={4} class="mb-2">
         <Label>Color:</Label>
-        <Input bind:value={input.color} type="text" placeholder={member.color} aria-label="member color" />
+        <Row>
+            <Col xs={9}>
+                <Input type="text" bind:value={input.color} aria-label="member color value"/>
+            </Col>
+            <Col>
+                <Input class="p-0 w-100" on:change={(e) => input.color = e.target.value.slice(1, 7)} type="color" aria-label="color picker" />
+            </Col>
+        </Row>
     </Col>
     <Col xs={12} lg={4} class="mb-2">
         <Label>Avatar url:</Label>
diff --git a/dashboard/src/components/member/NewMember.svelte b/dashboard/src/components/member/NewMember.svelte
index d589f694..87b92cb0 100644
--- a/dashboard/src/components/member/NewMember.svelte
+++ b/dashboard/src/components/member/NewMember.svelte
@@ -139,7 +139,14 @@
             </Col>
             <Col xs={12} lg={4} class="mb-2">
                 <Label>Color:</Label>
-                <Input bind:value={input.color} type="text" placeholder={input.color}/>
+                <Row>
+                    <Col xs={9}>
+                        <Input type="text" bind:value={input.color} aria-label="member color value"/>
+                    </Col>
+                    <Col>
+                        <Input class="p-0 w-100" on:change={(e) => input.color = e.target.value.slice(1, 7)} type="color" aria-label="color picker" />
+                    </Col>
+                </Row>
             </Col>
             <Col xs={12} lg={4} class="mb-2">
                 <Label>Avatar url:</Label>