Mix. Match.
Master Color.
The smartest color mixing tool for designers. Generate palettes, extract colors from images, build gradients, and understand color theory — all in one place.
4.8:1 AA
HEX RGB RGBA HSL
Everything You Need
Professional-grade color tools, designed for speed and precision.
Smart Color Mixer
RGB & HSL sliders with real-time preview. HEX, RGB, RGBA, RGB%, HSL, CMYK conversion.
Palette Generator
Generate stunning palettes instantly. Lock colors, export as PNG or JSON.
Gradient Builder
Create linear & radial gradients with multiple stops. Copy CSS instantly.
Image Color Picker
Upload any image and extract its dominant colors automatically.
Contrast Checker
WCAG accessibility checks. Ensure your colors meet AA and AAA standards.
Color Theory Guide
Learn RGB, RGBA, HSL, CMYK, color harmonies, and how to use them effectively.
Color Mixer
Adjust sliders to mix your perfect color. All formats update in real-time.
Contrast Checker
RGB Channels
HSL Channels
Alpha / Opacity
Direct Input
Format: #RRGGBB or RRGGBB. Example: #E8A838 or E8A838
Accepts: HEX, rgb(), rgba(), hsl(), hsla(), named colors (e.g. "coral", "steelblue")
Color Harmonies
Complementary
Analogous
Triadic
Split-Complementary
Palette Generator
Generate random palettes. Click a color to lock it, then regenerate the rest.
Saved Colors
No saved colors yet. Mix a color and click Save!
Saved Palettes
Generate a palette and save it to see it here.
Gradient Builder
Create beautiful gradients with multiple color stops.
CSS Code
background: linear-gradient(90deg, #E8A838, #E85538);
Type & Direction
Color Stops
Presets
Image Color Picker
Upload an image to extract its dominant colors.
Drop an image here or click to upload
Supports JPG, PNG, WebP
Extracted Colors
Upload an image to see extracted colors here.
Palette
Color Theory Fundamentals
Understanding color is essential for every designer. Here are the core concepts.
The Color Wheel
The color wheel organizes colors in a circle, showing relationships between them. It was first developed by Sir Isaac Newton in 1666.
Primary colors (Red, Yellow, Blue) cannot be mixed from other colors. Secondary colors (Orange, Green, Purple) are created by mixing two primaries. Tertiary colors mix a primary with an adjacent secondary.
Understanding these relationships helps you create harmonious color schemes.
RGB Color Model
Additive color model used for screens. Red, Green, and Blue light combine to create colors. All three at full intensity produce white; all at zero produce black.
rgb(255, 0, 128)
Each channel: 0–255 (integer)
Use for: Web design, apps, digital graphics, video
CMYK Color Model
Subtractive color model used in print. Cyan, Magenta, Yellow, and Key (Black) inks absorb light. All at full produce black (theoretically dark brown).
cmyk(0%, 49%, 50%, 0%)
Each channel: 0%–100%
Use for: Print design, packaging, brochures
RGBA Format
RGBA extends RGB with an Alpha channel controlling transparency. Alpha ranges from 0 (fully transparent) to 1 (fully opaque). Essential for overlays, glassmorphism, and layered designs.
rgba(232, 168, 56, 0.5)
R, G, B: 0–255 | A: 0–1
RGB% Format
RGB% expresses each channel as a percentage instead of 0–255 integers. 0% = no light, 100% = full channel intensity. Some CSS generators and SVG tools use this format natively.
rgb(91%, 65.9%, 22%)
Each channel: 0%–100%
Conversion: value% = (value / 255) × 100
Example: 232 / 255 × 100 = 91%
HSL Color Model
HSL separates color into three intuitive properties, making it easier for humans to think about color:
Hue (0–360)
The pure color on the wheel. 0 is red, 120 is green, 240 is blue.
Saturation (0–100%)
Intensity of the color. 0% is gray, 100% is fully vivid.
Lightness (0–100%)
Brightness. 0% is black, 50% is the pure color, 100% is white.
All Formats at a Glance
| Format | Example | Channels | Alpha |
|---|---|---|---|
| HEX | #E8A838 | 3 (R, G, B hex) | |
| RGB | rgb(232, 168, 56) | 3 (0–255 each) | |
| RGBA | rgba(232, 168, 56, 0.8) | 3 (0–255) + Alpha | 0–1 |
| RGB% | rgb(91%, 66%, 22%) | 3 (0%–100% each) | |
| HSL | hsl(38, 81%, 56%) | H:0–360, S:0–100%, L:0–100% | |
| CMYK | cmyk(0%, 28%, 76%, 9%) | 4 (0%–100% each) |
Color Harmonies
Complementary
Colors opposite on the wheel. Creates maximum contrast and visual tension. Great for call-to-action elements.
Analogous
Colors adjacent on the wheel. Creates serene, comfortable designs. Found often in nature.
Triadic
Three colors evenly spaced on the wheel. Vibrant and balanced, even with vivid colors.
Split-Complementary
A base color plus the two colors adjacent to its complement. Strong contrast but less tension than complementary.
Color & Accessibility
WCAG (Web Content Accessibility Guidelines) defines minimum contrast ratios for readable text:
Minimum 4.5:1 contrast ratio
Minimum 3:1 contrast ratio
Minimum 7:1 contrast ratio
Minimum 4.5:1 contrast ratio
Use the Contrast Checker in the Color Mixer to verify your colors meet these standards.
About ColorMix Pro
A professional color tool built for designers who demand precision and speed.
Our Mission
ColorMix Pro was created to give designers a single, powerful tool for everything color-related. No more switching between apps for mixing, converting, palette generation, and gradient building. Everything you need is right here, fast and free.
Why ColorMix Pro
- Real-time color mixing with RGB, HSL sliders and alpha channel
- Instant conversion: HEX, RGB, RGBA, RGB%, RGBA%, HSL, CMYK
- Direct input for every format with smart CSS string parsing
- Intelligent color harmony suggestions
- WCAG contrast checker for accessibility compliance
- Image color extraction with dominant color detection
- Gradient builder with linear and radial modes
- Export palettes as PNG images or JSON data
- 100% client-side — your data never leaves your browser
Privacy
All color data is stored locally in your browser using localStorage. No data is sent to any server. No cookies, no tracking, no analytics. Your creative process stays private.
Technical
Built with vanilla HTML, CSS, and JavaScript. No frameworks, no build tools, no dependencies beyond Tailwind CSS for styling and Font Awesome for icons. Lightweight, fast-loading, and works offline once cached.