material-foundation / material-color-utilities

Color libraries for Material You
Apache License 2.0
1.57k stars 134 forks source link

Tonal palette generating wrong color value for primary tone 90 #113

Closed khanhnt748 closed 4 months ago

khanhnt748 commented 10 months ago

We try to generate tonal palette with primary color Color(0xFF14C560):

import 'package:flutter/material.dart';
import 'package:flutter_test/flutter_test.dart';
import 'package:material_color_utilities/material_color_utilities.dart';

void main() {
  const primaryColor = Color(0xFF14C560);
  group('emerald', () {
    group('primary', () {
      final toneGroups = <int, Color>{
        10: const Color(0xFF00210A),
        20: const Color(0xFF003916),
        30: const Color(0xFF005323),
        40: const Color(0xFF006D31),
        50: const Color(0xFF008A40),
        60: const Color(0xFF00A74F),
        70: const Color(0xFF13C560),
        80: const Color(0xFF44E178),
        90: const Color(0xFF66FF92),
        95: const Color(0xFFC5FFCA),
        99: const Color(0xFFF6FFF2),
        100: const Color(0xFFFFFFFF),
      };
      final corePalette = CorePalette.of(primaryColor.value);
      final tonalPalette = corePalette.primary;
      for (final toneGroup in toneGroups.entries) {
        final tone = toneGroup.key;
        final color = toneGroup.value;
        final actualColorValue = tonalPalette.get(tone);
        final actualColor = Color(actualColorValue);
        test('tone $tone color $color actualColor $actualColor', () {
          expect(actualColorValue, color.value);
        });
      }
    });
  });
}

Test result:

00:01 +8 -1: emerald primary tone 90 color Color(0xff66ff92) actualColor Color(0xffaff3b7) [E]
  Expected: <4284940178>
    Actual: <4289721271>

  package:matcher                                     expect
  package:flutter_test/src/widget_tester.dart 459:16  expect
  test/theme/emerald.dart 31:11                       main.<fn>.<fn>.<fn>
eggp commented 8 months ago

I have the problem too. If I generate a palette in dart code, I get something different than on the website(https://m3.material.io/theme-builder#/custom).

my dart code:

  static TonalPalette _toTonalPalette(int value) {
    final color = Hct.fromInt(value);
    return TonalPalette.of(color.hue, color.chroma);
  }
pennzht commented 4 months ago

Fixed since version 0.11.0 (Dart), commit https://github.com/material-foundation/material-color-utilities/commit/9281b3dbfab9fc82d28110752f3a7461d5e50c68