Median Cut Algorithm for Image Color Extraction

When you upload an image, our tool samples every pixel and organizes them in a 3D RGB color space. We then apply the Median Cut algorithm: the color space is iteratively divided into sub-boxes along the longest dimension, until we have the desired number of boxes. The average color of each box becomes one palette color. This method produces perceptually distinct colors that truly represent your image — far more accurate than simple pixel frequency counting.

For even better results, we apply a quantization refinement pass that nudges colors apart in HSL space, ensuring the extracted palette is both representative and visually distinct.

Color Harmony Theory & Scheme Generation

All color scheme generation is rooted in classical color theory, operating in HSL (Hue-Saturation-Lightness) space for perceptually accurate rotations:

• Complementary: Hue + 180° — maximum contrast, bold & energetic
• Analogous: Hue ±30° — naturally harmonious, low-tension combinations
• Triadic: Hue, +120°, +240° — vibrant, balanced tension
• Split-Complementary: Hue, +150°, +210° — high contrast but less jarring than complementary
• Tetradic / Square: Hue, +90°, +180°, +270° — rich palette, requires careful balance
• Monochromatic: Same hue, varying lightness / saturation — elegant and cohesive

WCAG 2.1 Contrast Ratio Calculation

Contrast ratio is computed per the W3C WCAG 2.1 specification. We first convert each color to relative luminance using the sRGB linearization formula (gamma correction with a threshold at 0.03928), then apply:

where L1 is the lighter color's luminance and L2 is the darker one's. The result is compared against four thresholds: AA Normal (4.5:1), AA Large Text (3:1), AAA Normal (7:1), and AAA Large (4.5:1). This ensures every color combination you use meets accessibility standards for real users, including those with visual impairments.

Color Space Conversions — HEX ↔ RGB ↔ HSL ↔ HSV ↔ CMYK

Different design contexts need different color formats. Our converter applies precise mathematical transforms:

• HEX → RGB: Parse hex pairs and scale to 0–255
• RGB → HSL: Normalize to 0–1, find min/max channels, compute hue via atan2, lightness = (max+min)/2, saturation from chroma/lightness
• HSL → HSV: Convert through RGB as intermediary for accuracy
• RGB → CMYK: K = 1 − max(R,G,B); C = (1−R−K)/(1−K); apply for each channel

All operations use floating-point precision and are validated against industry reference values.

Export Formats Explained

Once you've built the perfect palette, getting it into your project should be instant:

• CSS Custom Properties: --color-primary: #3B82F6; — drop straight into your :root
• SCSS Variables: $color-primary: #3B82F6; — plug into any Sass workflow
• JSON: Machine-readable structure — works with design tokens (Style Dictionary, Theo), React Native, or any custom pipeline
• Tailwind Config: Ready-to-paste extend.colors block for instant Tailwind integration

Why Color Matters in Design (and Why Tools Save Hours)

Color communicates before words do. Studies show color increases brand recognition by up to 80% (University of Loyola) and influences over 85% of purchase decisions (Satyendra Singh, 2006). Yet color selection is one of the most time-consuming, subjective tasks designers face.

A structured tool removes the guesswork: instead of manually tweaking hex values and testing combinations, you extract directly from your brand's visual language, apply science-backed harmony rules, and validate accessibility — all in one workflow. What used to take hours of back-and-forth now takes under two minutes.