Snippets Collections
    func hexStringToUIColor (hex:String) -> UIColor {
        var cString:String = hex.trimmingCharacters(in: .whitespacesAndNewlines).uppercased()

        if (cString.hasPrefix("#")) {
            cString.remove(at: cString.startIndex)
        }

        if ((cString.count) != 6) {
            return UIColor.gray
        }

        var rgbValue:UInt64 = 0
        Scanner(string: cString).scanHexInt64(&rgbValue)

        return UIColor(
            red: CGFloat((rgbValue & 0xFF0000) >> 16) / 255.0,
            green: CGFloat((rgbValue & 0x00FF00) >> 8) / 255.0,
            blue: CGFloat(rgbValue & 0x0000FF) / 255.0,
            alpha: CGFloat(1.0)
        )
    }
@mixin color-weight ($class, $base-color, $weight: 4) {
  $bg-color: null;

  @for $i from 1 through 8 {
    @if $i < 4 {
      $weight: $weight - 1;
      $bg-color: lighten($base-color, $weight * 10%);
    } @else if $i == 4 {
      $weight: 0;
      $bg-color: $base-color;
    } @else {
      $weight: $weight + 1;
      $bg-color: darken($base-color, $weight * 10%);
    }

    .#{$class}-#{$i} { background-color: $bg-color; }
  }
}

@include color-weight(bg-blue, #1483ff);
@include color-weight(mad, red);
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Colors in CSS</title>

  <style>
    /*Hex value*/
    h1{
      color: rgb(red, green, blue) ;
    }
    /*Color Name*/
    h2{
      color: blue;
    }
    /*Color RGB*/
    h3{
      color: #00000;
    }
  </style>

</head>
<body>

<h1>Color By Hex value</h1>  
<h2>Color By Color Name</h2>
<h3>Color by Color RGB</h3>

</body>
</html>
star

Sat Jan 08 2022 01:31:26 GMT+0000 (UTC) https://stackoverflow.com/questions/43806105/sass-color-weight-mixin?rq

#color #scss #mixin
star

Sun Mar 21 2021 17:03:58 GMT+0000 (UTC)

#css #css_colors #color

Save snippets that work with our extensions

Available in the Chrome Web Store Get Firefox Add-on Get VS Code extension