Inappropriate result when tone value is high

[RikkaW]

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:

[SmartToolFactory]

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]

cc @rodydavis for Theme Builder

[AmelieKatzor]

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