diff --git a/packages/web/components/elements/LabelColorDropdown.tsx b/packages/web/components/elements/LabelColorDropdown.tsx
index 763ee7289..f5aeee40e 100644
--- a/packages/web/components/elements/LabelColorDropdown.tsx
+++ b/packages/web/components/elements/LabelColorDropdown.tsx
@@ -1,9 +1,6 @@
 import React, { useState } from 'react'
 import { styled } from '../tokens/stitches.config'
-import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu'
-import { HexColorPicker } from 'react-colorful'
-import { HStack, SpanBox } from './LayoutPrimitives'
-import { CaretDown } from 'phosphor-react'
+import { Box, HStack, SpanBox } from './LayoutPrimitives'
 import { StyledText } from './StyledText'
 import {
   LabelColorDropdownProps,
@@ -11,9 +8,10 @@ import {
   LabelOptionProps,
 } from '../../utils/settings-page/labels/types'
 import { labelColorObjects } from '../../utils/settings-page/labels/labelColorObjects'
-import { DropdownOption } from './DropdownElements'
 import { isDarkTheme } from '../../lib/themeUpdater'
 import { LabelColor } from '../../lib/networking/fragments/labelFragment'
+import { TwitterPicker } from 'react-color'
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu'
 
 const DropdownMenuContent = styled(DropdownMenuPrimitive.Content, {
   borderRadius: 6,
@@ -23,31 +21,6 @@ const DropdownMenuContent = styled(DropdownMenuPrimitive.Content, {
     '0px 10px 38px -10px rgba(22, 23, 24, 0.35), 0px 10px 20px -15px rgba(22, 23, 24, 0.2)',
 })
 
-const itemStyles = {
-  all: 'unset',
-  fontSize: '$3',
-  lineHeight: 1,
-  borderRadius: 3,
-  display: 'flex',
-  alignItems: 'center',
-  height: 25,
-  position: 'relative',
-  userSelect: 'none',
-}
-
-const DropdownMenuTriggerItem = styled(DropdownMenuPrimitive.TriggerItem, {
-  '&[data-state="open"]': {
-    outline: 'none',
-    backgroundColor: '$grayBgHover',
-  },
-  ...itemStyles,
-  padding: '$2 0',
-  '&:focus': {
-    outline: 'none',
-    backgroundColor: '$grayBgHover',
-  },
-})
-
 const DropdownMenu = DropdownMenuPrimitive.Root
 
 const DropdownMenuTrigger = styled(DropdownMenuPrimitive.Trigger, {
@@ -56,64 +29,75 @@ const DropdownMenuTrigger = styled(DropdownMenuPrimitive.Trigger, {
   padding: 0,
   marginRight: '$2',
 })
-const Box = styled('div', {})
 
-const MainContainer = styled(Box, {
-  fontFamily: 'inter',
-  fontSize: '$2',
-  lineHeight: '1.25',
-  color: '$grayText',
+// const MainContainer = styled(Box, {
+//   fontFamily: 'inter',
+//   fontSize: '$2',
+//   lineHeight: '1.25',
+//   color: '$grayText',
+//   display: 'flex',
+//   justifyContent: 'space-between',
+//   alignItems: 'center',
+//   backgroundColor: '$grayBg',
+//   border: '1px solid $grayBorder',
+//   width: '180px',
+//   borderRadius: '$3',
+//   px: '$3',
+//   py: '0px',
+//   cursor: 'pointer',
+//   '&:hover': {
+//     border: '1px solid $grayBorderHover',
+//   },
+//   '@mdDown': {
+//     width: '100%',
+//   },
+// })
+
+const StyledLabel = styled('label', {
+  position: 'relative',
+  width: '154px',
+  height: '40px',
   display: 'flex',
-  justifyContent: 'space-between',
   alignItems: 'center',
-  backgroundColor: '$grayBg',
-  border: '1px solid $grayBorder',
-  width: '180px',
-  borderRadius: '$3',
-  px: '$3',
-  py: '0px',
-  cursor: 'pointer',
-  '&:hover': {
-    border: '1px solid $grayBorderHover',
-  },
-  '@mdDown': {
-    width: '100%',
-  },
-})
+  justifyContent: 'center',
+  textAlign: 'center',
+  fontSize: '13px',
+  borderRadius: '50px',
+  overflow: 'hidden',
 
-const CustomLabelWrapper = styled(Box, {
-  fontSize: 13,
-  padding: 24,
-  borderRadius: 3,
-  cursor: 'default',
-  color: '$grayText',
+  '>input': {
+    position: 'absolute',
+    width: '154px',
+    height: '40px',
 
-  '&:focus': {
-    outline: 'none',
-    backgroundColor: '$grayBgHover',
+    appearance: 'none',
+    '-moz-appearance': 'none',
+    '-webkit-appearance': 'none',
+    background: 'none',
+    border: 'none',
+    cursor: 'pointer',
+  },
+
+  '::-webkit-color-swatch': {
+    border: 0,
+    borderRadius: 0,
+  },
+
+  '::-moz-focus-inner': {
+    padding: 0,
   },
 })
 
 export const LabelColorDropdown = (props: LabelColorDropdownProps) => {
-  const {
-    isCreateMode,
-    canEdit,
-    labelColorHexRowId,
-    labelId,
-    labelColor,
-    labelColorHexValue,
-    setLabelColorHex,
-  } = props
+  const { isCreateMode, canEdit, labelId, labelColor, setLabelColor } = props
 
   const isDarkMode = isDarkTheme()
   const iconColor = isDarkMode ? '#FFFFFF' : '#0A0806'
+  const [colorPickerValue, setColorPickerValue] = useState(props.labelColor)
   const [open, setOpen] = useState<boolean | undefined>(false)
 
   const handleCustomColorChange = (color: string) => {
-    setLabelColorHex({
-      rowId: labelId,
-      value: color.toUpperCase() as LabelColor,
-    })
+    setLabelColor(color.toUpperCase())
   }
 
   const handleOpen = (open: boolean) => {
@@ -134,86 +118,112 @@ export const LabelColorDropdown = (props: LabelColorDropdownProps) => {
           },
         }}
       >
-        <MainContainer>
-          <SpanBox css={{ paddingRight: '$3' }}>
-            {labelId !== '' && labelId === labelColorHexRowId ? (
-              <LabelOption
-                isCreateMode={isCreateMode}
-                labelId={labelId}
-                color={labelColorHexValue}
-                isDropdownOption={false}
-              />
-            ) : (
-              <>
-                {labelId ? (
-                  <LabelOption
-                    isCreateMode={isCreateMode}
-                    labelId={labelId}
-                    color={labelColor}
-                    isDropdownOption={false}
-                  />
-                ) : (
-                  <LabelOption
-                    isCreateMode={isCreateMode}
-                    labelId={''}
-                    color={labelColorHexValue}
-                    isDropdownOption={false}
-                  />
-                )}
-              </>
-            )}
-          </SpanBox>
-
-          <CaretDown size={16} color={iconColor} weight="bold" />
-        </MainContainer>
+        <SpanBox css={{ paddingRight: '$3' }}>
+          <LabelOption
+            isCreateMode={isCreateMode}
+            labelId={''}
+            color={labelColor}
+            isDropdownOption={false}
+          />
+        </SpanBox>
       </DropdownMenuTrigger>
 
-      <DropdownMenuContent sideOffset={5}>
-        {Object.keys(labelColorObjects)
-          .filter((labelColor) => labelColor !== 'custom color')
-          .map((labelColor) => (
-            <DropdownOption
-              key={labelColor}
-              onSelect={() =>
-                setLabelColorHex({
-                  rowId: labelId,
-                  value: labelColor as LabelColor,
-                })
-              }
-            >
-              <LabelOption
-                isCreateMode={isCreateMode}
-                labelId={labelId}
-                color={labelColor}
-                isDropdownOption
-              />
-            </DropdownOption>
-          ))}
-        <DropdownMenu>
-          <DropdownMenuTriggerItem>
-            <CustomLabelWrapper onSelect={() => null}>
-              <LabelOption
-                isCreateMode={isCreateMode}
-                labelId={labelId}
-                color="custom color"
-                isDropdownOption
-              />
-            </CustomLabelWrapper>
-          </DropdownMenuTriggerItem>
-          <DropdownMenuContent
-            sideOffset={-25}
-            alignOffset={-5}
-            css={{ minWidth: 'unset' }}
-          >
-            <HexColorPicker
-              color={labelColor}
-              onChange={handleCustomColorChange}
-            />
-          </DropdownMenuContent>
-        </DropdownMenu>
+      <DropdownMenuContent align="start" sideOffset={-10}>
+        <TwitterPicker />
       </DropdownMenuContent>
     </DropdownMenu>
   )
+
+  return (
+    <Box
+      css={{
+        display: 'flex',
+        flexFlow: 'column',
+        alignItems: 'center',
+      }}
+    >
+      <StyledLabel>
+        <input
+          type="color"
+          value={colorPickerValue}
+          onChange={(event) => {
+            // setColorPickerValue(event.target.value)
+            handleCustomColorChange(event.target.value)
+            event.preventDefault()
+          }}
+        />
+        <SpanBox css={{ zIndex: '19', gap: '5px' }}>
+          {labelId ? (
+            <LabelOption
+              isCreateMode={isCreateMode}
+              labelId={labelId}
+              color={labelColor}
+              isDropdownOption={false}
+            />
+          ) : (
+            <LabelOption
+              isCreateMode={isCreateMode}
+              labelId={''}
+              color={labelColor}
+              isDropdownOption={false}
+            />
+          )}
+        </SpanBox>
+      </StyledLabel>
+    </Box>
+  )
+
+  // return (
+  //   <DropdownMenu onOpenChange={handleOpen} open={open}>
+  //     <DropdownMenuTrigger
+  //       css={{
+  //         minWidth: '64px',
+  //         width: '100%',
+  //         '@md': {
+  //           minWidth: '170px',
+  //           width: 'auto',
+  //         },
+  //       }}
+  //     >
+  //       <MainContainer>
+  //         <SpanBox css={{ paddingRight: '$3' }}>
+  //           {labelId !== '' && labelId === labelColorHexRowId ? (
+  //             <LabelOption
+  //               isCreateMode={isCreateMode}
+  //               labelId={labelId}
+  //               color={labelColorHexValue}
+  //               isDropdownOption={false}
+  //             />
+  //           ) : (
+  //             <>
+  //               {labelId ? (
+  //                 <LabelOption
+  //                   isCreateMode={isCreateMode}
+  //                   labelId={labelId}
+  //                   color={labelColor}
+  //                   isDropdownOption={false}
+  //                 />
+  //               ) : (
+  //                 <LabelOption
+  //                   isCreateMode={isCreateMode}
+  //                   labelId={''}
+  //                   color={labelColorHexValue}
+  //                   isDropdownOption={false}
+  //                 />
+  //               )}
+  //             </>
+  //           )}
+  //         </SpanBox>
+
+  //         <CaretDown size={16} color={iconColor} weight="bold" />
+  //       </MainContainer>
+  //     </DropdownMenuTrigger>
+
+  //     <DropdownMenuContent sideOffset={5}>
+  //       <input type="color"></input>
+  //     </DropdownMenuContent>
+  //   </DropdownMenu>
+  // )
 }
 
 function LabelOption(props: LabelOptionProps): JSX.Element {
@@ -265,26 +275,12 @@ function LabelOption(props: LabelOptionProps): JSX.Element {
           color: '$grayText',
           fontSize: '$3',
           whiteSpace: 'nowrap',
-          textTransform: 'capitalize',
           '@md': {
             display: 'unset',
           },
         }}
       >
-        {colorNameText}
-      </StyledText>
-      <StyledText
-        css={{
-          m: '$1',
-          color: '$grayText',
-          fontSize: '$3',
-          whiteSpace: 'nowrap',
-          '@md': {
-            display: 'unset',
-          },
-        }}
-      >
-        {colorNameText === 'custom color' ? '' : colorHex}
+        {colorHex}
       </StyledText>
       {isDropdownOption ? <Box css={{ pr: '$2' }} /> : null}
     </HStack>
diff --git a/packages/web/package.json b/packages/web/package.json
index d87ed4a4a..5e7657691 100644
--- a/packages/web/package.json
+++ b/packages/web/package.json
@@ -51,6 +51,7 @@
     "phosphor-react": "^1.4.0",
     "pspdfkit": "^2022.2.3",
     "react": "^17.0.2",
+    "react-color": "^2.19.3",
     "react-colorful": "^5.5.1",
     "react-dom": "^17.0.2",
     "react-dropzone": "^14.2.3",
@@ -88,7 +89,9 @@
     "@types/lodash.debounce": "^4.0.6",
     "@types/markdown-it": "^12.2.3",
     "@types/react": "17.0.2",
+    "@types/react-color": "^3.0.6",
     "@types/react-dom": "^17.0.2",
+    "@types/react-input-autosize": "^2.2.1",
     "@types/segment-analytics": "^0.0.34",
     "@types/uuid": "^8.3.1",
     "babel-jest": "^27.4.5",
diff --git a/packages/web/pages/settings/labels.tsx b/packages/web/pages/settings/labels.tsx
index 85e7649d0..24ffae4ce 100644
--- a/packages/web/pages/settings/labels.tsx
+++ b/packages/web/pages/settings/labels.tsx
@@ -146,10 +146,7 @@ const TextArea = styled('textarea', { ...inputStyles })
 
 export default function LabelsPage(): JSX.Element {
   const { labels, revalidate } = useGetLabelsQuery()
-  const [labelColorHex, setLabelColorHex] = useState<LabelColorHex>({
-    rowId: '',
-    value: '#000000',
-  })
+  const [labelColorHex, setLabelColorHex] = useState('#000000')
   const [editingLabelId, setEditingLabelId] = useState<string | null>(null)
   const [nameInputText, setNameInputText] = useState<string>('')
   const [descriptionInputText, setDescriptionInputText] = useState<string>('')
@@ -184,13 +181,13 @@ export default function LabelsPage(): JSX.Element {
     setEditingLabelId('')
     setNameInputText('')
     setDescriptionInputText('')
-    setLabelColorHex({ rowId: '', value: '#000000' })
+    setLabelColorHex('#000000')
   }
 
   async function createLabel(): Promise<void> {
     const res = await createLabelMutation(
       nameInputText.trim(),
-      labelColorHex.value,
+      labelColorHex,
       descriptionInputText
     )
     if (res) {
@@ -206,7 +203,7 @@ export default function LabelsPage(): JSX.Element {
     await updateLabelMutation({
       labelId: id,
       name: nameInputText,
-      color: labelColorHex.value,
+      color: labelColorHex,
       description: descriptionInputText,
     })
     revalidate()
@@ -217,7 +214,7 @@ export default function LabelsPage(): JSX.Element {
       setEditingLabelId(label.id)
       setNameInputText(label.name)
       setDescriptionInputText(label.description || '')
-      setLabelColorHex({ rowId: '', value: label.color })
+      setLabelColorHex(label.color)
     } else {
       resetLabelState()
     }
@@ -244,11 +241,7 @@ export default function LabelsPage(): JSX.Element {
     ) as LabelColor[]
     const randomColorHex =
       colorHexes[Math.floor(Math.random() * colorHexes.length)]
-    setLabelColorHex((prevState) => ({
-      ...prevState,
-      rowId: rowId || '',
-      value: randomColorHex,
-    }))
+    setLabelColorHex(randomColorHex)
   }
 
   return (
@@ -459,8 +452,7 @@ function GenericTableCard(
     resetState,
   } = props
   const showInput = editingLabelId === label?.id || (isCreateMode && !label)
-  const labelColor =
-    editingLabelId === label?.id ? labelColorHex.value : label?.color
+  const labelColor = editingLabelId === label?.id ? labelColorHex : label?.color
   const iconColor = isDarkTheme() ? '#D8D7D5' : '#5F5E58'
 
   const handleEdit = () => {
@@ -649,11 +641,9 @@ function GenericTableCard(
             <LabelColorDropdown
               isCreateMode={isCreateMode && !label}
               canEdit={editingLabelId === label?.id}
-              labelColorHexRowId={labelColorHex.rowId}
-              labelColorHexValue={labelColorHex.value}
+              labelColor={labelColorHex}
+              setLabelColor={setLabelColorHex}
               labelId={label?.id || ''}
-              labelColor={label?.color || '#000000'}
-              setLabelColorHex={setLabelColorHex}
             />
           )}
           {showInput && (
@@ -809,7 +799,7 @@ function MobileEditCard(props: any) {
       <VStack distribution="center" css={{ width: '100%', margin: '8px' }}>
         {nameInputText && (
           <SpanBox css={{ ml: '-2px', mt: '0px' }}>
-            <LabelChip color={labelColorHex.value} text={nameInputText} />
+            <LabelChip color={labelColorHex} text={nameInputText} />
           </SpanBox>
         )}
         <Input
@@ -821,11 +811,9 @@ function MobileEditCard(props: any) {
         <LabelColorDropdown
           isCreateMode={isCreateMode && !label}
           canEdit={editingLabelId === label?.id}
-          labelColorHexRowId={labelColorHex.rowId}
-          labelColorHexValue={labelColorHex.value}
           labelId={label?.id || ''}
           labelColor={label?.color || '#000000'}
-          setLabelColorHex={setLabelColorHex}
+          setLabelColor={setLabelColorHex}
         />
         <TextArea
           placeholder="Description (optional)"
@@ -900,7 +888,7 @@ function DesktopEditCard(props: any) {
       >
         {nameInputText && (
           <SpanBox css={{ px: '11px', mt: '3px' }}>
-            <LabelChip color={labelColorHex.value} text={nameInputText} />
+            <LabelChip color={labelColorHex} text={nameInputText} />
           </SpanBox>
         )}
         <HStack
@@ -917,11 +905,9 @@ function DesktopEditCard(props: any) {
           <LabelColorDropdown
             isCreateMode={isCreateMode && !label}
             canEdit={editingLabelId === label?.id}
-            labelColorHexRowId={labelColorHex.rowId}
-            labelColorHexValue={labelColorHex.value}
             labelId={label?.id || ''}
             labelColor={label?.color || '#000000'}
-            setLabelColorHex={setLabelColorHex}
+            setLabelColor={setLabelColorHex}
           />
           <Input
             type="text"
diff --git a/packages/web/utils/settings-page/labels/types.ts b/packages/web/utils/settings-page/labels/types.ts
index 86bddd89b..56d4d400e 100644
--- a/packages/web/utils/settings-page/labels/types.ts
+++ b/packages/web/utils/settings-page/labels/types.ts
@@ -1,61 +1,57 @@
-import { Label, LabelColor } from "../../../lib/networking/fragments/labelFragment";
+import {
+  Label,
+  LabelColor,
+} from '../../../lib/networking/fragments/labelFragment'
 
 export type LabelOptionProps = {
-  color: string;
-  isDropdownOption?: boolean;
-  isCreateMode: boolean | undefined;
-  labelId: string;
-};
+  color: string
+  isDropdownOption?: boolean
+  isCreateMode: boolean | undefined
+  labelId: string
+}
 
 export type ColorDetailsProps = {
-  colorName: string;
-  color: string;
-  icon: JSX.Element;
-};
+  colorName: string
+  color: string
+  icon: JSX.Element
+}
 
 export type LabelColorObject = {
-  colorName: string;
-  text: string;
-  border: string;
-  background: string;
-};
+  colorName: string
+  text: string
+  border: string
+  background: string
+}
 
 export type LabelColorObjects = {
-  [key: string]: LabelColorObject;
-};
-
-export type LabelColorHex = {
-  rowId: string;
-  value: LabelColor;
-};
+  [key: string]: LabelColorObject
+}
 
 export type GenericTableCardProps = {
-  label: Label | null;
-  editingLabelId: string | null;
-  labelColorHex: LabelColorHex;
-  isCreateMode: boolean;
-  nameInputText: string,
-  descriptionInputText: string,
-  isMobileView?: boolean;
-  handleGenerateRandomColor: (rowId?: string) => void;
-  setEditingLabelId: (id: string | null) => void;
-  setLabelColorHex: (color: LabelColorHex) => void;
-  deleteLabel: (id: string) => void;
-  setNameInputText: (text: string) => void,
-  setDescriptionInputText: (text: string) => void,
-  resetState: () => void,
-  createLabel: () => void,
-  updateLabel: (id: string) => void;
-  setIsCreateMode: (isCreateMode: boolean) => void,
-  onEditPress: (label: Label | null) => void,
-};
+  label: Label | null
+  editingLabelId: string | null
+  labelColorHex: string
+  isCreateMode: boolean
+  nameInputText: string
+  descriptionInputText: string
+  isMobileView?: boolean
+  handleGenerateRandomColor: (rowId?: string) => void
+  setEditingLabelId: (id: string | null) => void
+  setLabelColorHex: (color: string) => void
+  deleteLabel: (id: string) => void
+  setNameInputText: (text: string) => void
+  setDescriptionInputText: (text: string) => void
+  resetState: () => void
+  createLabel: () => void
+  updateLabel: (id: string) => void
+  setIsCreateMode: (isCreateMode: boolean) => void
+  onEditPress: (label: Label | null) => void
+}
 
 export type LabelColorDropdownProps = {
-  isCreateMode: boolean;
-  canEdit: boolean;
-  labelColorHexRowId: string;
-  labelColorHexValue: string;
-  labelId: string;
-  labelColor: LabelColor;
-  setLabelColorHex: (color: LabelColorHex) => void;
-};
+  isCreateMode: boolean
+  canEdit: boolean
+  labelId: string
+  labelColor: string
+  setLabelColor: (color: string) => void
+}
diff --git a/yarn.lock b/yarn.lock
index 1bed118fe..025cd3b97 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3245,6 +3245,11 @@
   resolved "https://registry.yarnpkg.com/@iarna/toml/-/toml-2.2.5.tgz#b32366c89b43c6f8cefbdefac778b9c828e3ba8c"
   integrity sha512-trnsAYxU3xnS1gPHPyU961coFyLkh4gAD/0zQ5mymY4yOZ+CYvsPqUbOFSw0aDM4y0tV7tiFxL/1XfXPNC6IPg==
 
+"@icons/material@^0.2.4":
+  version "0.2.4"
+  resolved "https://registry.yarnpkg.com/@icons/material/-/material-0.2.4.tgz#e90c9f71768b3736e76d7dd6783fc6c2afa88bc8"
+  integrity sha512-QPcGmICAPbGLGb6F/yNf/KzKqvFx8z5qx3D1yFqVAjoFmXK35EgyW+cJ57Te3CNsmzblwtzakLGFqHPqrfb4Tw==
+
 "@istanbuljs/load-nyc-config@^1.0.0":
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/@istanbuljs/load-nyc-config/-/load-nyc-config-1.1.0.tgz#fd3db1d59ecf7cf121e80650bb86712f9b55eced"
@@ -8703,6 +8708,14 @@
   resolved "https://registry.yarnpkg.com/@types/range-parser/-/range-parser-1.2.4.tgz#cd667bcfdd025213aafb7ca5915a932590acdcdc"
   integrity sha512-EEhsLsD6UsDM1yFhAvy0Cjr6VwmpMWqFBCb9w07wVugF7w9nfajxLuVmngTIpgS6svCnm6Vaw+MZhoDCKnOfsw==
 
+"@types/react-color@^3.0.6":
+  version "3.0.6"
+  resolved "https://registry.yarnpkg.com/@types/react-color/-/react-color-3.0.6.tgz#602fed023802b2424e7cd6ff3594ccd3d5055f9a"
+  integrity sha512-OzPIO5AyRmLA7PlOyISlgabpYUa3En74LP8mTMa0veCA719SvYQov4WLMsHvCgXP+L+KI9yGhYnqZafVGG0P4w==
+  dependencies:
+    "@types/react" "*"
+    "@types/reactcss" "*"
+
 "@types/react-dom@^17.0.2":
   version "17.0.11"
   resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-17.0.11.tgz#e1eadc3c5e86bdb5f7684e00274ae228e7bcc466"
@@ -8741,6 +8754,13 @@
     "@types/prop-types" "*"
     csstype "^3.0.2"
 
+"@types/reactcss@*":
+  version "1.2.6"
+  resolved "https://registry.yarnpkg.com/@types/reactcss/-/reactcss-1.2.6.tgz#133c1e7e896f2726370d1d5a26bf06a30a038bcc"
+  integrity sha512-qaIzpCuXNWomGR1Xq8SCFTtF4v8V27Y6f+b9+bzHiv087MylI/nTCqqdChNeWS7tslgROmYB7yeiruWX7WnqNg==
+  dependencies:
+    "@types/react" "*"
+
 "@types/request@*":
   version "2.48.7"
   resolved "https://registry.yarnpkg.com/@types/request/-/request-2.48.7.tgz#a962d11a26e0d71d9a9913d96bb806dc4d4c2f19"
@@ -19029,7 +19049,7 @@ locate-path@^6.0.0:
   dependencies:
     p-locate "^5.0.0"
 
-lodash-es@^4.17.11:
+lodash-es@^4.17.11, lodash-es@^4.17.15:
   version "4.17.21"
   resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.21.tgz#43e626c46e6591b7750beb2b50117390c609e3ee"
   integrity sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==
@@ -19174,7 +19194,7 @@ lodash.uniq@4.5.0, lodash.uniq@^4.5.0:
   resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
   integrity sha1-0CJTc662Uq3BvILklFM5qEJ1R3M=
 
-lodash@^4.17.13, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.20, lodash@^4.17.21, lodash@^4.17.4, lodash@^4.7.0, lodash@~4.17.0:
+lodash@^4.0.1, lodash@^4.17.13, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.20, lodash@^4.17.21, lodash@^4.17.4, lodash@^4.7.0, lodash@~4.17.0:
   version "4.17.21"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
   integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
@@ -19576,6 +19596,11 @@ match-sorter@^6.3.1:
     "@babel/runtime" "^7.12.5"
     remove-accents "0.4.2"
 
+material-colors@^1.2.1:
+  version "1.2.6"
+  resolved "https://registry.yarnpkg.com/material-colors/-/material-colors-1.2.6.tgz#6d1958871126992ceecc72f4bcc4d8f010865f46"
+  integrity sha512-6qE4B9deFBIa9YSpOc9O0Sgc43zTeVYbgDT5veRKSlB2+ZuHNoVVxA1L/ckMUayV9Ay9y7Z/SZCLcGteW9i7bg==
+
 md5.js@^1.3.4:
   version "1.3.5"
   resolved "https://registry.yarnpkg.com/md5.js/-/md5.js-1.3.5.tgz#b5d07b8e3216e3e27cd728d72f70d1e6a342005f"
@@ -22776,7 +22801,7 @@ promzard@^0.3.0:
   dependencies:
     read "1"
 
-prop-types@^15.0.0, prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.8.1:
+prop-types@^15.0.0, prop-types@^15.5.10, prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.8.1:
   version "15.8.1"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
   integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
@@ -23653,6 +23678,19 @@ rc@^1.2.8:
     minimist "^1.2.0"
     strip-json-comments "~2.0.1"
 
+react-color@^2.19.3:
+  version "2.19.3"
+  resolved "https://registry.yarnpkg.com/react-color/-/react-color-2.19.3.tgz#ec6c6b4568312a3c6a18420ab0472e146aa5683d"
+  integrity sha512-LEeGE/ZzNLIsFWa1TMe8y5VYqr7bibneWmvJwm1pCn/eNmrabWDh659JSPn9BuaMpEfU83WTOJfnCcjDZwNQTA==
+  dependencies:
+    "@icons/material" "^0.2.4"
+    lodash "^4.17.15"
+    lodash-es "^4.17.15"
+    material-colors "^1.2.1"
+    prop-types "^15.5.10"
+    reactcss "^1.2.0"
+    tinycolor2 "^1.4.1"
+
 react-colorful@^5.1.2, react-colorful@^5.5.1:
   version "5.5.1"
   resolved "https://registry.yarnpkg.com/react-colorful/-/react-colorful-5.5.1.tgz#29d9c4e496f2ca784dd2bb5053a3a4340cfaf784"
@@ -23948,6 +23986,13 @@ react@^17.0.2:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
 
+reactcss@^1.2.0:
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/reactcss/-/reactcss-1.2.3.tgz#c00013875e557b1cf0dfd9a368a1c3dab3b548dd"
+  integrity sha512-KiwVUcFu1RErkI97ywr8nvx8dNOpT03rbnma0SSalTYjkrPYaEajR4a/MRt6DZ46K6arDRbWMNHF+xH7G7n/8A==
+  dependencies:
+    lodash "^4.0.1"
+
 read-cmd-shim@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/read-cmd-shim/-/read-cmd-shim-2.0.0.tgz#4a50a71d6f0965364938e9038476f7eede3928d9"
@@ -26460,6 +26505,11 @@ tiny-invariant@^1.2.0:
   resolved "https://registry.yarnpkg.com/tiny-invariant/-/tiny-invariant-1.2.0.tgz#a1141f86b672a9148c72e978a19a73b9b94a15a9"
   integrity sha512-1Uhn/aqw5C6RI4KejVeTg6mIS7IqxnLJ8Mv2tV5rTc0qWobay7pDUz6Wi392Cnc8ak1H0F2cjoRzb2/AW4+Fvg==
 
+tinycolor2@^1.4.1:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/tinycolor2/-/tinycolor2-1.6.0.tgz#f98007460169b0263b97072c5ae92484ce02d09e"
+  integrity sha512-XPaBkWQJdsf3pLKJV9p4qN/S+fm2Oj8AIPo1BTUhg5oxkvm9+SVEGFdhyOz7tTdUTfvxMiAs4sp6/eZO2Ew+pw==
+
 title-case@^2.1.0:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/title-case/-/title-case-2.1.1.tgz#3e127216da58d2bc5becf137ab91dae3a7cd8faa"