Gradie’s single-control approach: extracting five colors from images and using OKLCH for cleaner gradients
Gradie generates custom gradients from an uploaded image by extracting five dominant colors and using a single color-format control that also sets interpolation.
Emmanuel built Gradie as a deliberately small, focused web app that turns an image into a collection of ready-to-use gradients by extracting the five most prominent colors and applying them across automatically generated blends. The app’s simplicity masks a deliberate design decision at its core: when a user selects a color format in Gradie, that choice controls both how the colors are written and the interpolation space used to blend them. That one-control approach—paired with a preference for OKLCH interpolation—shapes what the gradients look like and keeps the tool compact and opinionated.
How Gradie turns images into gradients
Gradie’s workflow is intentionally concise. A user uploads an image, the app identifies the five dominant colors, the tool uses those colors to generate multiple gradient variations, and the user can export the results. Emmanuel describes the application as “one thing and it does it well”: focused on extracting color from imagery and turning those palettes into usable gradients without a large set of customization knobs.
The app also includes a color-format chooser. That control isn’t merely cosmetic: it determines both the textual color representation (for example, HEX, RGB, OKLCH) and the interpolation space the app uses when creating transitions between colors. That coupling is a deliberate simplification that prevents additional complexity and feature creep.
Why OKLCH mattered for Gradie
A pivotal moment in Gradie’s development came after Emmanuel read a technical write-up that made a case for OKLCH. Convinced by that explanation, he initially wanted Gradie’s gradients to default to or be restricted to OKLCH. Ultimately he chose a more flexible route: Gradie supports multiple color formats, but it pairs each format with a matching interpolation space when possible—so choosing OKLCH sets both the color format and OKLCH interpolation.
That decision came from a mix of curiosity, the realities of building a small tool, and a developer preference for giving users choice without multiplying settings. Emmanuel had originally considered an OKLCH-only experience, but his inclination toward user customization and dislike of removing features people might rely on changed that plan.
Color conversion and the role of colorjs.io
Adding a color-format switcher introduced a new requirement: reliable color conversion across modern web formats. Instead of implementing all conversions manually, Emmanuel integrated a third‑party color library to handle the conversions and supported formats. After multiple iterations and refactors, he settled on colorjs.io because it was straightforward to integrate and provided support for the major web color formats he wanted Gradie to offer.
Using a library removed a significant source of potential bugs and allowed Gradie to focus on the extraction and gradient-generation aspects rather than low-level color math. Emmanuel emphasizes that choosing an established library helped him avoid hand-rolling conversions for a feature he hadn’t planned from the start.
Interpolation spaces and visible differences
A central technical takeaway from Gradie’s development is how interpolation space influences the look of a gradient. Emmanuel illustrates this with a simple experiment: the same pair of input colors produces noticeably different gradient results when interpolated in sRGB versus OKLCH. The app demonstrates both outcomes; the sRGB-interpolated gradient and the OKLCH-interpolated gradient can look “completely different” despite identical endpoints.
Because of that visual divergence, Gradie’s user-facing control needs to communicate more than a preferred serialization format—it also controls the mathematical space the browser uses to blend colors. Rather than expose separate knobs for format and interpolation (which would have expanded the UI), Gradie binds them together: when a user chooses OKLCH, Gradie writes the colors in OKLCH and uses OKLCH interpolation; when the user chooses a format typically represented by sRGB (such as RGB or HEX), Gradie uses an sRGB interpolation space.
The CSS specification does allow mix-and-match combinations—writing colors in one format while interpolating in another—but Gradie does not expose that level of mixing. Emmanuel intentionally avoids support for writing colors in one format and interpolating in a different space in order to keep the app’s rule set simple and the codebase manageable.
A single control to reduce feature creep
Gradie’s “one control to rule them all” approach is a pragmatic reaction to feature creep and the cognitive overhead that comes with many configuration options. Emmanuel describes how the project’s original plan was to remain purposely minimal—upload, extract, generate, export—without a sprawling set of customization controls. When the color switcher became necessary, rather than add multiple interdependent controls (one for textual color format, another for interpolation space), he combined them into a single control that maps formats to interpolation spaces.
The compromise is not without trade-offs: it reduces flexibility for users who might want to independently choose serialization and interpolation behaviors. But for Gradie’s scope—quickly producing visually consistent gradients from images—the one-control model enforces sensible defaults and keeps the interface compact.
Developer lessons and product design echoes
Emmanuel’s account of Gradie connects to a prior experience shipping a Figma plugin called AspectMatic. When he revisited AspectMatic v3, he found himself confronted with the familiar tension between cleaning up behavior he disliked in his earlier code and preserving features users had come to rely on. For example, AspectMatic originally returned aspect ratios as decimals; despite Emmanuel’s reservations about that representation, the feature had users, and he resisted removing it solely because of his personal preference.
That perspective informed Gradie’s design: prioritizing a minimal, consistent UX while retaining enough choice for users. It also explains why he opted to use a library for color conversions rather than reimplementing conversions from scratch—minimizing surface area for mistakes when a small change could add disproportionate maintenance cost.
Practical implications for designers and developers
For designers and developers working with color and gradients on the web, Gradie’s approach highlights a few concrete considerations:
- Color format selection is not purely about textual representation; it can and often should influence how color transitions are computed.
- Interpolation spaces like sRGB, LAB, and OKLCH produce different visual results with the same endpoints, so the choice affects the perceived smoothness and hue shifts.
- Libraries that manage color conversions can reduce development complexity when you need to support multiple formats reliably.
- Simplifying user controls—by coupling related choices—can be a pragmatic way to limit complexity in a focused tool, though it reduces advanced configurability.
These are practical points that can inform internal documentation, design system tooling, or quick utilities that aim to help teams iterate on color choices and gradients without exposing every low-level option.
How Gradie fits into a broader tooling landscape
Gradie sits in a space where small, focused utilities help designers and developers bridge the gap between imagery and usable design assets. It complements workflows that involve color extraction, design system palette generation, and gradient experimentation. The app’s use of OKLCH and attention to interpolation spaces aligns with ongoing conversations around more perceptually uniform color spaces for web design.
Because Gradie prioritizes a compact experience, phrases like color extraction, gradient generation, and color interpolation could naturally serve as internal link targets in a broader editorial site—leading readers to deeper pieces on color theory, CSS gradients, or the technical specifics of OKLCH and color conversion libraries.
What Emmanuel learned while building Gradie
Several concrete lessons emerge from the developer’s account: the limits of initial knowledge (not knowing about conic, radial, or repeating gradients, or interpolation specifics) can be remedied quickly by targeted reading; introducing a small new feature (like a color-format switcher) can cascade into additional design and engineering considerations; and sensible defaults—paired with a restrained UI—often make it easier to ship a small tool that still produces reliable, predictable results.
Emmanuel also notes the iterative nature of small projects: he posted demo videos to social platforms early in the project lifecycle and reused lessons from previous projects. That process—build, share, iterate—supported a pragmatic path to a usable product without overengineering.
If you want to test Gradie’s outputs or compare interpolation outcomes, the app provides examples that demonstrate the difference between sRGB and OKLCH interpolations for the same color endpoints, illustrating why interpolation space matters in practice.
I’d welcome corrections or clarifications: Emmanuel invites both grammatical and technical feedback, and he admits to having rewritten parts of the explanation multiple times while disentangling color spaces from interpolation methods. That openness to iteration is reflected in Gradie’s compact, opinionated design.
Looking ahead, the choices made in small tools like Gradie—about default color spaces, the coupling of format and interpolation, and the reliance on conversions provided by established libraries—will continue to shape how designers and developers think about color on the web and in tooling. As perceptually uniform color spaces become more familiar, expect more lightweight utilities to offer OKLCH or similar options by default and to make interpolation behavior an explicit, visible part of creating gradients.
