Some colors don't match image properly about matugen

[InioX]

Hi, @linuxmobile !

I haven't pushed to main branch yet because of Aiving/material-colors#4

[InioX]

Now that the issue in material-colors has been resolved and a new release has been made, I will bump the version and try.

[BvngeeCord]

Can confirm, the output looks much better! I will try applying my GTK theme in a moment. Thanks for the quick response.

[InioX]

The issue is resolved now so I will make a new release.

[linuxmobile]

The issue is resolved now so I will make a new release.

Ulala! I will try right now!

Yes, much better. Although with each run it returns different colors. But that doesn't change much for me! Thank you <3

[PoSayDone]

There's also another issue with mismatched colors on Aiving/material-colors#5, but it's fixed in git so waiting for changes show up in cargo.

[InioX]

Hi, @BvngeeCord !

Thanks for the very detailed issue! I have also noticed this happening, but only when providing an image that is either black or white.

The issue should be with the material_color_utilities_rs::score::score function, especially these lines:
https://github.com/InioX/matugen/blob/fd262c1f8d328fab7db833040397b30c23a37100/material-color-utilities-rs/src/score.rs#L103-L109C6

I guess I'll try looking at the difference between the Rust, JavaScript, and Python implementations of this function. I wouldn't really rely on someone solving the issue in the original material-color-utilities-rs repo, as it has been inactive for a while.

[InioX]

Could you try comparing the outputs again on the latest commit? I tried generating with the same image as you did and the source color changed to one that seems to match it.

Before:

After:

[linuxmobile]

I am using version 1.2.2 but it seems to have the same problem as this issue!

IMAGE: https://i.imgur.com/wgdLyPc.jpg

[InioX]

Hi, after trying with the same image on the dev branch i managed to get a more accurate result.

Image used: https://imgur.com/wgdLyPc

Before:

{
   "colors":{
      "amoled":{
         "error":"#ffb4ab",
         "error_container":"#93000a",
         "inverse_on_surface":"#2f3035",
         "inverse_primary":"#005ac1",
         "inverse_surface":"#e3e2e8",
         "on_error":"#690005",
         "on_error_container":"#ffb4ab",
         "on_primary":"#002e69",
         "on_primary_container":"#d8e2ff",
         "on_primary_fixed":"#001a41",
         "on_primary_fixed_variant":"#004494",
         "on_secondary":"#253048",
         "on_secondary_container":"#d8e2ff",
         "on_secondary_fixed":"#0f1b32",
         "on_secondary_fixed_variant":"#3b475f",
         "on_surface":"#e3e2e8",
         "on_surface_variant":"#c4c6d0",
         "on_tertiary":"#44244a",
         "on_tertiary_container":"#fed6ff",
         "on_tertiary_fixed":"#2d0e34",
         "on_tertiary_fixed_variant":"#5d3a62",
         "outline":"#8e9099",
         "outline_variant":"#44474f",
         "primary":"#adc6ff",
         "primary_container":"#004494",
         "primary_fixed":"#d8e2ff",
         "primary_fixed_dim":"#adc6ff",
         "scrim":"#000000",
         "secondary":"#bbc6e4",
         "secondary_container":"#3b475f",
         "secondary_fixed":"#d8e2ff",
         "secondary_fixed_dim":"#bbc6e4",
         "shadow":"#000000",
         "source_color":"#4285f4",
         "surface":"#000000",
         "surface_bright":"#faf9ff",
         "surface_container":"#eeedf3",
         "surface_container_high":"#e8e7ed",
         "surface_container_highest":"#e3e2e8",
         "surface_container_low":"#f4f3f9",
         "surface_container_lowest":"#ffffff",
         "surface_dim":"#dad9df",
         "tertiary":"#e5b8e8",
         "tertiary_container":"#5d3a62",
         "tertiary_fixed":"#fed6ff",
         "tertiary_fixed_dim":"#e5b8e8"
      },
      "dark":{
         "error":"#ffb4ab",
         "error_container":"#93000a",
         "inverse_on_surface":"#2f3035",
         "inverse_primary":"#005ac1",
         "inverse_surface":"#e3e2e8",
         "on_error":"#690005",
         "on_error_container":"#ffb4ab",
         "on_primary":"#002e69",
         "on_primary_container":"#d8e2ff",
         "on_primary_fixed":"#001a41",
         "on_primary_fixed_variant":"#004494",
         "on_secondary":"#253048",
         "on_secondary_container":"#d8e2ff",
         "on_secondary_fixed":"#0f1b32",
         "on_secondary_fixed_variant":"#3b475f",
         "on_surface":"#e3e2e8",
         "on_surface_variant":"#c4c6d0",
         "on_tertiary":"#44244a",
         "on_tertiary_container":"#fed6ff",
         "on_tertiary_fixed":"#2d0e34",
         "on_tertiary_fixed_variant":"#5d3a62",
         "outline":"#8e9099",
         "outline_variant":"#44474f",
         "primary":"#adc6ff",
         "primary_container":"#004494",
         "primary_fixed":"#d8e2ff",
         "primary_fixed_dim":"#adc6ff",
         "scrim":"#000000",
         "secondary":"#bbc6e4",
         "secondary_container":"#3b475f",
         "secondary_fixed":"#d8e2ff",
         "secondary_fixed_dim":"#bbc6e4",
         "shadow":"#000000",
         "source_color":"#4285f4",
         "surface":"#121317",
         "surface_bright":"#38393e",
         "surface_container":"#1e1f24",
         "surface_container_high":"#292a2e",
         "surface_container_highest":"#333539",
         "surface_container_low":"#1a1b20",
         "surface_container_lowest":"#0d0e12",
         "surface_dim":"#121317",
         "tertiary":"#e5b8e8",
         "tertiary_container":"#5d3a62",
         "tertiary_fixed":"#fed6ff",
         "tertiary_fixed_dim":"#e5b8e8"
      },
      "light":{
         "error":"#ba1a1a",
         "error_container":"#ffdad6",
         "inverse_on_surface":"#f1f0f6",
         "inverse_primary":"#adc6ff",
         "inverse_surface":"#2f3035",
         "on_error":"#ffffff",
         "on_error_container":"#410002",
         "on_primary":"#ffffff",
         "on_primary_container":"#001a41",
         "on_primary_fixed":"#001a41",
         "on_primary_fixed_variant":"#004494",
         "on_secondary":"#ffffff",
         "on_secondary_container":"#0f1b32",
         "on_secondary_fixed":"#0f1b32",
         "on_secondary_fixed_variant":"#3b475f",
         "on_surface":"#1a1b20",
         "on_surface_variant":"#44474f",
         "on_tertiary":"#ffffff",
         "on_tertiary_container":"#2d0e34",
         "on_tertiary_fixed":"#2d0e34",
         "on_tertiary_fixed_variant":"#5d3a62",
         "outline":"#74777f",
         "outline_variant":"#c4c6d0",
         "primary":"#005ac1",
         "primary_container":"#d8e2ff",
         "primary_fixed":"#d8e2ff",
         "primary_fixed_dim":"#adc6ff",
         "scrim":"#000000",
         "secondary":"#535e78",
         "secondary_container":"#d8e2ff",
         "secondary_fixed":"#d8e2ff",
         "secondary_fixed_dim":"#bbc6e4",
         "shadow":"#000000",
         "source_color":"#4285f4",
         "surface":"#faf9ff",
         "surface_bright":"#faf9ff",
         "surface_container":"#eeedf3",
         "surface_container_high":"#e8e7ed",
         "surface_container_highest":"#e3e2e8",
         "surface_container_low":"#f4f3f9",
         "surface_container_lowest":"#ffffff",
         "surface_dim":"#dad9df",
         "tertiary":"#76517b",
         "tertiary_container":"#fed6ff",
         "tertiary_fixed":"#fed6ff",
         "tertiary_fixed_dim":"#e5b8e8"
      }
   },
   "colors_android":{
      "amoled":{
         "accent_surface":"#edf0ff",
         "color_accent_primary":"#d8e2ff",
         "color_accent_primary_variant":"#80aaff",
         "color_accent_secondary":"#d8e2ff",
         "color_accent_secondary_variant":"#a0abc8",
         "color_accent_tertiary":"#fed6ff",
         "color_accent_tertiary_variant":"#c89dcb",
         "color_background":"#000000",
         "color_background_floating":"#000000",
         "color_surface":"#0f1115",
         "color_surface_highlight":"#1a1b20",
         "color_surface_variant":"#24262a",
         "off_state":"#2f3035",
         "scrim_android":"#c6c6cc",
         "source_color":"#4285f4",
         "surface_header":"#1a1b20",
         "text_color_primary":"#f1f0f6",
         "text_color_primary_inverse":"#1a1b20",
         "text_color_secondary":"#c4c6d0",
         "text_color_secondary_inverse":"#45464b",
         "text_color_tertiary":"#8e9099",
         "text_color_tertiary_inverse":"#76777c",
         "text_primary_on_accent":"#1a1b20",
         "text_secondary_on_accent":"#44474f",
         "under_surface":"#000000",
         "volume_background":"#000000"
      },
      "dark":{
         "accent_surface":"#edf0ff",
         "color_accent_primary":"#d8e2ff",
         "color_accent_primary_variant":"#80aaff",
         "color_accent_secondary":"#d8e2ff",
         "color_accent_secondary_variant":"#a0abc8",
         "color_accent_tertiary":"#fed6ff",
         "color_accent_tertiary_variant":"#c89dcb",
         "color_background":"#1a1b20",
         "color_background_floating":"#1a1b20",
         "color_surface":"#2f3035",
         "color_surface_highlight":"#515257",
         "color_surface_variant":"#45464b",
         "off_state":"#2f3035",
         "scrim_android":"#c6c6cc",
         "source_color":"#4285f4",
         "surface_header":"#45464b",
         "text_color_primary":"#f1f0f6",
         "text_color_primary_inverse":"#1a1b20",
         "text_color_secondary":"#c4c6d0",
         "text_color_secondary_inverse":"#45464b",
         "text_color_tertiary":"#8e9099",
         "text_color_tertiary_inverse":"#76777c",
         "text_primary_on_accent":"#1a1b20",
         "text_secondary_on_accent":"#44474f",
         "under_surface":"#000000",
         "volume_background":"#3a3b40"
      },
      "light":{
         "accent_surface":"#edf0ff",
         "color_accent_primary":"#d8e2ff",
         "color_accent_primary_variant":"#005ac1",
         "color_accent_secondary":"#d8e2ff",
         "color_accent_secondary_variant":"#535e78",
         "color_accent_tertiary":"#fed6ff",
         "color_accent_tertiary_variant":"#76517b",
         "color_background":"#f1f0f6",
         "color_background_floating":"#faf9ff",
         "color_surface":"#faf9ff",
         "color_surface_highlight":"#ffffff",
         "color_surface_variant":"#e3e2e8",
         "off_state":"#2f3035",
         "scrim_android":"#c6c6cc",
         "source_color":"#4285f4",
         "surface_header":"#e3e2e8",
         "text_color_primary":"#1a1b20",
         "text_color_primary_inverse":"#f1f0f6",
         "text_color_secondary":"#44474f",
         "text_color_secondary_inverse":"#c6c6cc",
         "text_color_tertiary":"#74777f",
         "text_color_tertiary_inverse":"#909096",
         "text_primary_on_accent":"#1a1b20",
         "text_secondary_on_accent":"#44474f",
         "under_surface":"#000000",
         "volume_background":"#3a3b40"
      }
   }
}

After:

{
   "colors":{
      "dark":{
         "background":"#111318",
         "error":"#ffb4ab",
         "error_container":"#93000a",
         "inverse_on_surface":"#2f3036",
         "inverse_primary":"#445e91",
         "inverse_surface":"#e2e2e9",
         "on_background":"#e2e2e9",
         "on_error":"#690005",
         "on_error_container":"#ffdad6",
         "on_primary":"#102f60",
         "on_primary_container":"#d8e2ff",
         "on_primary_fixed":"#001a41",
         "on_primary_fixed_variant":"#2b4678",
         "on_secondary":"#293041",
         "on_secondary_container":"#dbe2f9",
         "on_secondary_fixed":"#141b2c",
         "on_secondary_fixed_variant":"#3f4759",
         "on_surface":"#e2e2e9",
         "on_surface_variant":"#c4c6d0",
         "on_tertiary":"#402843",
         "on_tertiary_container":"#fbd7fc",
         "on_tertiary_fixed":"#29132d",
         "on_tertiary_fixed_variant":"#583e5b",
         "outline":"#8e9099",
         "outline_variant":"#44474f",
         "primary":"#adc6ff",
         "primary_container":"#2b4678",
         "primary_fixed":"#d8e2ff",
         "primary_fixed_dim":"#adc6ff",
         "scrim":"#000000",
         "secondary":"#bfc6dc",
         "secondary_container":"#bfc6dc",
         "secondary_fixed":"#dbe2f9",
         "secondary_fixed_dim":"#bfc6dc",
         "shadow":"#000000",
         "surface":"#111318",
         "surface_bright":"#37393e",
         "surface_container":"#1e1f25",
         "surface_container_high":"#282a2f",
         "surface_container_highest":"#33353a",
         "surface_container_low":"#1a1b20",
         "surface_container_lowest":"#0c0e13",
         "surface_dim":"#111318",
         "surface_variant":"#44474f",
         "tertiary":"#debcdf",
         "tertiary_container":"#583e5b",
         "tertiary_fixed":"#fbd7fc",
         "tertiary_fixed_dim":"#debcdf"
      },
      "light":{
         "background":"#f9f9ff",
         "error":"#ba1a1a",
         "error_container":"#ffdad6",
         "inverse_on_surface":"#f0f0f7",
         "inverse_primary":"#adc6ff",
         "inverse_surface":"#2f3036",
         "on_background":"#1a1b20",
         "on_error":"#ffffff",
         "on_error_container":"#410002",
         "on_primary":"#ffffff",
         "on_primary_container":"#001a41",
         "on_primary_fixed":"#001a41",
         "on_primary_fixed_variant":"#2b4678",
         "on_secondary":"#ffffff",
         "on_secondary_container":"#141b2c",
         "on_secondary_fixed":"#141b2c",
         "on_secondary_fixed_variant":"#3f4759",
         "on_surface":"#1a1b20",
         "on_surface_variant":"#44474f",
         "on_tertiary":"#ffffff",
         "on_tertiary_container":"#29132d",
         "on_tertiary_fixed":"#29132d",
         "on_tertiary_fixed_variant":"#583e5b",
         "outline":"#74777f",
         "outline_variant":"#c4c6d0",
         "primary":"#445e91",
         "primary_container":"#d8e2ff",
         "primary_fixed":"#d8e2ff",
         "primary_fixed_dim":"#adc6ff",
         "scrim":"#000000",
         "secondary":"#575e71",
         "secondary_container":"#575e71",
         "secondary_fixed":"#dbe2f9",
         "secondary_fixed_dim":"#bfc6dc",
         "shadow":"#000000",
         "source_color":"#4285f4",
         "surface":"#f9f9ff",
         "surface_bright":"#f9f9ff",
         "surface_container":"#ededf4",
         "surface_container_high":"#e8e7ee",
         "surface_container_highest":"#e2e2e9",
         "surface_container_low":"#f3f3fa",
         "surface_container_lowest":"#ffffff",
         "surface_dim":"#d9d9e0",
         "surface_variant":"#e1e2ec",
         "tertiary":"#715573",
         "tertiary_container":"#fbd7fc",
         "tertiary_fixed":"#fbd7fc",
         "tertiary_fixed_dim":"#debcdf"
      }
   }
}

[linuxmobile]

Hi, after trying with the same image on the dev branch i managed to get a more accurate result.

I already check the dev branch and color matching is better. But I don't want to jump from branch to branch to get the color right! Which version or branch should I really use? Sorry if my language seems a bit demanding, it really isn't!

{
   "colors":{
      "dark":{
         "background":"#191114",
         "error":"#ffb4ab",
         "error_container":"#93000a",
         "inverse_on_surface":"#372e31",
         "inverse_primary":"#894a68",
         "inverse_surface":"#eedfe3",
         "on_background":"#eedfe3",
         "on_error":"#690005",
         "on_error_container":"#ffdad6",
         "on_primary":"#531d38",
         "on_primary_container":"#ffd8e6",
         "on_primary_fixed":"#390723",
         "on_primary_fixed_variant":"#6e334f",
         "on_secondary":"#412a33",
         "on_secondary_container":"#fed9e6",
         "on_secondary_fixed":"#2a151e",
         "on_secondary_fixed_variant":"#593f4a",
         "on_surface":"#eedfe3",
         "on_surface_variant":"#d4c2c7",
         "on_tertiary":"#49280f",
         "on_tertiary_container":"#ffdcc6",
         "on_tertiary_fixed":"#301401",
         "on_tertiary_fixed_variant":"#633e23",
         "outline":"#9d8c92",
         "outline_variant":"#504348",
         "primary":"#feb0d1",
         "primary_container":"#6e334f",
         "primary_fixed":"#ffd8e6",
         "primary_fixed_dim":"#feb0d1",
         "scrim":"#000000",
         "secondary":"#e1bdca",
         "secondary_container":"#e1bdca",
         "secondary_fixed":"#fed9e6",
         "secondary_fixed_dim":"#e1bdca",
         "shadow":"#000000",
         "surface":"#191114",
         "surface_bright":"#40373a",
         "surface_container":"#251d20",
         "surface_container_high":"#30282b",
         "surface_container_highest":"#3b3235",
         "surface_container_low":"#21191c",
         "surface_container_lowest":"#130c0f",
         "surface_dim":"#191114",
         "surface_variant":"#504348",
         "tertiary":"#f2bb98",
         "tertiary_container":"#633e23",
         "tertiary_fixed":"#ffdcc6",
         "tertiary_fixed_dim":"#f2bb98"
      },
      "light":{
         "background":"#fff8f8",
         "error":"#ba1a1a",
         "error_container":"#ffdad6",
         "inverse_on_surface":"#fdedf1",
         "inverse_primary":"#feb0d1",
         "inverse_surface":"#372e31",
         "on_background":"#21191c",
         "on_error":"#ffffff",
         "on_error_container":"#410002",
         "on_primary":"#ffffff",
         "on_primary_container":"#390723",
         "on_primary_fixed":"#390723",
         "on_primary_fixed_variant":"#6e334f",
         "on_secondary":"#ffffff",
         "on_secondary_container":"#2a151e",
         "on_secondary_fixed":"#2a151e",
         "on_secondary_fixed_variant":"#593f4a",
         "on_surface":"#21191c",
         "on_surface_variant":"#504348",
         "on_tertiary":"#ffffff",
         "on_tertiary_container":"#301401",
         "on_tertiary_fixed":"#301401",
         "on_tertiary_fixed_variant":"#633e23",
         "outline":"#827378",
         "outline_variant":"#d4c2c7",
         "primary":"#894a68",
         "primary_container":"#ffd8e6",
         "primary_fixed":"#ffd8e6",
         "primary_fixed_dim":"#feb0d1",
         "scrim":"#000000",
         "secondary":"#735762",
         "secondary_container":"#735762",
         "secondary_fixed":"#fed9e6",
         "secondary_fixed_dim":"#e1bdca",
         "shadow":"#000000",
         "source_color":"#1e1217",
         "surface":"#fff8f8",
         "surface_bright":"#fff8f8",
         "surface_container":"#faeaee",
         "surface_container_high":"#f4e4e8",
         "surface_container_highest":"#eedfe3",
         "surface_container_low":"#fff0f3",
         "surface_container_lowest":"#ffffff",
         "surface_dim":"#e5d6da",
         "surface_variant":"#f1dee3",
         "tertiary":"#7e5538",
         "tertiary_container":"#ffdcc6",
         "tertiary_fixed":"#ffdcc6",
         "tertiary_fixed_dim":"#f2bb98"
      }
   }
}

[PoSayDone]

for me, the colors don't match in many pictures after the update(
(Also --show-colors order is random for some reason)

Example one

material theme builder:

matugen:

source:
https://i.imgur.com/AoaBp86.jpeg

Example two

material theme builder:

matugen:

soruce:
https://i.imgur.com/u7OjTQz.jpeg

UPD:
I've checked colors using simple example, and that is the new library issue:

Code

use material_colors::hex_from_argb;
use material_colors::source_color_from_image;
use material_colors::theme_from_source_color;

use image::io::Reader as ImageReader;
use material_colors::Argb;

use serde::{Serialize, Deserialize};
use serde_json;


#[derive(Serialize, Deserialize)]
struct Colors {
    primary: String,
    on_primary: String,
    background: String,
    on_background: String,
    primary_container: String,
}

fn main() {
    let args: Vec<String> = std::env::args().collect();
    if args.len() < 2 {
        println!("Please provide the path to the image as a command line argument.");
    }

    let path = &args[1];

    let data = ImageReader::open(path)
        .expect("failed to open image")
        .with_guessed_format()
        .expect("failed to guess format")
        .decode()
        .expect("failed to decode image")
        .into_rgba8();

    let pixels: Vec<Argb> = data.pixels().fold(vec![], |mut pixels, pixel| {
        pixels.push([pixel[3], pixel[0], pixel[1], pixel[2]]);
        pixels
   });

    let theme = theme_from_source_color(source_color_from_image(&pixels), Default::default()).schemes.dark;

    let colors = Colors {
        primary:      format!("#{}", hex_from_argb(theme.primary)),
        on_primary:    format!("#{}", hex_from_argb(theme.on_background)),
        background:   format!("#{}", hex_from_argb(theme.background)),
        on_background: format!("#{}", hex_from_argb(theme.on_background)),
        primary_container: format!("#{}", hex_from_argb(theme.primary_container)),
    };

    let json_string = serde_json::to_string(&colors).unwrap();
    println!("{}", json_string);
}

result for example two using this code:

[PoSayDone]

Opened an issue:
Aiving/material-colors#5

UPD:
the problem is that matugen is not resizing image before processing, resizing image to 128x128 gives accurate colors

[InioX]

for me, the colors don't match in many pictures after the update( (Also --show-colors order is random for some reason)
Example one
material theme builder:
Example two
material theme builder:

UPD: I've checked colors using simple example, and that is the new library issue:
Code

result for example two using this code:

The --show-color order is random because it is using a HashMap now. I can try to fix it somehow.

[InioX]

Also --show-colors color order is fixed now.