Skip to content

Commit 4b3c2e3

Browse files
update README.md
1 parent 29edd01 commit 4b3c2e3

File tree

2 files changed

+17
-9
lines changed

2 files changed

+17
-9
lines changed

README.md

Lines changed: 17 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -12,15 +12,15 @@
1212
* Functions to convert between `androidx.compose.ui.graphics.Color`, HSL, HSV, `RGB`, HCT, and
1313
colors with nearest **Name** based on distance is in 3D space using `Red`, `Green`, `Blue`.
1414

15-
| M2 Color Swatches | M3 Tone Palettes | | ----------|-----------| -----------| -----------|
16-
| <img src="./screenshots/material_design2.gif" width="250">
17-
| <img src="./screenshots/colorpicker/material_design_3.gif" width="250"> |
15+
| M2 Color Swatches | M3 Tone Palettes |
16+
| ----------|-----------|
17+
| <img src="./screenshots/material_design2.gif" width="400">| <img src="./screenshots/screenshots/material_design3.gif" width="400"> |
1818

1919
## Material Design 2 Colors && Swatches
2020

2121
### Material Colors
2222

23-
<img src="https://i.stack.imgur.com/mteGN.png">
23+
<img src="./screenshots/m2_palette.png">
2424

2525
[Material Colors](material_design2.gif material_design3.gif) can be accessed from Red to Brown.
2626
Brown, Grey, and BlueGrey swatches only have primary colors.
@@ -102,11 +102,15 @@ val primaryHeaderColors by lazy {
102102
```
103103

104104
## Material Design 3 Tonal Palette
105-
A tonal palette consists of thirteen tones, including white and black. A tone value of 100 is equivalent to the idea of light at its maximum and results in white. Every tone value between 0 and 100 expresses the amount of light present in the color.
106105

106+
A tonal palette consists of thirteen tones, including white and black. A tone value of 100 is
107+
equivalent to the idea of light at its maximum and results in white. Every tone value between 0 and
108+
100 expresses the amount of light present in the color.
109+
110+
| <img src="./screenshots/m3_tones.png" width="320">
111+
112+
From range 0 to 100
107113

108-
| <img src="./screenshots/m3_tones.png" width="250">
109-
From range 0 to 100
110114
```kotlin
111115
val material3ToneRange = listOf(
112116
0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 95, 99, 100
@@ -115,11 +119,13 @@ val material3ToneRange = listOf(
115119
```
116120

117121
Call
122+
118123
```kotlin
119-
fun getColorTonesList(color: Color): List< Color> {
124+
fun getColorTonesList(color: Color): List<Color> {
120125

121126
val camColor = Cam16.fromInt(color.toArgb())
122-
val palette: TonalPalette = TonalPalette.fromHueAndChroma(camColor.hue, max(48.0,camColor.chroma))
127+
val palette: TonalPalette =
128+
TonalPalette.fromHueAndChroma(camColor.hue, max(48.0, camColor.chroma))
123129
val toneList = mutableListOf<Color>()
124130

125131
material3ToneRange.forEach { shade ->
@@ -129,6 +135,7 @@ fun getColorTonesList(color: Color): List< Color> {
129135
return toneList
130136
}
131137
```
138+
132139
that returns list of colors or
133140

134141
```kotlin
@@ -144,4 +151,5 @@ fun getColorTonesMap(color: Color): Map<Int, Color> {
144151
}
145152

146153
```
154+
147155
to get Map with tone keys

screenshots/m2_palette.png

151 KB
Loading

0 commit comments

Comments
 (0)