Comments (15)
Hi, @linuxmobile !
I haven't pushed to main branch yet because of Aiving/material-colors#4
from matugen.
Now that the issue in material-colors
has been resolved and a new release has been made, I will bump the version and try.
from matugen.
Can confirm, the output looks much better! I will try applying my GTK theme in a moment. Thanks for the quick response.
from matugen.
The issue is resolved now so I will make a new release.
from matugen.
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
from matugen.
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.
from matugen.
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.
from matugen.
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:
from matugen.
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
from matugen.
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"
}
}
}
from matugen.
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"
}
}
}
from matugen.
for me, the colors don't match in many pictures after the update(
(Also --show-colors order is random for some reason)
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:
from matugen.
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
from matugen.
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
The --show-color
order is random because it is using a HashMap now. I can try to fix it somehow.
from matugen.
Also --show-colors
color order is fixed now.
from matugen.
Related Issues (20)
- Add hook options to the config to execute shell commands before/after generation. HOT 1
- add fmt and compilation checks for PRs
- Building on NixOs HOT 1
- Running on NixOs HOT 3
- RGB Fails to Parse
- Noob question: how do I make a template? HOT 7
- The Swaybg option does not change the wallpaper HOT 9
- a "community templates" repository HOT 1
- Integration with papirus-folders HOT 19
- Is there a way to generate light and dark colors without running matugen twice? HOT 2
- [Nix] Currently not building HOT 3
- [Windows] Thread 'main' has overflowed its stack
- Use base16 theme as input HOT 3
- image colors don't match at all (possibly being used as an error color?) HOT 3
- Implement Blending HOT 2
- [Feature Request] run_after function accepts variables HOT 2
- [Bug] Failed to parse custom color: ParseRGB HOT 4
- [Request] Add live refresh for following apps HOT 8
- Add live refresh for mako
- Add some more filters HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from matugen.