Color Picker Component

Problem Description

A design tool startup is building a brand kit editor for their web app. One of the core UI pieces needed is a color picker component — a reusable Svelte component that lets users pick a color from a palette of swatches and see a live preview of the selected color.

The component needs to be genuinely reusable: the parent page must be able to read and write the currently selected color directly (two-way binding), so it can be pre-loaded with a saved brand color on mount and automatically save any changes. The component should also notify the parent whenever the selection changes via a callback so the parent can trigger autosave logic.

The team is adopting Svelte 5 and wants everything written in that style — no legacy Svelte 4 patterns.

Output Specification

Create the following files:

• src/lib/ColorPicker.svelte — The reusable color picker component. It should:

  • Accept a color value that supports two-way binding from the parent
  • Accept a callback that is called when the color changes
  • Display a set of at least 6 color swatches (hard-coded is fine)
  • Show the currently selected color visually
  • Track any necessary internal state (e.g., whether a popover is open, a hovered swatch)
  • Show a derived label or display string for the current color (e.g., the hex code)

• src/routes/brand/+page.svelte — A page that:

  • Uses the ColorPicker component with two-way binding on a brand color variable
  • Displays the current brand color value somewhere on the page
  • Has a handler that logs or records when the color changes (simulating autosave)

Both files should be written for Svelte 5 with TypeScript.