diff --git a/src/locales/en.json b/src/locales/en.json
index aa115244..107bdcc1 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -437,6 +437,20 @@
       "context": "Prompt to confirm user wants to reset settings"
     }
   },
+  "color": {
+    "color": {
+      "string": "Color",
+      "context": "Refers to the hue of a color"
+    },
+    "saturation": {
+      "string": "Saturation",
+      "context": "Refers to the saturation of a color"
+    },
+    "brightness": {
+      "string": "Brightness",
+      "context": "Refers to the brightness of a color"
+    }
+  },
   "preview": {
     "loading": {
       "string": "Loading Preview"
diff --git a/src/p4/ColorPicker.svelte b/src/p4/ColorPicker.svelte
deleted file mode 100644
index 76ec07bd..00000000
--- a/src/p4/ColorPicker.svelte
+++ /dev/null
@@ -1,5 +0,0 @@
-<script>
-  export let value;
-</script>
-
-<input type="color" bind:value />
diff --git a/src/p4/PackagerOptions.svelte b/src/p4/PackagerOptions.svelte
index 0e112b07..0d586af2 100644
--- a/src/p4/PackagerOptions.svelte
+++ b/src/p4/PackagerOptions.svelte
@@ -7,7 +7,7 @@
   import ImageInput from './ImageInput.svelte';
   import CustomExtensions from '../p4/CustomExtensions.svelte';
   import LearnMore from './LearnMore.svelte';
-  import ColorPicker from './ColorPicker.svelte';
+  import ColorPicker from './colors/ColorPicker.svelte';
   import writablePersistentStore from './persistent-store';
   import fileStore from './file-store';
   import {progress, currentTask} from './stores';
@@ -175,6 +175,11 @@
   .group {
     margin: 12px 0;
   }
+  .color {
+    display: flex;
+    align-items: center;
+    margin-bottom: 4px;
+  }
   p {
     margin: 8px 0;
   }
@@ -403,21 +408,18 @@
     <p>{$_('options.controlsHelp')}</p>
 
     <h3>{$_('options.colors')}</h3>
-    <!-- svelte-ignore a11y-label-has-associated-control -->
-    <label class="option">
-      <ColorPicker bind:value={$options.appearance.background} />
+    <div class="option color">
+      <ColorPicker bind:value={$options.appearance.background} defaultColor={defaultOptions.appearance.background} />
       {$_('options.backgroundColor')}
-    </label>
-    <!-- svelte-ignore a11y-label-has-associated-control -->
-    <label class="option">
-      <ColorPicker bind:value={$options.appearance.foreground} />
+    </div>
+    <div class="option color">
+      <ColorPicker bind:value={$options.appearance.foreground} defaultColor={defaultOptions.appearance.foreground} />
       {$_('options.foregroundColor')}
-    </label>
-    <!-- svelte-ignore a11y-label-has-associated-control -->
-    <label class="option">
-      <ColorPicker bind:value={$options.appearance.accent} />
+    </div>
+    <div class="option color">
+      <ColorPicker bind:value={$options.appearance.accent} defaultColor={defaultOptions.appearance.accent} />
       {$_('options.accentColor')}
-    </label>
+    </div>
 
     <h3>{$_('options.monitors')}</h3>
     <label class="option">
diff --git a/src/p4/ResetButton.svelte b/src/p4/ResetButton.svelte
index 2f1510f2..65d7d96a 100644
--- a/src/p4/ResetButton.svelte
+++ b/src/p4/ResetButton.svelte
@@ -3,10 +3,12 @@
   import {_} from '../locales/';
   import icon from './reset.svg';
 
+  export let confirm = true;
+
   const dispatch = createEventDispatcher();
 
   const click = () => {
-    if (confirm($_('reset.confirm'))) {
+    if (!confirm || window.confirm($_('reset.confirm'))) {
       dispatch('click');
     }
   };
diff --git a/src/p4/colors/ColorPicker.svelte b/src/p4/colors/ColorPicker.svelte
new file mode 100644
index 00000000..febc83d0
--- /dev/null
+++ b/src/p4/colors/ColorPicker.svelte
@@ -0,0 +1,238 @@
+<script>
+  import ColorSlider from './ColorSlider.svelte';
+  import ResetButton from '../ResetButton.svelte';
+  import {hexToRgb, rgbToHex, rgbToHsv, hsvToRgb, normalizeHex} from './color-utils';
+  import {_} from '../../locales';
+
+  export let value;
+  export let defaultColor;
+
+  let internalHex;
+  let internalHsv;
+
+  const updateExternalHex = () => {
+    value = internalHex;
+  };
+  const setHsv = (hsv) => {
+    const rgb = hsvToRgb(...hsv);
+    const hex = rgbToHex(...rgb);
+    internalHex = hex;
+    internalHsv = hsv;
+    updateExternalHex();
+  };
+  const setInternalHex = (hex) => {
+    const valueAsRgb = hexToRgb(hex);
+    internalHex = hex;
+    internalHsv = rgbToHsv(...valueAsRgb);
+  };
+  const setHex = (hex) => {
+    setInternalHex(hex);
+    updateExternalHex();
+  };
+  const reset = () => {
+    setHex(defaultColor);
+  };
+  $: setInternalHex(value);
+
+  let open = false;
+  let editorElement;
+
+  const handleOpen = () => {
+    open = !open;
+  };
+  const checkClickedOutside = (e) => {
+    if (open && editorElement && !editorElement.contains(e.target)) {
+      open = false;
+    }
+  };
+
+  const updateHsvChannelFactory = (index) => (e) => {
+    const newColor = [...internalHsv];
+    newColor[index] = e.detail;
+    setHsv(newColor);
+  };
+
+  const generateHueSteps = (hsv) => {
+    const result = [];
+    for (let i = 0; i < 1; i += 0.1) {
+      result.push(rgbToHex(...hsvToRgb(i, hsv[1], hsv[2])));
+    }
+    return result;
+  };
+  const generateSaturationSteps = (hsv) => {
+    const result = [];
+    for (let i = 0; i < 1; i += 0.1) {
+      result.push(rgbToHex(...hsvToRgb(hsv[0], i, hsv[2])));
+    }
+    return result;
+  };
+  const generateBrightnessSteps = (hsv) => {
+    const result = [];
+    for (let i = 0; i < 1; i += 0.1) {
+      result.push(rgbToHex(...hsvToRgb(hsv[0], hsv[1], i)));
+    }
+    return result;
+  };
+</script>
+
+<style>
+  .container {
+    position: relative;
+    margin-right: 4px;
+  }
+  .button, .editor {
+    border: 1px solid rgb(160, 160, 160);
+  }
+  .button {
+    background-color: #eee;
+    width: 40px;
+    height: 2em;
+    border-radius: 2px;
+    margin: 0;
+    padding: 3px;
+    box-sizing: border-box;
+  }
+  .button:hover {
+    background-color: #ddd;
+  }
+  .button:active {
+    background-color: #ccc;
+  }
+  .color-preview {
+    width: 100%;
+    height: 100%;
+  }
+
+  .editor {
+    background: white;
+    position: absolute;
+    z-index: 10;
+    top: 100%;
+    border-radius: 4px;
+    padding: 8px;
+    box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.5);
+  }
+
+  :global([theme="dark"]) .button,
+  :global([theme="dark"]) .editor {
+    background-color: #333;
+    border-color: #888;
+  }
+  :global([theme="dark"]) .button:hover {
+    background-color: #444;
+  }
+  :global([theme="dark"]) .button:active {
+    background-color: #555;
+  }
+
+  .slider-section {
+    margin-bottom: 12px;
+  }
+  .label {
+    display: flex;
+    font-weight: bold;
+  }
+  .value {
+    font-weight: normal;
+    margin-left: 12px;
+  }
+
+  .bottom-section {
+    display: flex;
+    align-items: center;
+    height: 24px;
+  }
+  .native-input {
+    width: 40px;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    border: none;
+  }
+  .hex-input {
+    width: 60px;
+  }
+  .native-input, .hex-input {
+    height: 100%;
+    margin-right: 8px;
+    box-sizing: border-box;
+  }
+</style>
+
+<svelte:body on:mousedown={checkClickedOutside} />
+
+<div class="container" bind:this={editorElement}>
+  <button class="button" on:click={handleOpen}>
+    <div class="color-preview" style={`background-color: ${normalizeHex(internalHex)}`}></div>
+  </button>
+
+  {#if open}
+    <div class="editor">
+      <div class="slider-section">
+        <div class="label">
+          {$_('color.color')}
+          <div class="value">{Math.round(internalHsv[0] * 100)}</div>
+        </div>
+        <div class="slider">
+          <ColorSlider
+            value={internalHsv[0]}
+            steps={generateHueSteps(internalHsv)}
+            on:change={updateHsvChannelFactory(0)}
+          />
+        </div>
+      </div>
+
+      <div class="slider-section">
+        <div class="label">
+          {$_('color.saturation')}
+          <div class="value">{Math.round(internalHsv[1] * 100)}</div>
+        </div>
+        <div class="slider">
+          <ColorSlider
+            value={internalHsv[1]}
+            steps={generateSaturationSteps(internalHsv)}
+            on:change={updateHsvChannelFactory(1)}
+          />
+        </div>
+      </div>
+
+      <div class="slider-section">
+        <div class="label">
+          {$_('color.brightness')}
+          <div class="value">{Math.round(internalHsv[2] * 100)}</div>
+        </div>
+        <div class="slider">
+          <ColorSlider
+            value={internalHsv[2]}
+            steps={generateBrightnessSteps(internalHsv)}
+            on:change={updateHsvChannelFactory(2)}
+          />
+        </div>
+      </div>
+
+      <div class="bottom-section">
+        <input
+          class="native-input"
+          type="color"
+          value={normalizeHex(internalHex)}
+          on:input={(e) => {
+            setHex(e.target.value);
+          }}
+        />
+        <input
+          class="hex-input"
+          type="text"
+          value={internalHex}
+          on:input={(e) => {
+            setInternalHex(e.target.value);
+          }}
+          on:change={updateExternalHex}
+        />
+        <ResetButton
+          on:click={reset}
+          confirm={false}
+        />
+      </div>
+    </div>
+  {/if}
+</div>
diff --git a/src/p4/colors/ColorSlider.svelte b/src/p4/colors/ColorSlider.svelte
new file mode 100644
index 00000000..0423d67a
--- /dev/null
+++ b/src/p4/colors/ColorSlider.svelte
@@ -0,0 +1,78 @@
+<script>
+  import {createEventDispatcher} from 'svelte';
+
+  export let value = 0;
+  export let steps = [];
+
+  const dispatch = createEventDispatcher();
+
+  let sliderRect;
+  let sliderElement;
+  let knobRect;
+  let knobElement;
+
+  let isMoving = false;
+  let distanceFromLeft = 0;
+
+  const setMousePosition = (clientX) => {
+    const unclampedValue = (clientX - sliderRect.left) / (sliderRect.width - knobRect.width);
+    value = Math.max(0, Math.min(1, unclampedValue));
+    distanceFromLeft = value * (sliderRect.width - knobRect.width);
+    dispatch('change', value);
+  };
+  const onMouseMove = (e) => {
+    if (!isMoving) return;
+    setMousePosition(e.clientX);
+  };
+
+  const startMoving = () => {
+    sliderRect = sliderElement.getBoundingClientRect();
+    knobRect = knobElement.getBoundingClientRect();
+    isMoving = true;
+  };
+  const onMouseDownSlider = (e) => {
+    startMoving();
+  };
+  const onMouseDownKnob = (e) => {
+    startMoving();
+    setMousePosition(e.clientX);
+  };
+  const onMouseUp = () => {
+    if (!isMoving) return;
+    isMoving = false;
+  }
+</script>
+
+<style>
+  .slider {
+    position: relative;
+    width: 150px;
+    height: 25px;
+    border-radius: 12px;
+    cursor: pointer;
+  }
+  .knob {
+    position: absolute;
+    width: 25px;
+    height: 25px;
+    border-radius: 100%;
+    background: white;
+    box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.3);
+  }
+</style>
+
+<svelte:body on:mousemove={onMouseMove} on:mouseup={onMouseUp} />
+
+<div
+  class="slider"
+  style={`background: linear-gradient(to right, ${steps.join(',')})`}
+  on:mousedown|preventDefault={onMouseDownSlider}
+  bind:this={sliderElement}
+>
+  <div
+    class="knob"
+    style={`left: ${distanceFromLeft}px`}
+    on:mousedown|preventDefault={onMouseDownKnob}
+    bind:this={knobElement}
+  />
+</div>
diff --git a/src/p4/colors/color-utils.js b/src/p4/colors/color-utils.js
new file mode 100644
index 00000000..5167242d
--- /dev/null
+++ b/src/p4/colors/color-utils.js
@@ -0,0 +1,72 @@
+// For all color operations:
+//  - The R, G, B channels of RGB[A] are in [0-255]
+//  - The H, S, V channels of HSV[A] are in [0-1]
+//  - The A channel is always in [0-1]
+
+export const hexToRgb = (hex) => {
+  hex = hex.trim();
+  if (hex.startsWith('#')) {
+    hex = hex.substr(1);
+  }
+  if (hex.length === 3) {
+    hex = hex.split('').map(i => i + i).join('');
+  }
+  const parsed = parseInt(hex, 16);
+  return [
+    (parsed >> 16) & 0xff,
+    (parsed >> 8) & 0xff,
+    parsed & 0xff
+  ];
+};
+
+export const rgbToHex = (r, g, b) => {
+  return '#' + Math.round(r).toString(16).padStart(2, '0') + Math.round(g).toString(16).padStart(2, '0') + Math.round(b).toString(16).padStart(2, '0');
+};
+
+export const normalizeHex = (hex) => {
+  const [r, g, b] = hexToRgb(hex);
+  return rgbToHex(r, g, b);
+};
+
+export const rgbToHsv = (r, g, b) => {
+  r /= 255;
+  g /= 255;
+  b /= 255;
+  var max = Math.max(r, g, b), min = Math.min(r, g, b);
+  var h, s, v = max;
+  var d = max - min;
+  s = max == 0 ? 0 : d / max;
+  if (max == min) {
+    h = 0;
+    if (min === 0) {
+      // Saturation does not matter in the case of pure black, so just set it to 1 instead so the editor makes more sense
+      s = 1;
+    }
+  } else {
+    switch (max) {
+      case r: h = (g - b) / d + (g < b ? 6 : 0); break;
+      case g: h = (b - r) / d + 2; break;
+      case b: h = (r - g) / d + 4; break;
+    }
+    h /= 6;
+  }
+  return [h, s, v];
+};
+
+export const hsvToRgb = (h, s, v) => {
+  var r, g, b;
+  var i = Math.floor(h * 6);
+  var f = h * 6 - i;
+  var p = v * (1 - s);
+  var q = v * (1 - f * s);
+  var t = v * (1 - (1 - f) * s);
+  switch (i % 6) {
+    case 0: r = v, g = t, b = p; break;
+    case 1: r = q, g = v, b = p; break;
+    case 2: r = p, g = v, b = t; break;
+    case 3: r = p, g = q, b = v; break;
+    case 4: r = t, g = p, b = v; break;
+    case 5: r = v, g = p, b = q; break;
+  }
+  return [r * 255, g * 255, b * 255];
+};
diff --git a/test/p4/color-utils.test.js b/test/p4/color-utils.test.js
new file mode 100644
index 00000000..ccde23a6
--- /dev/null
+++ b/test/p4/color-utils.test.js
@@ -0,0 +1,59 @@
+import {hexToRgb, rgbToHex, rgbToHsv, hsvToRgb, normalizeHex} from '../../src/p4/colors/color-utils';
+
+test('hexToRgb', () => {
+  expect(hexToRgb('#000000')).toEqual([0, 0, 0]);
+  expect(hexToRgb('#fffFFf')).toEqual([255, 255, 255]);
+  expect(hexToRgb('#abcdef')).toEqual([0xab, 0xcd, 0xef]);
+  expect(hexToRgb('abcdef')).toEqual([0xab, 0xcd, 0xef]);
+  expect(hexToRgb(' abcdef ')).toEqual([0xab, 0xcd, 0xef]);
+  expect(hexToRgb('#fff')).toEqual([255, 255, 255]);
+  expect(hexToRgb('abc')).toEqual([0xaa, 0xbb, 0xcc]);
+});
+
+test('rgbToHex', () => {
+  expect(rgbToHex(0, 0, 0)).toEqual('#000000');
+  expect(rgbToHex(255, 255, 255)).toEqual('#ffffff');
+  expect(rgbToHex(255, 0, 0)).toEqual('#ff0000');
+  expect(rgbToHex(0, 255, 0)).toEqual('#00ff00');
+  expect(rgbToHex(0, 0, 255)).toEqual('#0000ff');
+  expect(rgbToHex(0xab, 0xcd, 0x12)).toEqual('#abcd12');
+  expect(rgbToHex(1, 2, 255)).toEqual('#0102ff');
+});
+
+test('normalizeHex', () => {
+  expect(normalizeHex('#AbCdEf')).toEqual('#abcdef');
+  expect(normalizeHex('AbCdEf')).toEqual('#abcdef');
+  expect(normalizeHex('111')).toEqual('#111111');
+});
+
+test('rgbToHsv', () => {
+  expect(rgbToHsv(0, 0, 0)[0]).toEqual(0);
+  // (saturation does not matter in pure black)
+  expect(rgbToHsv(0, 0, 0)[2]).toEqual(0);
+  expect(rgbToHsv(255, 255, 255)).toEqual([0, 0, 1]);
+  expect(rgbToHsv(255, 0, 0)).toEqual([0, 1, 1]);
+});
+
+test('hsvToRgb', () => {
+  expect(hsvToRgb(0, 0, 0)).toEqual([0, 0, 0]);
+});
+
+test('round-trip accuracy', () => {
+  for (const color of [
+    '#4c5aff',
+    '5a4cff',
+    '000000',
+    'ffffff',
+    'abcdef',
+    '123456',
+    '002348',
+    'acbd38'
+  ]) {
+    const rgb = hexToRgb(color);
+    const hsv = rgbToHsv(...rgb);
+    const rgb2 = hsvToRgb(...hsv);
+    expect(Math.abs(rgb2[0] - rgb[0])).toBeLessThan(0.0001);
+    expect(Math.abs(rgb2[1] - rgb[1])).toBeLessThan(0.0001);
+    expect(Math.abs(rgb2[2] - rgb[2])).toBeLessThan(0.0001);
+  }
+});