diff --git a/src/components/BrandSection/ColorCardBtn/ColorCardBtn.tsx b/src/components/BrandSection/ColorCardBtn/ColorCardBtn.tsx
index 9b613545..321787b9 100644
--- a/src/components/BrandSection/ColorCardBtn/ColorCardBtn.tsx
+++ b/src/components/BrandSection/ColorCardBtn/ColorCardBtn.tsx
@@ -2,10 +2,18 @@ import React, { useState } from "react"
 import classes from "./style.module.css"
 import { Block } from "baseui/block"
 import Icons from "~/components/Icons"
+import BrandColorPicker from "../ColorPicker/BrandColorPicker"
 
-const ColorCardBtn = ({ Width, Height, ColorCode, HandleOnClick }: any) => {
+const ColorCardBtn = ({ ColorCode, index, handleDelete, handleEdit, type }: any) => {
     const [isHover, setIsHover] = useState(false)
     const [openPopup, setOpenPopup] = useState(false)
+    const [isEdit, setIsEdit] = useState(false)
+
+    const handleCloseEdit = () => {
+        setIsEdit(false)
+    }
+
+
     return (
         <Block className={classes.brandColorCardBtn}>
             <span
@@ -17,15 +25,46 @@ const ColorCardBtn = ({ Width, Height, ColorCode, HandleOnClick }: any) => {
                     setOpenPopup(false)
                 }}
             >
-                {isHover && <span className={classes.menuBtn} onClick={() => setOpenPopup(!openPopup)}><Icons.KebabMenu /></span>}
+                {isHover && (
+                    <span className={classes.menuBtn} onClick={() => setOpenPopup(!openPopup)}>
+                        <Icons.KebabMenu />
+                    </span>
+                )}
 
-                {openPopup && <div className={classes.displayPopupOption}>
-                    <span className={classes.popupOption}>Copy Color Code</span>
-                    <span className={classes.popupOption}>Edit</span>
-                    <span className={classes.popupOption}>Delete</span>
-                </div>}
+                {openPopup && (
+                    <div className={classes.displayPopupOption}>
+                        <span
+                            onClick={() => {
+                                navigator.clipboard.writeText(ColorCode)
+                                setOpenPopup(false)
+                            }}
+                            className={classes.popupOption}
+                        >
+                            Copy Color Code
+                        </span>
+                        <span onClick={() => setIsEdit(!isEdit)} className={classes.popupOption}>Edit</span>
+                        <span
+                            onClick={() => {
+                                handleDelete(index)
+                                setOpenPopup(false)
+                            }}
+                            className={classes.popupOption}
+                        >
+                            Delete
+                        </span>
+                    </div>
+                )}
             </span>
             <h4 className={classes.ColorHashCode}>{ColorCode ? ColorCode.toUpperCase() : "#F259E8"}</h4>
+
+            {isEdit && <div
+                id={`popup`}
+                onMouseLeave={() => setIsEdit(false)}
+                style={{ position: "absolute", top: "-13rem", left: "136px", zIndex: "1" }}
+            >
+                <BrandColorPicker index={index} handleAddColor={handleEdit} close={handleCloseEdit} type={type} />
+            </div>}
+
         </Block>
     )
 }
diff --git a/src/components/BrandSection/ColorCardBtn/style.module.css b/src/components/BrandSection/ColorCardBtn/style.module.css
index 102ef6ec..ce75ab41 100644
--- a/src/components/BrandSection/ColorCardBtn/style.module.css
+++ b/src/components/BrandSection/ColorCardBtn/style.module.css
@@ -1,4 +1,5 @@
 .brandColorCardBtn {
+  position: relative;
   width: 120px;
   height: 120px;
   display: flex;
diff --git a/src/components/BrandSection/ColorPicker/BrandColorPicker.tsx b/src/components/BrandSection/ColorPicker/BrandColorPicker.tsx
index 77cb9507..85fe116e 100644
--- a/src/components/BrandSection/ColorPicker/BrandColorPicker.tsx
+++ b/src/components/BrandSection/ColorPicker/BrandColorPicker.tsx
@@ -1,29 +1,24 @@
 import { Block } from "baseui/block"
 import { useState } from "react"
 import classes from "./style.module.css"
-import { RgbaColorPicker } from "react-colorful"
-import { throttle } from "lodash"
+import { RgbaColorPicker, HslaColorPicker } from "react-colorful"
 import { Button } from "baseui/button"
 import Icons from "~/components/Icons"
+import { rgbaTohex } from "~/utils/colorConverter"
 
-const BrandColorPicker = ({ isOpen, handleClose, inputColor, handleChangeColor }: any) => {
-    const [color, setColor] = useState(inputColor)
+const BrandColorPicker = ({ type, handleAddColor, close, index }: any) => {
+    const [color, setColor] = useState({ r: 0, g: 0, b: 0, a: 1 })
     const [hexColor, setHexColor] = useState("#000000")
-    const [opacity, setOpacity] = useState('100%')
-    const close = () => {
-        handleClose()
+    const [hslaColor, setHslaColor] = useState({ h: 270, s: 0, l: 0, a: 1 })
+    const [opacity, setOpacity] = useState("100%")
+    const [selectedColorFormat, setSelectedColorFormat] = useState("Hex")
+
+    const handleColorFormatChange = (event: any) => {
+        setSelectedColorFormat(event.target.value)
     }
-    const updateObjectFill = throttle((color: string) => {
-        handleChangeColor(color)
-        setColor(color)
-        close()
-    }, 1000)
-
-    function rgba2hex() {
-        var hex = '#' +
-            (parseInt(`${color?.r}`, 10) | (1 << 8)).toString(16).slice(1) +
-            (parseInt(`${color?.g}`, 10) | (1 << 8)).toString(16).slice(1) +
-            (parseInt(`${color?.b}`, 10) | (1 << 8)).toString(16).slice(1)
+
+    const rgba2hex = async () => {
+        var hex = rgbaTohex(color.r, color.g, color.b, color.a)
         setHexColor(hex)
         setOpacity(`${Math.round(color?.a * 100)}%`)
     }
@@ -46,13 +41,19 @@ const BrandColorPicker = ({ isOpen, handleClose, inputColor, handleChangeColor }
             <div className={classes.modal}>
                 <Block className={classes.colorPickerSection}>
                     <div className="brand-hex-color-picker">
-                        {
+                        {(selectedColorFormat === 'Hex' || selectedColorFormat === 'Rgba' || selectedColorFormat === 'Css') ?
                             <RgbaColorPicker
                                 onChange={(color) => {
                                     setColor(color)
                                     rgba2hex()
                                 }}
                             />
+                            :
+                            <HslaColorPicker
+                                onChange={(hslaColor: any) => {
+                                    setHslaColor(hslaColor)
+                                }}
+                            />
                         }
                     </div>
                     <span style={{ position: "absolute", marginTop: "-30px" }}>
@@ -61,30 +62,154 @@ const BrandColorPicker = ({ isOpen, handleClose, inputColor, handleChangeColor }
 
                     <div className={classes.colorValuesInput}>
                         <div className={classes.selectColorCodeCon}>
-                            <select id="colorFormat" className={classes.selectColorCont}>
-                                <option value="Hex">Hex</option>
-                                <option value="Hex">Hex</option>
+                            <select id="colorFormat" className={classes.selectColorCont} onChange={handleColorFormatChange}>
+                                <option value="Hex">HEX</option>
+                                <option value="Rgba">RGB</option>
+                                <option value="Hsla">HSL</option>
+                                <option value="Css">CSS</option>
                             </select>
                             <div className={classes.selectDownArrow}>
                                 <Icons.DownArrow width="10px" height="10px" color="#696974" />
                             </div>
                         </div>
 
-                        <div className={classes.inputPercentage}>
-                            <input
-                                className={classes.colorPickerInputField}
-                                onChange={(e) => {
-                                    setColor(e.target.value)
-                                }}
-                                value={hexColor}
-                            />
-                            <input className={classes.colorPercentageInputField} value={opacity} />
-                        </div>
+                        {selectedColorFormat === "Hex" && (
+                            <div className={classes.inputPercentage}>
+                                <input
+                                    className={classes.colorPickerInputField}
+                                    onChange={(e) => {
+                                        setHexColor(e.target.value)
+                                    }}
+                                    value={hexColor}
+                                />
+
+                                <input className={classes.colorPercentageInputField} value={opacity} />
+                            </div>
+                        )}
+
+                        {selectedColorFormat === "Rgba" && (
+                            <Block className={classes.multiValueInputFieldsCon}>
+                                <div className={classes.valueContainer}>
+                                    <label>R</label>
+                                    <input
+                                        className={classes.colorSingleValInput}
+                                        type="number"
+                                        id="red-input"
+                                        min="0"
+                                        max="255"
+                                        value={color?.r}
+                                    // onChange={(e) => setColor((prev) => ({ ...prev, r: e.target.value }))}
+                                    />
+                                </div>
+
+                                <div className={classes.valueContainer}>
+                                    <label>G</label>
+                                    <input
+                                        className={classes.colorSingleValInput}
+                                        type="number"
+                                        id="red-input"
+                                        min="0"
+                                        max="255"
+                                        value={color?.g}
+                                    // onChange={(e) => setColor((prev) => ({ ...prev, g: e.target.value }))}
+                                    />
+                                </div>
+
+                                <div className={classes.valueContainer}>
+                                    <label>B</label>
+                                    <input
+                                        className={classes.colorSingleValInput}
+                                        type="number"
+                                        id="red-input"
+                                        min="0"
+                                        max="255"
+                                        value={color?.b}
+                                    // onChange={(e) => setColor((prev) => ({ ...prev, b: e.target.value }))}
+                                    />
+                                </div>
+
+                                <div className={classes.valueContainer}>
+                                    <label>A</label>
+                                    <input
+                                        className={classes.colorSingleValInput}
+                                        type="number"
+                                        id="red-input"
+                                        min="0"
+                                        max="255"
+                                        value={color?.a}
+                                    // onChange={(e) => setColor((prev) => ({ ...prev, a: e.target.value }))}
+                                    />
+                                </div>
+                            </Block>
+                        )}
+
+                        {selectedColorFormat === "Hsla" && (
+                            <Block className={classes.multiValueInputFieldsCon}>
+                                <div className={classes.valueContainer}>
+                                    <label>H</label>
+                                    <input
+                                        className={classes.colorSingleValInput}
+                                        type="number"
+                                        id="red-input"
+                                        min="0"
+                                        max="360"
+                                        value={hslaColor.h}
+                                    // onChange={(e) => setHslaColor((prev) => ({ ...prev, h: e.target.value }))}
+                                    />
+                                </div>
+
+                                <div className={classes.valueContainer}>
+                                    <label>S</label>
+                                    <input
+                                        className={classes.colorSingleValInput}
+                                        type="number"
+                                        id="red-input"
+                                        min="0"
+                                        max="360"
+                                        value={hslaColor.s}
+                                    // onChange={(e) => setHslaColor((prev) => ({ ...prev, s: e.target.value }))}
+                                    />
+                                </div>
+
+                                <div className={classes.valueContainer}>
+                                    <label>L</label>
+                                    <input
+                                        className={classes.colorSingleValInput}
+                                        type="number"
+                                        id="red-input"
+                                        min="0"
+                                        max="360"
+                                        value={hslaColor.l}
+                                    // onChange={(e) => setHslaColor((prev) => ({ ...prev, l: e.target.value }))}
+                                    />
+                                </div>
+
+                                <div className={classes.valueContainer}>
+                                    <label>A</label>
+                                    <input
+                                        className={classes.colorSingleValInput}
+                                        type="number"
+                                        id="red-input"
+                                        min="0"
+                                        max="360"
+                                        value={hslaColor.a}
+                                    // onChange={(e) => setHslaColor((prev) => ({ ...prev, a: e.target.value }))}
+                                    />
+                                </div>
+                            </Block>
+                        )}
+
+                        {selectedColorFormat === "Css" &&
+                            <input className={classes.cssInput} value={`rgba(${color.r} ${color.g} ${color.b} ${color.a})`} />
+                        }
                     </div>
 
-                    <Block className="w-100 mt-3" style={{ height: '38px' }}>
+                    <Block className="w-100 mt-3" style={{ height: "38px" }}>
                         <Button
-                            onClick={() => updateObjectFill(color)}
+                            onClick={() => {
+                                handleAddColor(index, hexColor, type)
+                                close()
+                            }}
                             $colors={{ backgroundColor: "#6729F3", color: "#fff" }}
                             className="w-100 h-100 p-5 mt-5 d-inline-block"
                         >
diff --git a/src/components/BrandSection/ColorPicker/style.module.css b/src/components/BrandSection/ColorPicker/style.module.css
index 536e155d..94676831 100644
--- a/src/components/BrandSection/ColorPicker/style.module.css
+++ b/src/components/BrandSection/ColorPicker/style.module.css
@@ -91,7 +91,7 @@ select {
   display: flex;
   position: absolute;
   top: 0;
-  right: 14px;
+  right: 8px;
   align-items: center;
   /* justify-content: center; */
   height: 100%;
@@ -158,3 +158,31 @@ select {
   cursor: pointer;
   border-radius: 4px;
 }
+.multiValueInputFieldsCon {
+  display: flex;
+  gap: 8px;
+}
+.valueContainer {
+  display: flex;
+  gap: 4px;
+  justify-content: center;
+  align-items: center;
+}
+
+.colorSingleValInput {
+  display: flex;
+  border: 1px solid black;
+  max-width: 36px;
+  text-align: center;
+  padding: 4px 0 4px;
+  outline: none;
+  border-radius: 5px;
+}
+.cssInput {
+  width: 70%;
+  padding: 0.5rem;
+  background-color: transparent;
+  border-radius: 8px;
+  border: 1px solid black;
+  outline: none;
+}
diff --git a/src/components/BrandSection/index.tsx b/src/components/BrandSection/index.tsx
index edba0114..6975c5e9 100644
--- a/src/components/BrandSection/index.tsx
+++ b/src/components/BrandSection/index.tsx
@@ -1,22 +1,57 @@
-import { useState } from 'react'
-import classes from './style.module.css'
-import { Block } from 'baseui/block'
-import PosterImage from './dummyAssets/PosterImage.png'
-import CreateBtn from './CreateBrandBtn/CreateBtn'
-import ColorCardBtn from './ColorCardBtn/ColorCardBtn'
-import GradiantBtn from './GradientBtn/GradientBtn'
-import Icons from '../Icons'
-import Uploads from '~/views/DesignEditor/components/Panels/panelItems/UploadDropzone/Uploads'
-import { Modal, SIZE } from 'baseui/modal'
-import BrandLogo from './BrandLogo/BrandLogo'
-import BrandColorPicker from './ColorPicker/BrandColorPicker'
+import { useState } from "react"
+import classes from "./style.module.css"
+import { Block } from "baseui/block"
+import PosterImage from "./dummyAssets/PosterImage.png"
+import CreateBtn from "./CreateBrandBtn/CreateBtn"
+import ColorCardBtn from "./ColorCardBtn/ColorCardBtn"
+import GradiantBtn from "./GradientBtn/GradientBtn"
+import Icons from "../Icons"
+import Uploads from "~/views/DesignEditor/components/Panels/panelItems/UploadDropzone/Uploads"
+import { Modal, SIZE } from "baseui/modal"
+import BrandLogo from "./BrandLogo/BrandLogo"
+import BrandColorPicker from "./ColorPicker/BrandColorPicker"
 
 const BrandSection = () => {
     const [isUploadLogo, setIsUploadLogo] = useState(false)
-    const SolidColors = ['#F259E8', '#6729F3', '#ffffff', '#000000']
-    const BgSolidColors = ['#ffffff', '#000000']
-    const GradientColors = ['linear-gradient(to right, rgba(242, 89, 232, 1), rgba(103, 41, 243, 1))', '#linear-gradient(to right, rgba(89, 187, 242, 1), rgba(178, 41, 243, 1))']
+    const [SolidColors, setSolidColors] = useState(["#F259E8", "#6729F3", "#ffffff", "#000000"])
+    const [BgSolidColors, setBgSolidColors] = useState(["#ffffff", "#000000"])
+    const GradientColors = [
+        "linear-gradient(to right, rgba(242, 89, 232, 1), rgba(103, 41, 243, 1))",
+        "#linear-gradient(to right, rgba(89, 187, 242, 1), rgba(178, 41, 243, 1))",
+    ]
     const [createSolidPopup, setCreateSolidPopup] = useState(false)
+    const [addColorType, setAddColorType] = useState("SolidColor")
+    const handleDeleteSolidColor = (index: number) => {
+        const updatedColors = [...SolidColors]
+        updatedColors.splice(index, 1)
+        setSolidColors(updatedColors)
+    }
+
+    const handleDeleteBgSolidColor = (index: number) => {
+        const updatedColors = [...BgSolidColors]
+        updatedColors.splice(index, 1)
+        setBgSolidColors(updatedColors)
+    }
+
+    const handleAddSolidColor = (index: any, color: any, type: string) => {
+        if (type === "SolidColor") {
+            setSolidColors([...SolidColors, color])
+        } else if (type === "SolidBgColor") {
+            setBgSolidColors([...BgSolidColors, color])
+        }
+    }
+    const handleEdit = (index: any, color: any, type: any) => {
+        if (type === "SolidColor") {
+            const updatedColors = [...SolidColors]
+            updatedColors[index] = color
+            setSolidColors(updatedColors)
+        } else if (type === "SolidBgColor") {
+            const updatedColors = [...BgSolidColors]
+            updatedColors[index] = color
+            setBgSolidColors(updatedColors)
+        }
+    }
+
     const HandleUplaodModalClose = () => {
         setIsUploadLogo(false)
     }
@@ -24,13 +59,17 @@ const BrandSection = () => {
         setIsUploadLogo(true)
     }
 
-    const HandleSolidColorCreateClick = () => {
+    const HandleSolidColorCreateClick = (type: any) => {
         setCreateSolidPopup(!createSolidPopup)
+        setAddColorType(type)
+    }
+    const handleOpenAddColorPopup = () => {
+        setCreateSolidPopup(false)
     }
     return (
         <Block className={classes.brandMainContainer}>
             <Block className={classes.posterCon}>
-                <img src={PosterImage} alt='posterImage' />
+                <img src={PosterImage} alt="posterImage" />
             </Block>
 
             <Block className={classes.brandSectionCon}>
@@ -51,14 +90,35 @@ const BrandSection = () => {
                     <h3 className={classes.sectionHeading}>Solid Colors</h3>
                 </Block>
                 <Block className={classes.brandLogoBottom}>
-                    <CreateBtn Width='120px' Height='120px' HandleOnClick={HandleSolidColorCreateClick} />
-                    {createSolidPopup && <div id={`popup-${createSolidPopup}`} onMouseLeave={() => setCreateSolidPopup(false)} style={{ position: 'absolute', top: '14px', left: '136px', zIndex: '1' }} ><BrandColorPicker /></div>}
+                    <CreateBtn Width="120px" Height="120px" HandleOnClick={() => HandleSolidColorCreateClick("SolidColor")} />
+                    {createSolidPopup && (
+                        <div
+                            id={`popup-${createSolidPopup}`}
+                            onMouseLeave={() => setCreateSolidPopup(false)}
+                            style={{ position: "absolute", top: "14px", left: "136px", zIndex: "1" }}
+                        >
+                            <BrandColorPicker
+                                type={addColorType}
+                                handleAddColor={handleAddSolidColor}
+                                close={handleOpenAddColorPopup}
+                            />
+                        </div>
+                    )}
 
-                    {
-                        SolidColors.map((colors, ind) => {
-                            return <ColorCardBtn ColorCode={colors} />
-                        })
-                    }
+                    {SolidColors.map((colors, ind) => {
+                        return (
+                            <>
+                                <ColorCardBtn
+                                    ColorCode={colors}
+                                    index={ind}
+                                    handleDelete={handleDeleteSolidColor}
+                                    handleEdit={handleEdit}
+                                    key={ind}
+                                    type={'SolidColor'}
+                                />
+                            </>
+                        )
+                    })}
                 </Block>
             </Block>
 
@@ -67,12 +127,10 @@ const BrandSection = () => {
                     <h3 className={classes.sectionHeading}>Background Colors</h3>
                 </Block>
                 <Block className={classes.brandLogoBottom}>
-                    <CreateBtn Width='120px' Height='120px' HandleOnClick={HandleSolidColorCreateClick} />
-                    {
-                        BgSolidColors.map((colors, ind) => {
-                            return <ColorCardBtn ColorCode={colors} />
-                        })
-                    }
+                    <CreateBtn Width="120px" Height="120px" HandleOnClick={() => HandleSolidColorCreateClick("SolidBgColor")} />
+                    {BgSolidColors.map((colors, ind) => {
+                        return <ColorCardBtn ColorCode={colors} index={ind} handleDelete={handleDeleteBgSolidColor} handleEdit={handleEdit} type={'SolidBgColor'} key={ind} />
+                    })}
                 </Block>
             </Block>
 
@@ -81,13 +139,11 @@ const BrandSection = () => {
                     <h3 className={classes.sectionHeading}>Gradient Colors</h3>
                 </Block>
                 <Block className={classes.brandLogoBottom}>
-                    <CreateBtn Width='120px' Height='120px' HandleOnClick={HandleSolidColorCreateClick} />
+                    <CreateBtn Width="120px" Height="120px" HandleOnClick={HandleSolidColorCreateClick} />
 
-                    {
-                        GradientColors.map((colors, ind) => {
-                            return <GradiantBtn ColorCode={colors} />
-                        })
-                    }
+                    {GradientColors.map((colors, ind) => {
+                        return <GradiantBtn ColorCode={colors} />
+                    })}
                 </Block>
             </Block>
             <UplaodModal isAddFolderOpen={isUploadLogo} HandleCloseAddModal={HandleUplaodModalClose} />
@@ -95,7 +151,6 @@ const BrandSection = () => {
     )
 }
 
-
 const UplaodModal = ({ isAddFolderOpen, HandleCloseAddModal }: any) => {
     return (
         <Modal
@@ -123,9 +178,9 @@ const UplaodModal = ({ isAddFolderOpen, HandleCloseAddModal }: any) => {
                         backgroundColor: "white",
                         width: "636px",
                         height: "auto",
-                        borderRadius: '24px',
-                        padding: '40px 32px',
-                        margin: '0px'
+                        borderRadius: "24px",
+                        padding: "40px 32px",
+                        margin: "0px",
                     }),
                 },
             }}
@@ -133,15 +188,13 @@ const UplaodModal = ({ isAddFolderOpen, HandleCloseAddModal }: any) => {
             <Block className={classes.addFolderCon}>
                 <Block className={classes.addFolderTop}>
                     Add Logo
-                    <span style={{ cursor: 'pointer' }} onClick={() => HandleCloseAddModal()}>
+                    <span style={{ cursor: "pointer" }} onClick={() => HandleCloseAddModal()}>
                         <Icons.ClosedFilled />
                     </span>
-
                 </Block>
                 <Block className={classes.addFolderBottom}>
                     <Uploads />
                 </Block>
-
             </Block>
         </Modal>
     )
diff --git a/src/components/HomePage/index.tsx b/src/components/HomePage/index.tsx
index 40011617..523c6c5f 100644
--- a/src/components/HomePage/index.tsx
+++ b/src/components/HomePage/index.tsx
@@ -8,7 +8,7 @@ const Home = () => {
 
     return (
         <Block style={{ display: 'flex', flexDirection: 'column', gap: '28px' }}>
-            <CommingSoon isOpen={true} />
+            {/* <CommingSoon isOpen={true} /> */}
             <HomeSlider />
             <PopularToolsSection />
             <AllToolsSection />
diff --git a/src/utils/colorConverter.ts b/src/utils/colorConverter.ts
new file mode 100644
index 00000000..a5c07528
--- /dev/null
+++ b/src/utils/colorConverter.ts
@@ -0,0 +1,81 @@
+export const rgbaTohex = (r: number, g: number, b: number, a: number) => {
+  var hex =
+    "#" +
+    (parseInt(`${r}`, 10) | (1 << 8)).toString(16).slice(1) +
+    (parseInt(`${g}`, 10) | (1 << 8)).toString(16).slice(1) +
+    (parseInt(`${b}`, 10) | (1 << 8)).toString(16).slice(1)
+  // setHexColor(hex)
+  // setOpacity(`${Math.round(a * 100)}%`)
+
+  return hex
+}
+
+export const rgbaTohsva = (r: number, g: number, b: number, a: number) => {
+  // Validate input values
+  if (r < 0 || r > 255 || g < 0 || g > 255 || b < 0 || b > 255 || a < 0 || a > 1) {
+    throw new Error("Invalid RGBA values. Values must be numbers in the specified range.")
+  }
+
+  // Normalize input values
+  r = r / 255
+  g = g / 255
+  b = b / 255
+  a = Math.min(1, Math.max(0, a))
+
+  // Find the maximum and minimum values among R, G, and B
+  const max = Math.max(r, g, b)
+  const min = Math.min(r, g, b)
+
+  // Calculate the hue
+  let h
+  if (max === min) {
+    h = 0 // achromatic (grayscale)
+  } else {
+    const d = max - min
+    h = max === r ? ((g - b) / d + (g < b ? 6 : 0)) % 6 : max === g ? (b - r) / d + 2 : (r - g) / d + 4
+    h = Math.floor(h * 60) // round down to the nearest whole number
+  }
+
+  // Calculate the saturation
+  const s = max === 0 ? 0 : Math.floor(((max - min) / max) * 100) // round down to the nearest whole number
+
+  // Calculate the value/brightness
+  const v = Math.floor(max * 100) // round down to the nearest whole number
+
+  return { h, s, v, a }
+}
+
+export const rgbaTohsla = (r: number, g: number, b: number, a: number) => {
+  // Validate input values
+  if (r < 0 || r > 255 || g < 0 || g > 255 || b < 0 || b > 255 || a < 0 || a > 1) {
+    throw new Error("Invalid RGBA values. Values must be numbers in the specified range.")
+  }
+
+  // Normalize input values
+  r = r / 255
+  g = g / 255
+  b = b / 255
+  a = Math.min(1, Math.max(0, a))
+
+  // Find the maximum and minimum values among R, G, and B
+  const max = Math.max(r, g, b)
+  const min = Math.min(r, g, b)
+
+  // Calculate the hue
+  let h
+  if (max === min) {
+    h = 0 // achromatic (grayscale)
+  } else {
+    const d = max - min
+    h = max === r ? ((g - b) / d + (g < b ? 6 : 0)) % 6 : max === g ? (b - r) / d + 2 : (r - g) / d + 4
+    h = Math.round(h * 60) // round to the nearest whole number
+  }
+
+  // Calculate the lightness
+  const l = Math.round(((max + min) / 2) * 100) // round to the nearest whole number
+
+  // Calculate the saturation
+  const s = max === min ? 0 : Math.round(((max - min) / (1 - Math.abs((2 * l) / 100 - 1))) * 100) // round to the nearest whole number
+
+  return { h, s, l, a }
+}