diff --git a/src/components/ColorSwatch/ColorSwatch.sass b/src/components/ColorSwatch/ColorSwatch.sass
new file mode 100644
index 0000000..ee1c3f8
--- /dev/null
+++ b/src/components/ColorSwatch/ColorSwatch.sass
@@ -0,0 +1,4 @@
+.colorswatch
+  height: 56px
+  width: 56px
+  border-radius: 8px
diff --git a/src/components/ColorSwatch/ColorSwatch.tsx b/src/components/ColorSwatch/ColorSwatch.tsx
new file mode 100644
index 0000000..4ff2b20
--- /dev/null
+++ b/src/components/ColorSwatch/ColorSwatch.tsx
@@ -0,0 +1,17 @@
+import './ColorSwatch.sass'
+import { Show } from 'solid-js'
+
+export default (props: { color: string; height?: number, width?: number; isPreset?: boolean; onClick?: () => void }) => {
+  return (
+    <>
+      <Show when={props.isPreset}>
+        <section class='colorswatch' style={`background-color: ${props.color}; height: ${props.height}rem; width: ${props.width}rem; cursor: pointer;`} onClick={props.onClick} />
+      </Show>
+
+      <Show when={!props.isPreset}>
+        <section class='colorswatch' style={`background-color: ${props.color}; height: ${props.height}rem; width: ${props.width}rem;`} />
+      </Show>
+
+    </>
+  )
+}
\ No newline at end of file