colord icon indicating copy to clipboard operation
colord copied to clipboard

colord returns orange-ish color when mixing red

Open jahirfiquitiva opened this issue 1 year ago • 2 comments

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 avatar Jul 06 '23 17:07 jahirfiquitiva

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 avatar Jul 06 '23 18:07 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);
};

jahirfiquitiva avatar Jul 06 '23 18:07 jahirfiquitiva