Colorise ProOKLCH Engine
ExploreStudioNamesPickerPairs
ExploreStudioNamesPickerPairsContrastExtract
Menu

Product

  • Home
  • Explore
  • Studio
  • Color Names

Tools

  • Picker
  • Color Pairs
  • Contrast
  • Image Extract
  • Gradient Lab
  • Palette Diff
  • Brand from URL

Guides

  • All guides
  • OKLCH vs HSL
  • WCAG vs APCA
  • OKLCH color scales
  • Gamut & sRGB
  • Extract from images
  • HEX to OKLCH
  • Dark mode colors
  • Color meanings

Tools · Diff

Palette Diff & Morph

A = from · B = to · slider morphs the in-between in OKLCH. Export when it feels right.

Mean ΔE 30.6Biggest jump slot 3 · ΔE 56.34 pairs · OKLCH

A · from

Morph · 50%

B · to

Morph preview

Mid-migration UI

How the in-between palette reads on surface and type.

Accent action

Palette A

From

  • inkPick
  • primaryPick
  • accentPick
  • surfacePick

Palette B

To

  • inkPick
  • primaryPick
  • accentPick
  • surfacePick

Slot pairs · CIEDE2000 · tap for detail

Open morph in Studio

Frequently asked questions

What does the ΔE value mean?
ΔE (CIEDE2000) estimates perceived difference between two colors. Below 1 is indistinguishable, around 2–3 is just noticeable, and above 10 reads as a different color.
How does palette morphing work?
Each slot of palette A is paired with palette B and interpolated in OKLCH along the shortest hue path. Use Play to animate 0→100%, then export the mid-migration tokens.
Index vs hue matching?
By index pairs slot 1→1, 2→2. By hue reorders B so each A color meets its closest hue neighbor — useful when palettes were authored in different orders.
How do I load colors quickly?
Use Paste on either palette: drop a HEX list, a Studio share URL, or a ?colors= chain. Swap flips A and B when you want to reverse the migration.
What is a good ΔE between brand colors?
For a rebrand you usually want core colors to move by more than ΔE 5–10 so users register the change, while functional colors (success, warning, error) should stay within a few ΔE of their conventional hues so meaning is not lost.
Can I export the in-between palette from a morph?
Yes. Pause or scrub the morph to the frame you want and export it — the midpoint palettes are complete, usable themes, not just animation frames.
CIEDE2000 vs simple RGB distance?
RGB distance counts channel math, not perception — two greys can score high while a vivid hue shift scores low. CIEDE2000 (ΔE00) is the industry standard for perceptual difference and is what this tool reports.
How do I load Studio or Explore palettes into Diff?
Paste a HEX list, a Studio share URL, or a ?colors= chain into either side. Swap flips A and B when you want to reverse the migration direction.
Why can a small ΔE still break text contrast?
ΔE measures overall perceived difference, not whether text on a colour still passes. A change that is small in ΔE can still move lightness enough to push a pair under the 4.5:1 WCAG AA level. After any change to a text or background colour, test the real pairs in the contrast checker.
What do ΔL, ΔC and ΔH mean?
They are the change in OKLCH lightness, chroma and hue between the two colours. ΔL moves contrast, ΔC changes how vivid the colour is, and ΔH is the shortest turn around the hue circle in degrees. Hue is not meaningful for near-greys, so treat it with caution there.
Which mix space should I morph in, OKLCH or HSL?
OKLCH is usually the better default, because lightness stays perceptually even and hues take the short route. HSL is available for comparison, and for cases where you want the result to match an existing HSL-based workflow. Compare the midpoints if the choice matters.
Why does by-hue matching sometimes pair the wrong colours?
It is a greedy match on OKLCH hue, one colour at a time. Neutrals have unreliable hues, and two colours with similar hues can compete for the same partner. Scan the pairs after switching modes, and reorder the palettes yourself if a pair looks wrong.
How many colours can each palette hold?
Pasted chains are limited to ten colours per palette. If the palettes have different lengths, by-index mode pads the shorter one by repeating its last colour, and by-hue mode appends unmatched colours from the longer palette against the last colour of A.
Is the diff saved or sent anywhere?
The comparison runs in your browser. The page keeps the current palettes, slider position and mix space in the page URL so you can share or reopen the same view. That URL contains colour values, not any image or account data.

Comparing and morphing palettes

ΔE: how different are two colors, really?

Two HEX values can differ numerically and still look identical — or differ by one digit and flip a brand color. ΔE (CIEDE2000) measures perceived difference: below 1, no human can tell the colors apart; 2–3 is just noticeable side by side; above 10 they read as different colors. Palette diff scores every slot of palette A against palette B so you can see whether a rebrand actually moved, and where.

Morphing: the path between two palettes

Morphing pairs each slot of palette A with palette B and interpolates in OKLCH along the shortest hue path. That matters during migrations: the midpoint frames are the intermediate themes your users would see if you animated a theme switch, and they are also candidate palettes in their own right — a 40% morph often lands on a softer variant worth keeping. Scrub or play the animation, then export the frame that works as tokens.

Because interpolation happens in OKLCH, lightness stays perceptually even during the morph; in RGB the same transition dips through grey. If a slot pair takes a strange route, the two hues are probably more than 180° apart in effect — swap in a closer intermediate from the picker and morph in two steps.

When to diff a palette

Before and after a redesign (did the palette actually change, or just the names?), when merging two products' design systems, when checking a contractor's delivery against the agreed palette, and when auditing whether a dark theme is a real palette or an inverted afterthought. For single colors rather than palettes, the color library lists nearest named neighbours, and pair-level accessibility belongs in the contrast checker.

Migrating tokens without surprising users

Ship large ΔE moves on brand accents first (users expect those to change), keep functional hues (success/warning/error) within a few ΔE of convention, and use morph midpoints as candidate soft launches. Export the chosen frame to CSS or Tailwind, then re-check body text pairs — a migration that looks fine as swatches can still fail AA on real type.

Load palettes quickly from Studio share links, Explore pages, or HEX lists. Index matching is best when both systems share role order; hue matching helps when one side was authored ad hoc. Compare fairly against tools that only show side-by-side swatches without ΔE — perception needs a number.

Reading a palette diff with confidence

What ΔE (CIEDE2000) measures, and how to read it

ΔE is a single number for how far apart two colours look. The tool uses CIEDE2000, a formula that compares colours in the CIELAB space and adjusts for known quirks of human vision, such as being less sensitive to differences between very vivid colours. A value of zero means the two colours are the same. Larger values mean the difference is easier to see.

Rough rules of thumb are useful if you hold them loosely. Around 1 is barely perceptible to most people under good conditions. Between about 2 and 3 you can usually see a difference when the colours are side by side and you look closely. Above about 5 the colours look clearly different at a glance. These bands move with viewing conditions, screen quality, the size of the area and the person looking, so treat them as guidance, not as a standard. The tool's own labels follow the same idea: Identical, Just noticeable, Close, Different, Far and Opposite.

ΔE also tells you less than it seems to. It does not say which way a colour moved, and it does not say whether text on it still reads. Two colours can be 6 apart because one is lighter, or because one is more vivid, or because the hue has turned. Each has different consequences, which is why the next section looks at the separate channels.

Reading channel deltas in OKLCH

OKLCH describes a colour with lightness (L), chroma (C) and hue (H). Subtracting the old value from the new one, slot by slot, turns a single distance into a short story. ΔL is the signed change in lightness, and it is the number that most directly moves contrast: a lighter button fill gives white labels less to work with. ΔC is the change in vividness: negative means the colour has become more muted. ΔH is the shortest turn around the hue circle in degrees, and it is the change that people notice as the colour becoming a different colour.

The table compares two small palettes defined as constants for this page: an old and a new brand set of five slots each. Slot names come from the same slot order the tool uses. Every number is computed with the helpers the tool uses. Hue is shown as a dash when either colour has very little chroma, because the hue of a near-grey is not meaningful and can swing wildly on tiny changes. The verdict column reuses the tool's ΔE labels.

Old vs new brand palette, slot by slot (computed)
SlotOldNewΔE2000ΔLΔCΔHWCAG vs white (old → new)Verdict
ink#0F172A#1018281.8+0.002−0.006−2°17.85 → 17.75Just noticeable
primary#2563EB#4F46E510.1−0.036+0.015+14°5.17 → 6.29Far
accent#F97316#EA580C7.5−0.059+0.008−6°2.80 → 3.56Different
surface#F8FAFC#FAFAF91.6+0.001−0.002–1.05 → 1.04Just noticeable
muted#64748B#6B72804.1−0.003−0.017+7°4.76 → 4.83Close

ΔL, ΔC and ΔH are new minus old in OKLCH. A dash means one of the two colours is near-neutral, so its hue is not meaningful. Verdicts use the tool’s own ΔE labels.

Matching by index or by hue

A diff only makes sense if each colour in one palette is compared with the right colour in the other. By index pairs the first with the first, the second with the second, and so on. That is the right mode when both palettes follow the same layout, for example two versions of a design-system token file where slot 2 is always the primary.

By hue is for palettes written in different orders. For each colour in A, the tool looks for the unused colour in B whose OKLCH hue is closest, and pairs them. The matching is greedy: it goes down A in order, and each B colour can be used once. It works well when hues are distinct, and less well for neutrals, where hue is unreliable, and for palettes where two colours share a hue. Always scan the resulting pairs to confirm they make sense. If B has more colours than A, the extra ones are appended against A's last colour.

To show the difference, the table uses a five-hue palette (blue, orange, green, purple, red) and revised versions of the same five hues, written in a different order. By index compares colours that have nothing to do with each other, so the ΔE values are large. By hue lines up each colour with its revised counterpart. The pairs, and the mean and largest ΔE for each mode, are computed with the tool's own pairing and statistics functions. The point is not that one mode is always better; it is that the wrong mode makes a rebrand look far bigger than it is. A palette with several neutrals would not pair as cleanly, for the reason above.

Five-hue palette against revised versions of the same hues in a different order, paired two ways (slot names follow the tool)
SlotOldBy index: newΔEBy hue: newΔE
ink#2563EB#BE123C40.8#1D4ED87.1
primary#F97316#7E22CE57.9#EA580C7.5
accent#16A34A#EA580C62.2#15803D12.2
surface#9333EA#1D4ED815.8#7E22CE6.4
muted#E11D48#15803D72.1#BE123C7.8
Mean ΔE49.88.2
Largest ΔE72.112.2

Both pairings use the same two palettes. Only the matching differs.

Morphing: when blending two palettes helps

The morph slider mixes each paired colour from A toward B. You can mix in OKLCH or in HSL, scrub with the slider or press Play, and swap the sides to run a migration in reverse. The midpoint is a complete palette, so it is often more useful than the animation: it is the colour set you would see halfway through a gradual rollout.

Several jobs fit this. In a rebrand audit, the diff shows which slots moved most and the midpoint shows whether a softer step is possible. In a design-system migration, intermediate frames suggest a staged change, where tokens move halfway in one release and finish in the next. For theme drift, load the documented palette as A and the colours currently in production as B; any slot with a ΔE above the label you consider acceptable is a place where the product has wandered. For light and dark themes, a morph shows whether the two themes share a consistent hue story.

The mix space changes the result. OKLCH keeps perceived lightness steady along the way and takes the shortest route around the hue circle. HSL mixes hue, saturation and lightness values that are not perceptually even, so the middle can differ, and tends to differ more as the hue move gets larger. The table shows the 50% midpoint for each slot in both spaces, the WCAG contrast of each midpoint against white, and the ΔE between the two midpoints, which tells you how much the choice of space matters for that slot.

Morph midpoint (50%) for each slot, mixed in OKLCH and in HSL
SlotOldNewMid (OKLCH)WCAG vs whiteMid (HSL)WCAG vs whiteΔE between mids
ink#0F172A#101828#0F182917.75:1#10182917.73:10.4
primary#2563EB#4F46E5#3E55E95.71:1#364DE86.21:12.3
accent#F97316#EA580C#F266103.14:1#F6640D3.11:10.8
surface#F8FAFC#FAFAF9#F9FAFB1.05:1#F8FBF91.04:12.1
muted#64748B#6B7280#6873864.79:1#6873854.79:10.5

Midpoints come from the same morph function the tool uses. Contrast against white is a quick scan; test real text and background pairs in the contrast checker.

Re-checking contrast after a change

A palette can pass a diff and still break an interface. If a primary moves a little lighter, white button labels may drop below the 4.5:1 WCAG AA level, while the diff still reports a modest ΔE. The ΔL column is the early warning: whenever a text or background colour moves in lightness, re-test the pairs that use it. The WCAG columns in the tables above give the ratio against white for each side of the change, as a quick scan, but they are no substitute for testing real pairs.

A short routine works well. Load the old and new palettes and read the largest ΔE and the channel that drives it. Fix any slot where the change was not intended using the OKLCH picker. Then test every text and background pair in the contrast checker, which reports WCAG ratios and APCA. If you start from a live site, Brand from URL can supply the current colours, and Studio can turn the approved set into ramps and tokens. To look for a starting point for the new direction, Explore lists ready-made palettes.

Finally, record the result. A diff with the date, the ΔE per slot and the contrast decisions makes the next audit much shorter, because you can see what moved and why.

Last reviewed 2026-11-08.

Related tools

Load palettes from Studio or Brand, refine outliers in the picker, then verify text pairs after a morph.

  • Studio
  • OKLCH picker
  • Brand from URL
  • Contrast checker
  • Explore palettes
Colorise Pro

Free OKLCH color workspace: precision color picker, color pairs, WCAG & APCA contrast checker, palette from image, Studio systems, names, gradients, and brand tools. Export HEX, CSS, Tailwind & DTCG.

OKLCH Engine

Product

  • Home
  • Explore
  • Studio
  • Color Names
  • Color Codes

Tools

  • Color Picker
  • Color Pairs
  • Contrast Checker
  • Image Extract
  • Gradient Lab
  • Palette Diff
  • Brand from URL
  • For presentations
  • For business cards
  • For SaaS landings
  • Duo pairs
  • Trio systems

Guides

  • All guides
  • OKLCH vs HSL
  • WCAG vs APCA
  • OKLCH color scales
  • Gamut & sRGB
  • Extract from images
  • HEX to OKLCH
  • Dark mode colors
  • Color meanings

Legal

  • Privacy
  • Terms

© 2026 Colorise Pro. All rights reserved.

© 2026 Colorise Pro. Built for precision color work.

Report infringement: [email protected] (Colorise Pro)

PrivacyTermsOKLCH · WCAG · APCA
Morph 50%