Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

colord returns orange-ish color when mixing red #106

Open
jahirfiquitiva opened this issue Jul 6, 2023 · 2 comments
Open

colord returns orange-ish color when mixing red #106

jahirfiquitiva opened this issue Jul 6, 2023 · 2 comments

Comments

@jahirfiquitiva
Copy link

jahirfiquitiva commented Jul 6, 2023

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 jahirfiquitiva changed the title colord return orange-ish color when mixing red colord returns orange-ish color when mixing red Jul 6, 2023
@jahirfiquitiva
Copy link
Author

jahirfiquitiva commented Jul 6, 2023

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
Copy link
Author

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant