Skip to content
suzuki-black
PixelLens
Public

About

pixel-lens

Resources

Readme
MIT license
Activity

Stars

0 stars

Watchers

0 watching

Forks

0 forks
Report repository
BranchesTags

Latest commit

 

History

24 Commits

Folders and files

Repository files navigation

PixelLens 🔬

A lightweight, always-on-top color picker for designers and developers.

License: MIT Tauri v2 Rust Platform

What is PixelLens?

Pick any pixel color on your screen — HEX, RGB, HSL, and more — and copy it to your clipboard in one keystroke.
PixelLens lives in your system tray, always on standby. Call it up with a shortcut, grab the color, hide it again.

Built for:

  • 🎨 Designers — spot colors from any app without switching tools
  • 💻 Frontend developers — grab CSS values directly from your browser preview
  • 🖌️ Illustrators — reference colors from any image or video on screen
  • 🔍 UI reviewers — verify implemented colors against specs with CIE76 ΔE color difference

Why PixelLens?

PixelLens Electron apps Browser extensions
Binary size ~4 MB ~100 MB+ N/A
Runtime Tauri (Rust + WebView) Node.js + Chromium Browser only
System tray resident ✅ varies ❌
Global shortcut ✅ varies ❌
Japanese color names ✅ ❌ ❌
Telemetry None varies varies
Open source ✅ MIT varies varies

Features

Feature Detail
🔍 Real-time magnifier 4x–20x zoom with pixel grid
📋 9 copy formats HEX / RGB / HSL / Float / 0x and more
🔒 Color lock (Pick) Lock the current color with a shortcut, then copy freely without moving the cursor
⚡ Global shortcuts Works from any app in the foreground
🌐 EN / JA UI English and Japanese interface
🎌 Japanese color names JIS traditional + Web colors (90 entries)
🔤 3-axis color display Romaji / 漢字 / English (EN mode)
🌓 Dark / Light theme
📌 Always on top Floats above all other windows
🗂️ System tray resident Hides to tray, recalled instantly via shortcut

Screenshot

Installation

Download

Prebuilt binaries are not yet available.
We plan to publish installers on the Releases page soon.
In the meantime, build from source using the instructions below.

Build from Source

Prerequisites:

Platform Requirement
All Rust (stable), Node.js LTS
Windows Visual Studio Build Tools 2022 — "Desktop development with C++" workload
macOS Xcode Command Line Tools (xcode-select --install)
Linux libgtk-3-dev libwebkit2gtk-4.1-dev (untested) 
git clone https://github.com/suzuki-black/pixel-lens
cd pixel-lens
npm install
npm run build

Output: src-tauri/target/release/pixel-lens (or .exe on Windows).

macOS — install.sh

On macOS, Tauri's adhoc build does not embed entitlements into the binary.
Use the provided script to build, install, and re-sign in one step:

./install.sh

This script:

  1. Runs npx tauri build
  2. Copies the app to /Applications/PixelLens.app
  3. Re-signs with entitlements.plist (com.apple.security.screen-recording)

On first launch, PixelLens automatically shows the Screen Recording picker (SCContentSharingPicker) after 2 seconds. Select your display to grant permission.

Usage

  1. Launch PixelLens — it appears as a floating window and a tray icon.
  2. Move your mouse over any pixel to see the color update in real time.
  3. To copy a specific color:
    • Position the cursor over the target pixel.
    • Press Ctrl+Shift+Alt+C to lock the color (🔒 icon lights up, amber border appears on the magnifier).
    • Move the cursor to PixelLens and click any copy button — the locked color is copied regardless of cursor position.
    • Press Ctrl+Shift+Alt+C again (or click 🔒) to unlock and resume live tracking.
  4. Press Ctrl+Shift+C to instantly copy the current color in the configured format (no lock needed).
  5. Click — or press Ctrl+Alt+C to hide the window to the tray.
  6. To quit, click the tray icon → PixelLens を終了.

Keyboard Shortcuts

Action Windows macOS
Show / Hide window Ctrl + Alt + C Ctrl + Alt + C
Quick copy (configured format) Ctrl + Shift + C Ctrl + Shift + C
Lock / Unlock color (Pick) Ctrl + Shift + Alt + C Ctrl + Shift + Alt + C

Shortcuts are global — they work even when PixelLens is hidden or another app is active.

Copy Formats

Format Example Use case
HEX uppercase #4A90E2 CSS / HTML
HEX lowercase #4a90e2 CSS (lowercase preference)
RGB CSS rgb(74, 144, 226) CSS
RGB values 74, 144, 226 Photoshop / Figma
HSL CSS hsl(213, 70%, 59%) CSS
Float 0.290, 0.565, 0.886 GLSL / Unity / Unreal
0x notation 0x4A90E2 General programming
HEX no hash 4A90E2 Photoshop color picker
Color name Sky Blue / 空色 Design documentation

Platform Status

Platform Status Notes
Windows 10 / 11 ✅ Verified Primary development target
macOS 14+ ✅ Verified Confirmed working on macOS 26. Uses ScreenCaptureKit (SCStream) with SCContentSharingPicker for screen recording authorization. Menu-bar-only app (no Dock icon). Note: PixelLens does not appear in System Settings → Screen Recording — this is expected behavior for SCContentSharingPicker-based auth and does not affect functionality.
Linux (X11 / Wayland) 🚧 Partial X11 capture implemented; Wayland not yet supported. Planned for v0.5.

Tech Stack

Layer Technology
UI HTML5 + CSS3 + Vanilla JavaScript
App shell Tauri v2 (Rust)
Renderer WebView2 (Windows) / WKWebView (macOS)
Color difference CIE76 ΔE
Screen capture Win32 GDI BitBlt (Windows) / ScreenCaptureKit SCStream (macOS) / x11rb (Linux)
Color dictionary JIS Z 8102 + Web colors, 90 entries

Roadmap

Version Content Status
v0.1 Core (magnifier, capture, copy, tray) ✅ Done
v0.2 EN/JA UI · compact layout · settings persistence · 3-axis color names · color lock (Pick) ✅ Done
v0.3 Color history (last 10) · pin mode 📋 Planned
v0.4 Palette export (CSS / SCSS / JSON) · WCAG contrast checker 📋 Planned
v0.5 Linux support (X11 / Wayland) 📋 Planned
v1.0 Plugin API 💭 Under consideration

Contributing

Bug reports, feature requests, and pull requests are welcome.

License

MIT © 2026 suzuki-black — see LICENSE.

PixelLens 🔬（日本語）

デザイナー・開発者のための軽量カラーピッカー。

PixelLens とは？

画面上の任意のピクセルの色を HEX・RGB・HSL などでワンキーコピー。
タスクトレイに常駐し、必要なときだけショートカットで呼び出せます。

こんな方に：

  • 🎨 デザイナー — ツールを切り替えずに画面上の色をスポイト
  • 💻 フロントエンドエンジニア — ブラウザの配色をそのまま CSS 変数に
  • 🖌️ イラストレーター — 参考画像の色をショートカット一発でメモ
  • 🔍 UI レビュア — ΔE 色差付きで実装色を仕様と比較

なぜ PixelLens？

  • 軽量 — Tauri (Rust) 製、バイナリ約 4 MB
  • テレメトリなし — 完全オープンソース (MIT)
  • トレイ常駐 — 邪魔にならず、ショートカットですぐ呼び出し
  • 9 種のコピー形式 — CSS・Figma・Unity・Photoshop に対応
  • カラーロック — ショートカットで色を確定し、カーソルを動かしてからコピー可能
  • 日本語色名 — JIS 慣用色名 + Web カラー 90 色 (CIE76 ΔE)
  • EN / JA 切り替え — 英語・日本語 UI を設定から変更可能
  • 3 軸色名表示 (EN) — ローマ字 / 漢字 / 英語で色名を表示

インストール

ダウンロード

バイナリ配布は現在準備中です。
近いうちに Releases ページで公開予定です。
今すぐ使いたい場合はソースからビルドしてください。

ソースからビルド

git clone https://github.com/suzuki-black/pixel-lens
cd pixel-lens
npm install
npm run build

前提条件：

環境 必要なもの
全環境 Rust (stable)、Node.js LTS
Windows Visual Studio Build Tools 2022（「C++ によるデスクトップ開発」ワークロード）
macOS Xcode Command Line Tools

macOS — install.sh

macOS では Tauri の adhoc ビルドが entitlements をバイナリに埋め込まないため、専用スクリプトを使用してください：

./install.sh

初回起動後 2 秒で「画面収録」ピッカーが自動表示されます。ディスプレイ全体を選択してください。

使い方

  1. 起動するとウィンドウが表示され、メニューバーアイコンが現れます。
  2. マウスを動かすと色がリアルタイム更新されます。
  3. 特定の色をコピーしたい場合：
    • 取りたいピクセルの上にカーソルを置く。
    • Ctrl+Shift+Alt+C を押して色をロック（🔒 アイコンが点灯、マグニファイアにアンバーのボーダーが表示）。
    • カーソルを PixelLens に移動してコピーボタンを押す — カーソル位置に関係なくロックした色がコピーされる。
    • Ctrl+Shift+Alt+C を再度押す（または 🔒 をクリック）でロック解除、リアルタイム表示に戻る。
  4. Ctrl+Shift+C で現在の色を設定フォーマットで即コピー（ロック不要）。
  5. — ボタンか Ctrl+Alt+C でウィンドウをトレイに隠す。
  6. 終了は メニューバーアイコンをクリック → PixelLens を終了。

キーボードショートカット

操作 Windows macOS
ウィンドウ 表示 / 非表示 Ctrl + Alt + C Ctrl + Alt + C
クイックコピー（設定フォーマット） Ctrl + Shift + C Ctrl + Shift + C
カラーロック / 解除（Pick） Ctrl + Shift + Alt + C Ctrl + Shift + Alt + C

ショートカットはグローバル — PixelLens が非表示中や他アプリ使用中でも動作します。

動作確認状況

環境 状況 備考
Windows 10 / 11 ✅ 確認済み 主要開発・テスト環境
macOS 14+ ✅ 確認済み macOS 26 で動作確認済み。ScreenCaptureKit (SCStream) 使用。Dock 非表示のメニューバーアプリ。注: System Settings → 画面収録リストに PixelLens は表示されませんが、SCContentSharingPicker 認証の仕様であり正常動作です。
Linux (X11 / Wayland) 🚧 未対応 X11 は実装済み、Wayland は未対応。v0.5 で対応予定。

ライセンス

MIT © 2026 suzuki-black — LICENSE を参照。

About

pixel-lens

Resources

Readme
MIT license
Activity

Stars

0 stars

Watchers

0 watching

Forks

0 forks
Report repository

Releases

Packages

Contributors

Languages