How to calculate the value of the colors 'shade' and 'tint'

Ionic Framework
1

Good morning everyone and thanks for answering, I am using Ionic 4 and I know that the way to declare new colors is different from Ionic 3, and I also know that there is an online color generator for this purpose. This tool is good but I would like to improve this by creating a better one. my question is how I calculate the colors ‘shade’ and ‘tint’.

.ion-color-orange {
  --ion-color-base: #F0B50C;
  --ion-color-base-rgb: 240,181,12;
  --ion-color-contrast: #000000;
  --ion-color-contrast-rgb: 0,0,0;
  --ion-color-shade: #d39f0b; /*How can I calculate this color?*/
  --ion-color-tint: #f2bc24;  /*How can I calculate this color?*/
}
1 Like
2

@alain23 using ionic color generator, just give the color-base a color then it will automatically generator the rest for you, follow this link

3

Did you ever find an answer to this? I’m looking for the same thing.

4

Not, but probably it can be a solution:

5

Hello, i see that this is an old thread but i’ll post anyways,
the percentage for the shade is 12%, and 10% for the tint.
it can be done if you’re using sass:

@function shade($color, $percentage) {
  @return mix(black, $color, $percentage);
}
@function tint($color, $percentage) {
  @return mix(white, $color, $percentage);
}
@function contrast($color) {
  @if (red($color) * 0.299 + green($color) * 0.587 + blue($color) * 0.114) > 186 {
    @return #000000;
  } @else {
    @return #ffffff;
  }
}

$theme-colors: (
  'primary': #0798ed,
  'secondary': #3dc2ff,
  'tertiary': #25a59e,
  'success': #2dd36f,
  'warning': #ffc409,
  'danger': #bf342c,
  'dark': #1c2529,
  'medium': #9098b1,
  'light': #f5f5f5,
);
:root {
  @each $name, $value in $theme-colors {
    --ion-color-#{$name}: #{$value};
    --ion-color-#{$name}-rgb: #{red($value)}, #{green($value)}, #{blue($value)};
    --ion-color-#{$name}-shade: #{shade($value, 12%)};
    --ion-color-#{$name}-tint: #{tint($value, 10%)};
    --ion-color-#{$name}-contrast: #{contrast($value)};
    --ion-color-#{$name}-contrast-rgb: #{red(contrast($value))},
      #{green(contrast($value))}, #{blue(contrast($value))};
  }
}