Colour Picker

A lightweight colour picker application built with Tauri for extracting colours from images.

Privacy First

This application collects absolutely no data. All image processing happens locally on your device. No analytics, no tracking, no telemetry. Images never leave your computer.

Why Tauri?

This application uses Tauri instead of Electron to achieve significantly smaller build sizes and lower resource usage. The final application is approximately 90% smaller than an equivalent Electron build, with substantially reduced memory footprint during runtime.

Key benefits:

• 10-20MB application size vs 100-200MB for Electron
• 60-70% lower memory usage
• Better performance through Rust backend
• Enhanced security via Tauri's permission system
• Reduced distribution bandwidth

Features

• Click to load images from your computer
• Real-time colour preview with magnifier
• Pixel-perfect colour selection
• Multiple colour format outputs (HEX, RGB, HSL, HSV)
• Colour scheme generator (complementary, analogous, triadic, tetradic, split-complementary, monochromatic)
• One-click copy to clipboard
• MonaspaceNeon typography

Planned Features

• Drag and drop image loading (currently affected by WebKit bug #265857 in Tauri v2)

Prerequisites

Before building or running this application:

1. Node.js (v18 or later) - Download
2. Rust (latest stable) - See installation below

Installing Rust

macOS/Linux:

curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh

Windows: Download and run rustup-init.exe

After installation, restart your terminal and verify:

rustc --version
cargo --version

macOS Requirements

Install Xcode Command Line Tools:

xcode-select --install

Installation

1. Clone or download this repository

2. Navigate to the project directory:

   cd colour-picker-app

3. Install dependencies:

   npm install

Development

Run the application in development mode:

npm run dev

Building

Build for current platform:

npm run build

Build for macOS (Universal - Intel + Apple Silicon):

npm run build:mac

Debug build (faster compilation):

npm run build:debug

Build Outputs

After building, find the application in:

• macOS: src-tauri/target/release/bundle/dmg/
• Windows: src-tauri/target/release/bundle/msi/
• Linux: src-tauri/target/release/bundle/appimage/

Distribution

Installing the Built App

macOS:

1. Open the generated DMG file from src-tauri/target/release/bundle/dmg/
2. Drag the Colour Picker app to Applications
3. Launch from Applications or Spotlight

Note: For distribution outside development, sign the app with an Apple Developer certificate.

Project Structure

colour-picker-app/
├── src/
│   ├── index.html           # Main application UI
│   └── fonts/               # MonaspaceNeon font files
├── src-tauri/
│   ├── src/
│   │   └── main.rs          # Rust backend
│   ├── icons/               # Application icons
│   ├── Cargo.toml           # Rust dependencies
│   └── tauri.conf.json      # Tauri configuration
├── package.json
├── README.md
└── .gitignore

Configuration

App Identifier

The app bundle identifier is set in src-tauri/tauri.conf.json:

"identifier": "com.colourpicker.app"

Change this to your own reverse-domain identifier if distributing the app.

Window Size

Default window size is 1000x800. To change, edit src-tauri/tauri.conf.json:

"windows": [{
  "width": 1000,
  "height": 800,
  "minWidth": 800,
  "minHeight": 600
}]

Code Signing (Production)

For production distribution on macOS:

1. Enroll in the Apple Developer Program
2. Get a Developer ID certificate
3. Update src-tauri/tauri.conf.json with signing information
4. Build with npm run build

Troubleshooting

Rust not installed

If you get an error about Rust:

curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh

"Colour Picker" is damaged and can't be opened

This happens with unsigned apps. To bypass on macOS:

xattr -cr "/Applications/Colour Picker.app"

App won't start in development

1. Check the console for errors
2. Ensure all dependencies are installed: npm install
3. Verify Rust is installed: rustc --version

Build fails

1. Ensure latest Node.js (v18+) and Rust are installed
2. Check that dependencies installed successfully
3. On macOS, verify Xcode Command Line Tools are installed

Technology Stack

• Frontend: HTML5, CSS3, JavaScript
• Backend: Rust
• Framework: Tauri 2.x
• Build Tool: Cargo + npm
• Canvas API: Image manipulation
• Typography: MonaspaceNeon

Colour Formats

Supported Formats

• HEX: #RRGGBB
• RGB: rgb(r, g, b)
• HSL: hsl(h, s%, l%)
• HSV: hsv(h, s%, v%)

Colour Schemes

• Complementary
• Analogous
• Split Complementary
• Triadic
• Tetradic
• Monochromatic

Licence

MIT Licence - free to use for personal or commercial purposes.

About

Developed by Tsuga Digital Inc.

Acknowledgements

• Tauri team for the framework
• Rust community
• MonaspaceNeon font by GitHub Next