Some colors don't match image properly #39
Comments
|
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 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
added a commit
that referenced
this issue
Dec 23, 2023
Change the arguments for the `QuantizerCelebi::quantize` function, so that the score function can return an accurate color to the image.
|
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:
|
Merged
|
Can confirm, the output looks much better! I will try applying my GTK theme in a moment. Thanks for the quick response. |
|
I am using version 1.2.2 but it seems to have the same problem as this issue!
|
|
Hi, after trying with the same image on the 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"
}
}
} |
I already check the {
"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"
}
}
} |
|
Hi, @linuxmobile ! I haven't pushed to main branch yet because of Aiving/material-colors#4 |
|
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 |
|
for me, the colors don't match in many pictures after the update( UPD: Codeuse 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: |
|
Opened an issue: UPD: |
Merged
The |
|
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. |
|
Now that the issue in |
|
Also |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Thank you very much for this project! I should clarify, this very much could be a non-issue or a material-color-utilities-rs problem and not a Matugen one; please let me know if so.
I was trying to use Matugen to create a GTK3/4 theme based on my wallpaper (the exact same thing that Gradience can do but I wanted to use Matugen to be able to theme many different things). After setting the wallpaper and rebuilding, I noticed the colors didn't match up at all. My apps were a bright blue color, while the wallpaper contains only a small amount of very muted blue/teal:
After a while of debugging, I believe I've narrowed the issue down to either Matugen or material-color-utilities-rs. Here is what the official Material Theme Builder produces (very understandably):
Lastly, heres a comparison of the JSON output of Matugen (
matugen image Downloads/alena-aenami-budapest.jpg --json hex | jq) vs material_color_utilities_python (using the exact same python script that Gradience uses) vs the theme builder, all on dark mode:IMO, Matugen's output does not follow the image. However, it's interesting that some of the colors seem to match the other two outputs almost exactly (eg. "error").
I should also mention that I tried this with two other wallpapers as well; Matugen did better slightly better following the other two, but seemed to sway extra towards blue comparatively (this could probably use more testing).
Please let me know if you have any ideas what might be causing this, and if you think I should instead report it to material-color-utilities-rs!
The text was updated successfully, but these errors were encountered: