Color Picker
Relevant source files
The following files were used as context for generating this wiki page:
The Color Picker (internally referred to as "Color Magnifying Glass") is a comprehensive utility within the DevUtils suite designed for color selection, format conversion, and palette generation. It provides developers and designers with tools to pick colors via a visual interface, generate mathematical color harmonies, and extract dominant color palettes from uploaded images.
The tool is integrated into the DevUtils multi-tab environment and utilizes both client-side React logic and Tauri-native API calls for advanced features like image processing and drag-and-drop file handling.
Sources: README.md:14, components/tool-content.tsx:32, components/tools/color-picker.tsx:1-20
Architecture and Components
The Color Picker is built as a functional React component named ColorPicker. It leverages a tabbed interface to separate the visual picking experience from the image-based palette generation.
Core UI Structure
The interface is divided into two primary tabs:
- Picker Tab: Houses the visual color sketcher, format conversion list, and color harmony schemes.
- Palette Tab: Contains the image upload zone and the display for extracted color swatches.
Sources: components/tools/color-picker.tsx:169-183, messages/en.json:302-305
Data Flow for Color Selection
When a user interacts with the color picker or selects a swatch, the state is updated and propagated through utility functions to calculate various representations.
The diagram shows the unidirectional data flow from user input to the generation of derivative color data.
Sources: components/tools/color-picker.tsx:210-230, components/tools/color-picker.tsx:265-270
Technical Specifications
Color Formats and Conversion
The system supports a wide range of programmatic color formats, converting from a central HEX state to target formats used in Web, iOS, and Android development.
| Format | Output Example / Description |
|---|---|
| HEX | Upper-case hexadecimal (e.g., #3B82F6) |
| RGB/RGBA | Standard CSS functional notation |
| HSL/HSLA | Hue, Saturation, Lightness notation |
| UIColor | Swift/UIKit UIColor(red:green:blue:alpha:) |
| SwiftUI | Color(red:green:blue:) |
| Android | Hexadecimal with hash prefix |
| CSS Variable | --color-primary: #3B82F6; |
Sources: components/tools/color-picker.tsx:187-201, messages/en.json:309-310
Color Harmonies
The tool calculates five distinct color harmony types based on the current selection:
- Complementary: 180° rotation on the HSL hue wheel.
- Triadic: Three colors spaced 120° apart.
- Analogous: Colors adjacent to the selection (±30°).
- Split Complementary: The selection plus two colors adjacent to its complement.
- Monochromatic: Variants of the same hue with different lightness levels.
Sources: components/tools/color-picker.tsx:273-305, messages/en.json:323-329
Palette Extraction System
The Color Picker includes a specialized system for extracting dominant colors from images using K-means clustering (processed on the backend).
Logic and Tauri Integration
Extraction can be triggered via a file input or by dragging an image directly onto the application window. For webview-based file drops, the tool utilizes the @tauri-apps/api/webview and @tauri-apps/plugin-fs modules.
This sequence illustrates the communication between the React frontend and the native Tauri backend for image processing.
Sources: components/tools/color-picker.tsx:128-164, package.json:44-46
Local File Processing
If a file is selected via the standard <input type="file">, the system:
- Reads the file into an
ArrayBuffer. - Writes it to a temporary directory using
writeFilefrom@tauri-apps/plugin-fs. - Invokes the extraction command.
- Cleans up the temporary file using
remove.
Sources: components/tools/color-picker.tsx:236-263
Dependencies
The Color Picker relies on several key libraries defined in the project's configuration:
- @uiw/react-color-sketch: Provides the visual color picking interface.
- lucide-react: Supplies icons for UI actions (Copy, Trash, Upload).
- i18next / react-i18next: Handles multi-language support (English, Simplified Chinese, Traditional Chinese).
- next-themes: Manages dark/light mode styles for the picker.
Sources: package.json:47, 59, 62, components/tools/color-picker.tsx:4-16
Summary
The Color Picker is a feature-rich module within DevUtils that combines standard web technologies with native desktop capabilities. By providing instant format conversion and automated palette extraction, it streamlines the design-to-code workflow for developers. Its architecture emphasizes localized processing and high-performance native calls for resource-intensive tasks like image color analysis.
Sources: README.md:1-5, components/tools/color-picker.tsx:420-430