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

Inappropriate result when tone value is high #21

Open
RikkaW opened this issue Feb 11, 2022 · 3 comments
Open

Inappropriate result when tone value is high #21

RikkaW opened this issue Feb 11, 2022 · 3 comments
Labels
bug Something isn't working library: java

Comments

@RikkaW
Copy link

RikkaW commented Feb 11, 2022

For input color #3F51B5 (looks indigo or blue), tone 99 value is #fefbff (looks pink or purple). I belive the correct color should be very light indigo or blue. This problem happens both in Material Theme Builder and Java code.

Test code:

import palettes.CorePalette;

import java.lang.*;

public class Main {

    public static void main(String[] args) {
        CorePalette palette = CorePalette.of(0x3F51B5);
        System.out.printf("#%08x\n", palette.a1.tone(99));
        System.out.printf("#%08x\n", palette.a1.tone(95));
    }
}

Material Theme Builder result:

image

@RikkaW RikkaW changed the title Inappropriate result when tone value is high (99, 95) Inappropriate result when tone value is high Feb 11, 2022
@SmartToolFactory
Copy link

SmartToolFactory commented Apr 28, 2022

I face the same issue with Tonal Palettes, but not only 99 but every color in tone returns incorrect results.
For Red500 #F44336 99 returned is #fffbff

val material3ToneRange = listOf(
    0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 95, 99, 100
)

fun getColorTonesList(color: Color): List< Color> {

    val palette: TonalPalette = TonalPalette.fromInt(color.toArgb())
    val toneList = mutableListOf<Color>()

    material3ToneRange.forEach { shade ->
       toneList.add(Color(palette.tone(shade)))
    }

    return toneList
}

Color is androidx.compose.ui.graphics.Color and verfied with other pickers default Compose function in Color class color.toArgb returns correct Int value.

fun getColorTonesList(color: Color): List< Color> {

    val camColor = Cam16.fromInt(color.toArgb())
    val palette: TonalPalette = TonalPalette.fromHueAndChroma(camColor.hue, max(48.0,camColor.chroma))
    val toneList = mutableListOf<Color>()

    material3ToneRange.forEach { shade ->
        toneList.add(Color(palette.tone(shade)))
    }

    return toneList
}

also returns same incorrect values but as far as i can see in this library that uses dart package returns correct tones.

@guidezpl
Copy link
Collaborator

guidezpl commented Feb 9, 2023

cc @rodydavis for Theme Builder

@guidezpl guidezpl added bug Something isn't working library: java labels Feb 9, 2023
@AmelieKatzor
Copy link

AmelieKatzor commented Apr 17, 2023

I have the same Issue, but in React.
Strangely, I dont have this problem with the other colors im using.
It happens with the input color #006B58 (primary40).
Every generated color from 0-40 ist the same as in m3 theme builder, but the values for 50-99 are not matching.
for example: generated90: #9ef3da vs themebuilder90: #7bf8d8
hoping for a solution soon :)

import { argbFromHex, hexFromArgb, TonalPalette }
	from '@material/material-color-utilities';

const tones = [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 95, 99, 100]

const colors = [
	{ name: "primary", value: "#006B58" },
]

const tonals = {}

colors.forEach(color => {
	tones.forEach(tone => {
		let key = color.name + tone
		tonals[key] = hexFromArgb(TonalPalette.fromInt(argbFromHex(color.value)).tone(tone))
	})
})

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working library: java
Projects
None yet
Development

No branches or pull requests

4 participants