diff --git a/src/components/ColorInput/ColorInput.css b/src/components/ColorInput/ColorInput.css
new file mode 100644
index 0000000..02f40d8
--- /dev/null
+++ b/src/components/ColorInput/ColorInput.css
@@ -0,0 +1,46 @@
+.color-picker {
+  position: relative;
+  overflow: hidden;
+  height: 48px;
+  min-width: 112px;
+  flex: 1;
+  border: none;
+  outline: none;
+  -webkit-appearance: none;
+}
+
+.color-picker span {
+  position: absolute;
+  margin: 0;
+  top: 50%;
+  left: 50%;
+  -ms-transform: translate(-50%, -50%);
+  transform: translate(-50%, -50%);
+  user-select: none;
+  pointer-events: none;
+}
+
+input.color-input {
+  position: relative;
+  height: 100%;
+  width: 96%;
+  box-sizing: border-box;
+  border: none;
+  border-radius: 8px;
+  margin: 0 0 0 4px;
+  padding: 0;
+}
+
+input.color-input::-webkit-color-swatch-wrapper {
+  padding: 0;
+}
+
+input.color-input::-webkit-color-swatch {
+  border: none;
+  border-radius: 100%;
+}
+
+input.color-input:focus {
+  outline: none;
+  border: 2px solid white;
+}
\ No newline at end of file
diff --git a/src/components/ColorInput/ColorInput.tsx b/src/components/ColorInput/ColorInput.tsx
index 25d4e65..f1e06db 100644
--- a/src/components/ColorInput/ColorInput.tsx
+++ b/src/components/ColorInput/ColorInput.tsx
@@ -1,29 +1,37 @@
 import React from "react";
 import { useRecoilState } from "recoil";
+import TinyColor from "tinycolor2";
 
 import { iconColorAtom } from "../../state/atoms";
+import useThrottled from "../../hooks/useThrottled";
+import "./ColorInput.css";
 
 type ColorInputProps = {};
 
 const ColorInput: React.FC<ColorInputProps> = () => {
   const [color, setColor] = useRecoilState(iconColorAtom);
-
+  const isDark = TinyColor(color).isDark();
+  
   const handleColorChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     const {
       target: { value: color },
     } = event;
     if (color[0] === "#") setColor(color);
   };
-
+  
+  const throttledColorChange = useThrottled(handleColorChange, 100, [handleColorChange])
+  
   return (
-    <div>
+    <div className="color-picker">
       <input
-        id="color-picker"
+        className="color-input"
         aria-label="Icon Color"
+        style={{ backgroundColor: color }}
         type="color"
-        onChange={handleColorChange}
+        onChange={throttledColorChange}
         value={color}
       />
+      <span style={{ color: isDark ? "white" : "black" }}>{color}</span>
     </div>
   );
 };
diff --git a/src/hooks/useThrottled.ts b/src/hooks/useThrottled.ts
new file mode 100644
index 0000000..beb40c1
--- /dev/null
+++ b/src/hooks/useThrottled.ts
@@ -0,0 +1,31 @@
+import { useRef, useEffect, useCallback } from "react";
+
+type Callback = (...args: any) => void;
+
+export default (
+  callback: Callback,
+  delay: number,
+  dependencies: any[] = []
+) => {
+  const throttleRef = useRef<Boolean>(false);
+  const callbackRef = useRef<Callback>(callback);
+
+  // Update the callback to be used, if it ever changes
+  useEffect(() => {
+    callbackRef.current = callback;
+  }, [callback]);
+
+  return useCallback<Callback>(
+    (...args) => {
+      if (throttleRef.current) return;
+
+      throttleRef.current = true;
+      callbackRef.current(...args);
+      setTimeout(() => {
+        throttleRef.current = false;
+      }, delay);
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [delay, ...dependencies]
+  );
+};