Material 3 自定义颜色 - 如何生成色调调色板？

Question

材料 3 网站有一个关于 自定义颜色的部分。

主题生成器

有没有办法以编程方式为给定（协调）颜色生成色调调色板以覆盖配色方案？

@Composable
fun CardMinimalExample(
    customColor: Color = Color.Red
) {
    MaterialTheme(
        colorScheme = MaterialTheme.colorScheme.copy(
            surfaceVariant = customColor
        )
    ) { // inefficient? 
        Card() {
            Text(text = "Hello, world!")
        }
    }
}


@Preview
@Composable
private fun Preview() {
    CardMinimalExample()
}

Answer 1

您可以使用这个官方库，但尚无 kotlin 支持，但可以轻松复制粘贴并在 kotlin 中使用代码。

我创建了一个库，它返回 M2 色样、M3 色调调色板、颜色名称以及 HSL、HSV 和 RGB 之间的转换。

要获取色调调色板作为列表，您可以使用

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
}

或返回 0 到 100 之间值的映射

fun getColorTonesMap(color: Color): Map<Int, Color> {
    val palette: TonalPalette = TonalPalette.fromInt(color.toArgb())
    val toneMap = linkedMapOf<Int, Color>()

    material3ToneRange.forEach { shade ->
        toneMap[shade] = Color(palette.tone(shade))
    }

    return toneMap
}

它使用官方库，但仍然存在一个错误，不能为每种颜色返回正确的调色板。

https://github.com/material-foundation/material-color-utilities/issues/21