It should be closer to a red shade just like the other libraries do <a target="_bl

colord returns orange-ish color when mixing red about colord HOT 2 OPEN

omgovich commented on May 20, 2024

colord returns orange-ish color when mixing red

from colord.

Comments (2)

jahirfiquitiva commented on May 20, 2024

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

from colord.

jahirfiquitiva commented on May 20, 2024

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);
};