Pick, Extract & Convert
Digital Colours Online.
The free, private, browser-based color utility suite for designers and developers. Extract palettes from any image, pick colors, convert formats, test WCAG contrast, and export CSS variables—instantly with zero data leaving your device.
'/><circle cx='120' cy='100' r='50' fill='%23FFFFFF' fill-opacity='0.15'/><circle cx='280' cy='100' r='60' fill='%23FFFFFF' fill-opacity='0.1'/></svg>)
Three Simple Steps to Perfect Color
Choose an Input Source
Upload any image, drag-and-drop a photo, paste from your clipboard (Ctrl+V), or enter a starting HEX / RGB code.
Process & Harmonize
Our in-browser algorithms extract dominant palettes, calculate harmonies, analyze luminance, and check WCAG accessibility contrast.
Export to Your Project
Copy CSS variables (:root), export JSON tokens, generate Tailwind configs, or download high-resolution PNG swatch cards.
Explore All 12+ Color Tools
Image Palette Extractor
Drop any image to extract dominant, vibrant, muted, or balanced color schemes in-browser with K-Means clustering.
Image Loupe Sampler
Hover over uploaded images with an interactive 9x magnifier loupe to pick exact pixel coordinates and colors.
Universal Color Picker
Visual 2D saturation/value canvas with hue and alpha sliders, synchronizing HEX, RGB, HSL, HSV, and CMYK.
WCAG Contrast Checker
Evaluate AA & AAA text and UI contrast ratios with realistic component previews and automatic accessible fixes.
Color Palette Generator
Generate triadic, complementary, analogous, and mood-curated color schemes with swatch lock capabilities.
Universal Format Converter
Live multi-directional translation between HEX, RGB, RGBA, HSL, HSLA, HSV, HSVA, CMYK, and CSS keywords.
Shades & Tints Generator
Create granular 3–20 step tonal scales for darker shades, lighter tints, and neutral tones for design systems.
CSS Gradient Studio
Design linear and radial multi-stop CSS gradients with angle wheels, instant CSS rules, and PNG export.
Color Property Analyzer
Inspect relative luminance, warmth classification (warm vs cool), grayscale values, and nearest human names.
Color Blindness Simulator
Simulate Protanopia, Deuteranopia, Tritanopia, and Achromatopsia deficiencies across colors and live UI mockups.
HEX Color Specialist
Validate #RGB, #RGBA, #RRGGBB, #RRGGBBAA codes, expand shorthands, and generate instant harmonies.
Random Color Generator
Procedural color discovery filtered by aesthetic moods (Pastel, Vibrant, Dark, Light, Warm, Cool).
Popular Workflows by Role
- Drop image or design screenshot
- Extract dominant & vibrant palette
- Verify WCAG AA/AAA contrast ratios
- Preview live website mockup & export PNG
- Input your primary brand HEX code
- Generate 50–900 shades & tints scale
- Convert to RGB, HSL & CSS variables
- 1-click copy into Tailwind or styles
- Select text foreground & background
- Calculate exact mathematical contrast
- Simulate color blindness conditions
- Auto-adjust lightness to pass WCAG AAA
Your Images & Color Data Stay on Your Device.
SPECTRE is engineered with 100% client-side privacy. Image pixels, color palettes, and conversions are calculated directly in your browser's local memory. No cloud upload, no tracking, no account needed.
Frequently Asked Questions
What is SPECTRE and how do I use it?+
SPECTRE is a 100% free, browser-based color utility suite for designers, developers, and creators. You can pick colors, extract palettes from photos, convert color codes (HEX, RGB, HSL, HSV, CMYK), check accessibility contrast, create CSS gradients, and export palettes—all in one place without switching between multiple apps.
How does SPECTRE process uploaded images without a backend server?+
SPECTRE utilizes native browser APIs including HTML5 Canvas, the File API, and client-side JavaScript to decode image bitmaps directly inside your browser sandbox. Your images are never transmitted over the internet or stored on external servers, ensuring complete confidentiality and privacy.
Are all generated palettes and color conversions free for commercial use?+
Yes. All color codes, CSS variables, JSON definitions, and exported palette assets are 100% free to use in personal, commercial, and open-source design projects without attribution requirements.
How accurate is the WCAG 2.1 Contrast Checker?+
The contrast checker strictly implements the W3C WCAG 2.1 relative luminance formula (sRGB gamma expansion). It computes the exact contrast ratio between 1:1 and 21:1, evaluating Level AA and Level AAA conformance for both standard body text and large typography.
Can I transfer colors between different tools on the website?+
Yes. SPECTRE includes a persistent Session Workbench. Adding a color or extracting a palette automatically synchronizes with your local browser storage, allowing you to seamlessly move from the Image Extractor to the Contrast Checker or UI Workspace without losing your colors.