Pick Palette

A color palette manager made with Svelte!

View website

Features

• Smooth transitions done purely with svelte/transition
• Custom-built color picker with support for h, s, v, r, g, b modes
• Custom-built drag-and-drop color tabs
• Fullscreen file input
• Full undo/redo functionality with Immer
• Data is all kept in local storage
• Multi-tab support with local storage synchronization
• Keyboard shortcuts with Mousetrap
• Project import/export file with validation
• Routing with @bjornlu/svelte-router
• Color blindness simulation with @bjornlu/colorblind
• Developed with Vite, TypeScript and Windi CSS

Notes

• Snackbar is never used
• State management is separated to state, actions, effects and utils (Explanation)
• Color picker isn't perfect but functional. Defects include:
  • Color box gradient is inaccurate in different browsers
  • Dispatched changes aren't properly throttled
• Default generated shades is only OK looking

Development

Install dependencies with pnpm install.

# Start dev server
$ pnpm dev

# Build for production
$ pnpm build

# Preview production build
$ pnpm serve

# Format code with Prettier
$ pnpm format

Code is auto-formatted on each git push with husky and lint-staged.

License

MIT