Menu
In Google's spec for material design, I see colors specified as percentages:
To convey a hierarchy of information, you can use different shades for text. The standard alpha value for text on a white background is 87% (#000000). Secondary text, which is lower in the visual hierarchy, should have an alpha value of 54% (#000000).
I don't understand how these percentages work. For example, if the background color is white, what is the color of the text?
What if my background were say #607D8B. What would my text color be? Is it just the background color with the opacity (alpha) set to the percentage?
312
red(int) to extract the red component. green(int) to extract the green component. blue(int) to extract the blue component.
Their general findings were: 1) Black and white were consistently rated as the most readable; 2) Color combinations that included black were rated more readable than those that did not; and 3) Darker text on lighter backgrounds were rated higher than lighter text on darker backgrounds.
colorPrimary and colorSecondary represent the colors of your brand. colorPrimaryVariant and colorSecondaryVariant are lighter or darker shades of your brand colors. colorSurface is used for “sheets” of material (like cards and bottom sheets)
The percentage are for visibility of the color
When we specify any color using hex format :
First 2 digit : visibility
After 6 digit : RRGGBB
So, the calculation example is :
(87)% of (100) decimel = 87 % -> convert to (87)% of (256) in hex 222.72 rounding to 223 which is (DF) in hex
So your color code = #DF607D8B -- primary
Same way, any perentage should be converted to hex
You can check table : here
50
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
