MLM Color Palette Studio

Mohamed Loay M. · OKLCH Perceptual Atelier & Universal Token Suite

Space Gen Ctrl+Z Undo E Export P Preview I Image C Presets ? Help
Simulation active: Protanopia

The Palette Plate

6 colors · OKLCH Perceptual Blend
❦ Palette Audit: Heuristic Harmony & APCA Score —/100
Evaluating perceptual harmony, APCA contrast, distinction, and role balance...
Heuristic evaluation based on perceptual separation, tonal range and contrast. This is not a certified accessibility score.
—Harmony
—WCAG / APCA
—Separation
—L-Hierarchy

Universal Design Tokens & Export Suite

Ready-to-paste CSS custom properties featuring HEX, RGB, HSL, CMYK print, and modern OKLCH tokens.

SCSS variables and color map with CMYK ink values for Sass workflows.

Tailwind config snippet for `tailwind.config.js` and modern Tailwind CSS v4 `@theme` block.

Standard 4-color process (Cyan, Magenta, Yellow, Key/Black) subtractive ink breakdown for offset press, architectural material specifications, and physical print production.

W3C standard design tokens JSON schema with full 50–900 shades, CMYK ink percentages, and accessibility metadata.

Vector palette swatch sheet. Drag and drop directly into Figma, Sketch, Penpot, or Adobe Illustrator.

High-resolution graphic presentation card of the current palette with Roman numerals and HEX values. The fields below are entirely optional: the palette data (swatches, HEX, CMYK) is always accurate and stays put; add your own title, byline, or footer notes only if you want them, or leave any of them blank.

SwiftUI Color extensions and Android `colors.xml` resources for mobile developers.

Image Palette Extractor & Eyedropper

◎

Drag & drop any photo here, or browse your device

Try architectural samples:
Zoom 100% Ctrl/⌘ + scroll to zoom · drag to pan
Click any pixel on the image above to sample color directly. Zoom in for pixel-precise picks.
Extraction Harmony Mode:

OKLCH Precision Swatch Tuner

#FFFFFF
Lightness (L) 65.0%
Chroma (C) 0.140
Hue Angle (H) 55.0°
In sRGB Gamut · Perceptually Uniform
CMYK: 0% · 32% · 70% · 21%

Curated Architectural & Fine Art Presets

Live UI Atelier & Context Canvas

WCAG 2.1 & APCA Perceptual Contrast Matrix

Dual evaluation checking every color pair against standard WCAG 2.1 (AA 4.5:1, AAA 7.0:1) and the modern APCA $L_c$ (Lightness Contrast) standard for WCAG 3.0 readability.

Legend: AAA (7.0+: Enhanced WCAG) · AA (4.5+: Normal text) · APCA Lc 75+ (Optimal body text) · Fail (< 3.0: Inaccessible for text).

Side-by-Side Palette Comparison

Hold a second palette in memory for this session to compare its Palette Audit score against whatever is currently on the plate. Nothing here is saved: holding a new candidate replaces the previous one, and it's gone once you close or reload the studio.

Current Palette —/100
—Harmony
—WCAG / APCA
—Separation
—L-Hierarchy
Held Candidate —/100
No candidate held yet
—Harmony
—WCAG / APCA
—Separation
—L-Hierarchy

Keyboard Ergonomics & Hotkeys

Regenerate Palette Space
Undo Previous Change Ctrl + Z
Redo Change Ctrl + Y
Export Tokens E
Live UI Preview P
Image Extractor I
Curated Presets C
Show Shortcuts ?

MLM Atelier Academy & Color Science Guide

Classical proportions · Modern OKLCH perceptual science · Print & Digital Masterclass

Welcome to MLM Color Palette Studio

This studio is an architectural atelier built by architect and designer Mohamed Loay M. to help anyone, from complete beginners with zero color theory knowledge to seasoned software engineers, craft balanced, visually stunning, accessible color palettes for apps, websites, brand identities, and physical architecture in seconds.

How to use this studio in 8 friendly steps:

1 Roll the Dice (Explore)
Press the Spacebar on your keyboard or click "Regenerate palette". Each press composes a brand-new harmonious color chord calculated with perceptual math.
2 Lock What You Love
Spot a color you adore? Click its 🔒 Lock icon. When you hit Spacebar again, your locked colors stay firmly anchored while all other swatches harmonize around them.
3 Choose Your Scale
Drag the "The Scale" slider (from 3 to 12 colors) to match your project size: whether you need a quick 3-color minimalist brand or a 12-color full enterprise design system.
4 Pick a Mood & Harmony
Choose a harmony algorithm from the dropdown: Monochromatic for clean corporate apps, Triadic for vibrant energy, or Architectural for natural stone, clay, and warm earth.
5 Precision Tuning
Click the ⚙ Gear icon on any swatch to open the OKLCH Precision Tuner. You can fine-tune brightness, saturation, and hue with real-time screen and CMYK print previews.
6 Check Readability
Look at the Quality & APCA Audit meter at the top or open the WCAG Contrast Matrix to verify that your text colors are 100% clear and easy to read for all users.
7 Test in Live UI Previews
Click "▦ Live Preview" (or press P) to see how your colors look inside real applications: a SaaS analytics dashboard, an editorial magazine article, a mobile shopping app, or a brand sheet.
8 Export in One Click
Click "⤓ Export Tokens" (or press E) to instantly copy ready-to-paste CSS Variables, Tailwind CSS (v3 & v4), SCSS, CMYK Print Specs, Figma SVG vectors, JSON, or high-res presentation PNGs.
❦ Beginner's Cheat Sheet:
  • HEX Code (e.g. #C9883C): A digital shorthand for colors used by web browsers and graphics software.
  • Swatch: A single rectangular sample card of a color.
  • Palette: A curated set of swatches that work beautifully and harmoniously together.

Who This Studio Is Built For

● Complete Beginners
Never touched a color wheel before? Every control here comes with plain-English explanations, and the Lexicon & FAQ tab defines every term the moment you're unsure of it. Just press Spacebar and start exploring. You cannot break anything.
● Product & Brand Designers
Build a full 3–12 color system with automatic tonal ramps, test it inside real SaaS, mobile, and editorial mockups via Live Preview, and export straight to a Figma SVG or a presentation-ready PNG brand sheet.
● Frontend & Mobile Developers
Skip re-typing hex codes by hand. Export directly to CSS variables, Tailwind (v3 & v4), SCSS, W3C JSON tokens, SwiftUI, or Android XML, all generated from the exact palette you approved.
● Architects & Print Studios
Every swatch carries an exact CMYK ink breakdown alongside its digital HEX value, so material boards, signage, and offset print runs match on-screen approvals down to the ink percentage.

Color Science Made Simple: Why OKLCH Changes Everything

For decades, digital software used RGB and HSL. While great for computer monitors, these older models trick human eyes because they ignore how human retinas actually perceive light.

§ The Flaw in Legacy Color (HSL)
In traditional software, pure yellow (#FFFF00) and pure blue (#0000FF) are both labeled as 50% Lightness. But to your eyes, yellow feels blindingly luminous while blue feels very dark. This mismatch causes text to suddenly become unreadable when you change hues.
§ The OKLCH Retinal Model
Published in 2020 by color scientist Björn Ottosson, OKLCH directly mimics the human eye's cone receptors. In OKLCH, 65% Lightness delivers the exact same perceived brightness across every hue, guaranteeing predictable contrast, smooth gradients, and zero color surprises.

The 3 Intuitive Dimensions of OKLCH:

Dimension Range In Plain English (The Analogy) What It Controls in Your Design
L · Lightness 0% – 100% How bright the lamp is: 0% is a dark cave, 50% is a comfortable mid-tone, and 100% is pure sunlight. Controls readability, background tones, and dark/light mode balance.
C · Chroma 0.00 – 0.38 The spice / intensity: 0 is completely neutral stone gray, 0.12 is balanced and elegant, and 0.30+ is vivid neon punch. Keeps body text and backgrounds calm while making call-to-action buttons pop.
H · Hue Angle 0° – 360° The color family on the 360° rainbow wheel: 0° Red, 45° Warm Amber, 90° Yellow, 145° Green, 230° Cyan, 275° Blue. Sets the brand mood and creates geometric harmonic chords (complementary, triadic, etc.).

Digital Screens (RGB) vs Physical Print & Architecture (CMYK):

Color Space Type Where It Is Used How It Works (Light vs Pigment)
OKLCH / sRGB Additive (Light-based) Computer monitors, OLED phones, web & mobile interfaces Emits light directly into the eye. Red + Green + Blue light combine to create pure white (R = G = B = 255).
CMYK Subtractive (Pigment-based) Offset printing presses, material sample boards, brochures, packaging Absorbs light. Cyan (C), Magenta (M), Yellow (Y), and Black (K) inks subtract reflected light from physical paper.
❦ Safe Gamut Mapping: Monitors and printers cannot display every theoretical color. When colors go beyond safe boundaries, traditional tools clip them abruptly, turning purple into dull muddy blue. MLM Studio uses an automated 20-step binary search that preserves the exact Hue Angle (H) and Lightness (L) while gently dialing back Chroma (C) to the safe physical boundary of your display and printer.

Beyond the Basics: Measuring & Matching Color

Δ Delta E: How "Different" Are Two Colors?
Delta E ($\Delta E$) is the measured distance between two colors in 3D perceptual space. Below 1.0 the difference is invisible to the human eye; 1–2 is only noticeable to a trained eye side-by-side; above 5 the colors read as clearly distinct. MLM Studio uses Delta E internally to keep tonal ramps evenly spaced and to flag when two locked swatches have become nearly identical.
▣ sRGB vs Display P3
Most websites still target the older, narrower sRGB gamut for universal compatibility. Newer phones and monitors support the wider Display P3 gamut, capable of roughly 25% more visible colors, especially vivid reds and greens. A color that looks vibrant on a P3 iPhone screen can look slightly duller on an older sRGB monitor; this is expected, not a bug.
⚖ Screen-to-Print Calibration, Realistically
CMYK values calculated here are mathematically accurate conversions, but the final printed result still depends on your specific printer, ink batch, and paper stock. For color-critical production runs (branding, signage, architectural material boards), always request a physical proof print or Pantone swatch match before a full press run.

Harmonic Geometry: How to Choose the Perfect Mood

Color harmony is like musical chords: certain color intervals naturally feel peaceful and cohesive, while others feel dramatic and energizing. Here is how to choose the right algorithm for your project.

§ Automatic (OKLCH Geodesic Blend)
The Smart All-Rounder: Computes the shortest, smoothest perceptual bridge between all your locked swatches in 3D color space. Ideal for general web applications and comprehensive design systems.
§ Monochromatic (Tonal Luminance)
Sleek, Clean & Elegant: Keeps a single hue angle while varying brightness and chroma. Perfect for corporate SaaS dashboards, luxurious dark-mode interfaces, and premium brand aesthetics.
§ Analogous (±30° Spectral Neighbors)
Cohesive & Natural: Selects neighboring colors that sit side-by-side on the wheel (e.g. Amber, Gold, Terracotta). Found everywhere in nature (autumn leaves, sunsets) and creates a calm, unified feel.
§ Complementary (180° Polar Opposites)
High Drama & Focal Points: Pairs colors from exact opposite sides of the color wheel (e.g. Deep Cyan and Warm Gold). Creates high energy and makes primary action buttons immediately stand out.
§ Split-Complementary (150° / 210° Triad)
Vibrant but Gentle: Pairs your base color with the two tones right beside its direct opposite. Delivers rich visual variety with less optical tension than a direct polar complement.
§ Triadic (120° Equilateral Triangle)
Playful & Dynamic: Three colors spaced evenly around the wheel forming a balanced triangle. Energetic and balanced for consumer apps, gaming interfaces, and dynamic branding.
§ Tetradic (90° Square Geometric)
Rich Chromatic Breadth: Four colors spaced at 90° intervals. Excellent for complex multi-series analytics charts, category tags, and multi-tier interface navigation.
§ Architectural (Earth & Mineral Stone)
Timeless Material Pigments: Calibrated by architect Mohamed Loay M. using the natural pigments of physical architecture: travertine stone, terracotta clay, oxidized brass, raw linen, and weathered umber.
§ Nordic Minimal (Atmospheric Tones)
Cool, Crisp & Desaturated: Inspired by Scandinavian architecture and landscapes: morning coastal fog, slate stone, pine needles, and deep fjord waters.

Choosing the Right Harmony for Your Project

Your Goal Best Harmony Mode Why It Works
Calm, trustworthy SaaS dashboardMonochromatic or AnalogousLow visual noise keeps focus on data and content, not the UI chrome.
An e-commerce "Buy Now" button that popsComplementaryMaximum polar contrast pulls the eye straight to the call-to-action.
Playful consumer or gaming appTriadic or TetradicMultiple energetic hues feel dynamic without clashing, since they're evenly spaced.
Editorial site or long-form readingAnalogousNeighboring hues feel unified and don't fight with body text for attention.
Architecture, real estate, or material brandingArchitecturalCalibrated directly from travertine, brass, and clay pigment references.
Wellness, Nordic, or minimalist brandingNordic MinimalDesaturated, atmospheric tones read as calm and understated.
❦ The 60-30-10 Rule: Whichever harmony you choose, apply your colors unevenly: roughly 60% of the interface in a neutral dominant tone, 30% in a secondary supporting tone, and just 10% in your boldest accent color for buttons and highlights. Equal-weighted color usage is the single most common reason a technically "correct" harmony still feels visually chaotic.

Readability & Accessibility: Designing for Every Human Eye

Over 300 million people worldwide live with color vision deficiencies. Moreover, every user experiences situational hurdles (like reading a phone screen in blinding midday sun). Ensuring your colors have high contrast is both an ethical necessity and a legal web standard.

1. WCAG 2.1 vs Modern APCA (WCAG 3.0) Explained Simply:

Standard Rating / Threshold What It Means in Plain English When to Use It
WCAG 2.1 AA 4.5 : 1 Legal minimum for body text: Clear enough for standard paragraph text (14px – 16px). Required for all standard body copy, form inputs, and descriptions.
WCAG 2.1 AAA 7.0 : 1 The Gold Standard: Crystal-clear readability, even for users with low vision or tired eyes. Recommended for critical copy, system warnings, and documentation.
WCAG Large / UI 3.0 : 1 Large text & UI boundaries: Permitted only for bold titles (18pt+) and active button borders. Never use 3:1 for small paragraph text.
APCA $L_c$ 60+ Lc ≥ 60 Modern perceptual contrast: Perfect for large headings, navigation icons, and active UI controls. Accounts for dark-mode glare and font weight.
APCA $L_c$ 75+ Lc ≥ 75 Optimal reading comfort: The sweet spot for effortless article and blog reading. Ideal for long-form reading and dense dashboard tables.
APCA $L_c$ 90+ Lc ≥ 90 Maximum definition: Effortless reading even with thin fonts or bright sunlight. Ensures total readability in the harshest lighting environments.

2. Built-in Color Vision Simulations:

§ Protanopia (Red-Blind)
Affects ~1% of males. Red retinal cones are absent. Red hues appear brownish-gold and green hues appear warm yellow.
§ Deuteranopia (Green-Blind)
Affects ~5% of males (most common). Green retinal cones are absent. Reds and greens blend into soft beige and tan shades.
§ Tritanopia (Blue-Blind)
Affects ~0.01% of people. Blue retinal cones are absent. Blue hues appear green, and yellow hues appear soft pink or gray.
§ Achromatopsia (Monochrome)
Complete color blindness. The user perceives the world entirely in grayscale. Palette distinction relies 100% on Lightness ($L$) differences.
❦ The Golden Rule of Inclusive Design: Never use color as the sole carrier of vital information! Always support colors with text labels, distinct icons, or underlined hyperlinks.

3. Non-Text Contrast Matters Too

❦ WCAG 1.4.11 (Non-Text Contrast): Icons, input field borders, focus rings, and UI component boundaries need at least a 3:1 contrast ratio against their background, the same requirement as large text, even though they carry no text at all. A pale gray border on a white card is a common accessibility failure the Contrast Matrix does not automatically catch, since it only compares text/background pairs.

4. A Practical Testing Checklist

1Check Every Text/Background Pair
Open the WCAG Contrast Matrix and confirm every realistic text-on-background combination clears at least AA (4.5:1) before shipping.
2Simulate Color Vision Deficiencies
Toggle each color-blindness simulation above and confirm your palette's key distinctions (success vs. error, active vs. inactive) still read clearly.
3Never Rely on Color Alone
Pair every color-coded status (red = error, green = success) with an icon, label, or pattern so meaning survives even in grayscale.
4Test Interactive States
Hover, focus, active, and disabled states often use lower-opacity colors, so re-check contrast for each state individually, not just the resting state.
5Test in Real Daylight
Screens wash out dramatically in direct sunlight. If your product is used outdoors (delivery, fieldwork, navigation), aim for APCA Lc 75+ rather than the bare legal minimum.

Design Tokens & Print Suite: From Atelier to Production

Design Tokens are the universal dictionary connecting designers, programmers, and printing presses. MLM Studio exports clean, production-ready code for every modern framework and press specification.

§ CSS Custom Properties
Ready-to-paste CSS variables featuring HEX, RGB, HSL, CMYK print formulas, and modern CSS oklch() tokens for your web stylesheet.
§ Tailwind CSS (v3 & v4)
Includes both JavaScript tailwind.config.js theme extensions for Tailwind v3 and modern CSS-first @theme blocks for Tailwind v4.
§ CMYK Print Specifications
Calculates exact Cyan, Magenta, Yellow, and Black ink percentages for physical architectural material boards, brochures, signage, and offset printing presses.
§ W3C JSON Tokens
Full W3C Design Tokens Community Group specification with semantic roles, CMYK ink values, and 50–900 tonal shades for Style Dictionary & Figma Tokens Studio.
§ Figma & Sketch SVG
Generates a clean vector swatch card. Drag and drop the downloaded SVG file directly into Figma, Sketch, Penpot, or Illustrator for instant vector components.
§ SwiftUI & Android XML
Pre-built Swift Color extensions for iOS apps and colors.xml resource definitions for native Android developers.
§ 10-Step 50–900 Tonal Ladders
Every swatch generates an automatic 10-step ladder (50, 100, 200, ..., 900) by modulating OKLCH Lightness. Click any miniature bar on a swatch to copy its exact shade!

A Peek at the Exported Code

Every export format is generated from the exact same swatch data, just reshaped for its target platform. Here's what two of the most common ones actually look like:

:root {
  --color-primary-500: #C9883C;
  --color-primary-500-rgb: 201, 136, 60;
  --color-primary-500-oklch: oklch(65.2% 0.14 58.3);
  --color-primary-500-cmyk: cmyk(0%, 32%, 70%, 21%);
}
// tailwind.config.js (v3)
theme: {
  extend: {
    colors: {
      primary: {
        500: '#C9883C',
        600: '#B37530',
      }
    }
  }
}
❦ Spot Colors & Pantone Matching: The CMYK values exported here are process-color (4-ink) approximations. If your brand requires an exact Pantone spot color for signage or packaging, hand the closest CMYK value to your print vendor along with the intended Pantone reference number. They can dial in the precise spot ink match.

Interactive Color Lexicon & Practical FAQ

Look up any technical term used across MLM Color Palette Studio in plain, easy-to-understand language, and find answers to the questions people ask most often.

Frequently Asked Questions

Why did my locked color change slightly after I hit regenerate?
Locked colors keep their exact hue, chroma, and lightness. On rare occasions a tiny correction is applied if the surrounding palette pushes a swatch outside the safe display/print boundary: that's the 20-step gamut-mapping safeguard protecting it, not a bug.
Why does the same hex code look different in Live Preview vs. the swatch card?
Live Preview renders colors against different backgrounds (a dark dashboard vs. a bright editorial page), and human perception of a color genuinely shifts depending on what surrounds it. This is called simultaneous contrast: a real optical effect, not a rendering error.
My palette passes WCAG but the Quality Audit meter is still low. Why?
WCAG only measures text contrast. The Quality & APCA Audit meter also scores harmony balance, chroma consistency, and perceptual spacing between swatches, so a legally accessible palette can still score as visually unbalanced.
Can I start from a color I already have, like a logo color?
Yes. Use the Image Palette Extractor & Eyedropper to sample the exact pixel from a photo or brand asset, then lock that swatch before regenerating the rest of the palette around it.
Why doesn't the exported CMYK match what my printer produces?
Exported CMYK is a mathematical sRGB-to-CMYK conversion. Actual ink behavior depends on paper stock, press calibration, and ink batch, so always request a physical proof for color-critical print jobs (see Tab V for more on this).
Does the Image Extractor upload my photo anywhere?
No. The photo is decoded and processed entirely inside your own browser on an in-memory canvas. It is never uploaded to a server.
What's the difference between a "shade," a "tint," and a "tone"?
A tint mixes a color with white (lighter). A shade mixes a color with black (darker). A tone mixes a color with gray (more muted). The 50–900 tonal ladder generates both tints (50–400) and shades (600–900) automatically around your base swatch (500).
How many colors should my palette actually have?
3–5 for a small brand or landing page, 6–8 for a typical product UI with states (success/warning/error), and up to 12 for a full enterprise design system with data-visualization needs. Use the Scale slider to match your real project size.

Color Term Glossary

CMYK Print Inks
Cyan, Magenta, Yellow, Key/Black. The subtractive 4-ink model used in offset printing presses, architectural material specifications, and physical print production.
OKLCH Color Space
A modern, perceptually uniform cylindrical color space based on human retinal cones. Built with Lightness ($L$), Chroma ($C$), and Hue ($H$).
Chroma (C) Attribute
The purity, saturation, or intensity of a color. In OKLCH, 0 is calm grayscale stone, and 0.35+ is intense, eye-catching neon.
Perceptual Lightness (L) Attribute
The perceived brightness of a color as processed by human vision, ranging from 0% (absolute black) to 100% (pure white).
Hue Angle (H) Attribute
The angular direction on the $360^\circ$ color circle specifying the tint family (red, yellow, green, cyan, blue, purple).
APCA ($L_c$) Accessibility
Advanced Perceptual Contrast Algorithm. The next-generation contrast metric for WCAG 3.0, taking font size, text weight, and dark-mode glare into account.
WCAG 2.1 Standard
Web Content Accessibility Guidelines. The global standard measuring contrast ratios (4.5:1 for AA normal text, 7:1 for AAA high-readability text).
Gamut Mapping Color Science
The smart process of adjusting colors to fit safely inside monitor and printer bounds (sRGB) without shifting their original hue.
Delta E ($\Delta E$) Metric
The mathematical distance between two colors in 3D perceptual color space. $\Delta E < 1.0$ is imperceptible; $\Delta E > 5.0$ is a clearly distinct color.
Tonal Ramp (50–900) Design System
A systematic 10-step ladder of tints and shades generated from a single parent hue to support UI states (hover, active, disabled, focus).
Geodesic Path Mathematics
The shortest smooth path between colors in curved 3D space. In OKLCH, geodesic blending prevents muddy, dull dead zones.
Design Tokens Engineering
Platform-agnostic variables that store visual design decisions (colors, typography, spacing) across web, iOS, and Android applications.
Eyedropper & Extractor Tool
A tool that inspects uploaded photos, samples individual pixels, and clusters dominant hues into a balanced design palette.
RGB & HSL Legacy Model
Red-Green-Blue and Hue-Saturation-Lightness, the older color models most software still uses. Mathematically simple, but not perceptually uniform (see the Color Science tab for why that matters).
Tint, Shade & Tone Attribute
A tint mixes a color with white (lighter). A shade mixes a color with black (darker). A tone mixes a color with gray (more muted, less saturated).
sRGB & Display P3 Gamut
Two standard ranges of colors a screen can reproduce. sRGB is the older, universally-supported range; Display P3 is a newer, wider range found on most modern phones and monitors.
K-Means Clustering Algorithm
The statistical algorithm the Image Extractor uses to group thousands of photo pixels into a handful of representative dominant colors.
Simultaneous Contrast Perception
An optical effect where the same color appears to shift in brightness or hue depending on the colors surrounding it, which is why a swatch can look different in Live Preview than on its own card.
Pantone & Spot Color Print
A pre-mixed, single ("spot") ink matched to a Pantone reference number, used when a brand needs an exact, consistent color that 4-ink CMYK process printing can only approximate.
Undertone Perception
The subtle secondary hue hiding underneath a color's dominant appearance: for example, a "white" paint with a warm undertone will look faintly yellow or pink next to a cooler white.

The Founder's Vision & Philosophy

MLM Color Palette Studio was built by award-winning architect Mohamed Loay M., who spent years choosing materials and shaping spaces on real construction sites. Somewhere along the way, that hands-on work turned into a genuine obsession with color: how it shifts under different light, how it survives the trip from a screen to a physical wall, and how to get it right without guesswork. This studio is that obsession turned into a tool anyone can use, no color theory background required.

ML
Mohamed Loay M.
Founder of MLM Color Palette Studio · Award-Winning Architect
Connect on LinkedIn Explore Behance Portfolio

From Physical Architecture to Digital Color Science

In physical architecture, color is never mere decoration; it governs spatial depth, circadian human rhythm, tactile material perception, and geometric balance. Years spent specifying travertine stone, oxidized brass, raw linen, and weathered umber for real buildings taught a simple lesson: color decisions that look right on a screen often fail in the physical world, and color decisions that are only "close enough" quietly undermine legibility, brand trust, and human comfort. This studio exists to carry that same architectural rule, measure twice and specify once, into digital interfaces and physical print media alike.

MLM Color Palette Studio is the result: a single atelier that combines rigorous OKLCH perceptual color science, subtractive CMYK press calibration, WCAG 2.1 & APCA readability verification, real-photograph color extraction, and zero-friction developer handoff, so a solo founder, a design team, and a print production house can all speak the exact same color language without losing precision at any handoff point.

Guiding Principles

❦ Perceptual Accuracy Over Guesswork
Every harmony, tint, and shade in this studio is calculated in OKLCH, a color space modeled on how human eyes actually perceive light, instead of naive RGB or HSL math that quietly produces muddy, uneven results.
❦ Accessibility Is Not Optional
Every palette is measured against WCAG 2.1 and the newer APCA contrast model in real time, so accessible, readable design is the default outcome, not an afterthought bolted on at the end of a project.
❦ Physical & Digital, One Language
Screens and printing presses render color completely differently. This studio calculates true CMYK ink breakdowns alongside RGB/HEX values, so what you approve on-screen survives the trip to physical material and print.
❦ Craft Over Templates
Every harmony algorithm, curated preset, and architectural material palette was hand-tuned swatch by swatch, not auto-generated in bulk: the same care given to specifying materials for a real building.
❦ Zero-Friction Handoff
A palette is only as useful as what happens after you pick it. One click exports production-ready CSS variables, Tailwind config, SCSS, JSON, Figma-ready SVGs, and print-ready CMYK specs, with no manual re-typing and no drift between design and code.
❦ Built for Everyone
From a complete beginner who has never heard the word "hue" to a senior engineer wiring up a design-token pipeline, the studio is written to teach as it works, not just to output colors.

What's Inside This Atelier

ModuleWhat It Does
Harmony GeneratorComposes balanced palettes of 3–12 colors across Monochromatic, Analogous, Triadic, Complementary, Architectural, Scandinavian, and other perceptual harmony modes.
OKLCH Precision TunerFine-tune lightness, chroma, and hue on any swatch with live screen and CMYK print previews.
Quality & APCA AuditLive heuristic scoring of harmony, contrast, perceptual separation, and tonal hierarchy for every palette you build.
WCAG Contrast MatrixCross-checks every color pair in your palette against WCAG 2.1 and APCA so text stays legible for all users.
Image Palette Extractor & EyedropperUpload any photo and extract its dominant colors via perceptual k-means clustering, or eyedrop any pixel directly, including a system-wide pixel outside the browser.
Live UI PreviewsSee a palette applied instantly inside a SaaS dashboard, editorial article, mobile shopping app, and brand sheet before you commit to it.
Export SuiteOne-click CSS variables, Tailwind (v3 & v4), SCSS, JSON, Figma SVGs, CMYK print specs, and presentation-ready PNG cards.
❦ In the Founder's Words: "I kept running into the same problem: a color that looked perfect on my laptop at midnight would look completely different once I saw it on real stone or paint in daylight, months later. I built this tool to close that gap, so a decision made on screen still holds up once it's real."