omgovich / colord

👑 A tiny yet powerful tool for high-performance color manipulations and conversions
https://colord.omgovich.ru
MIT License
1.67k stars 50 forks source link

colord returns orange-ish color when mixing red #106

Open jahirfiquitiva opened 1 year ago

jahirfiquitiva commented 1 year ago

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

Shot 2023-07-06 at 12 58 33@2x

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

jahirfiquitiva commented 1 year ago

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

Shot 2023-07-06 at 13 11 25@2x

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

jahirfiquitiva commented 1 year ago

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