colord returns orange-ish color when mixing red

[jahirfiquitiva]

It should be closer to a red shade just like the other libraries do

Took this screenshot while using https://3cg7o.csb.app/

[jahirfiquitiva]

And I think a similar issue happens with tints, shades and tones .... The color tends to move towards an orange-ish shade

Update: tints, shades and tones, uses mixPalette under the hood, so yeah, they will have the same issue as if using mix

[jahirfiquitiva]

In case anyone comes across the same issue, I did this copying the mix function from tinycolor2

// Based on https://github.com/bgrins/TinyColor/blob/b49018c9f2dbca313d80d7a4dad25e26143cfe01/npm/esm/tinycolor.js#L681
import { colord } from "colord";
import type { Colord } from "colord";

export const mixColors = (
  colorA: Colord,
  colorB: Colord,
  ratio = 0.5
): Colord => {
  const rgb1 = colorA.rgba;
  const rgb2 = colorB.rgba;
  const rgba = {
    r: (rgb2.r - rgb1.r) * ratio + rgb1.r,
    g: (rgb2.g - rgb1.g) * ratio + rgb1.g,
    b: (rgb2.b - rgb1.b) * ratio + rgb1.b,
    a: (rgb2.a - rgb1.a) * ratio + rgb1.a,
  };
  return colord(rgba);
};

[dkryaklin]

Not an issue in @colordx/core. Mixing red with white stays cleanly red throughout:

import { colordx } from '@colordx/core';

colordx('#ff0000').mix('#ffffff', 0.25).toHex() // '#ff4040' — h: 0
colordx('#ff0000').mix('#ffffff', 0.5).toHex() // '#ff8080' — h: 0
colordx('#ff0000').mix('#ffffff', 0.75).toHex() // '#ffbfbf' — h: 0

The root cause in colord is CIE Lab interpolation. Red's Lab coordinates cause a hue drift toward orange at midpoints. colordx interpolates in linear RGB instead, which matches how browsers composite colors (CSS opacity, Figma layers) and keeps the hue stable. The same applies to tint(), shade(), and tone() in the mix plugin