[SASS/SCSS] hex, rgb 컬러에 투명도 주는 방법

💡 이번 시간에는 SCSS 함수를 이용해 컬러에 투명도를 조절하는 방법을 알아보았다!

1. transparentize

• transparentize()는 주어진 색상($color)에 대해 $amount만큼 투명도를 빼는 함수이다.

transparentize($color, $amount)

• 주어진 색상에 $amount를 0.2로 주면, 투명도는 0.3(0.5 - 0.2)이 된다.

transparentize(rgba(107, 113, 127, 0.5), 0.2)  /* rgba(107, 113, 127, 0.3) */
transparentize(rgba(#6b717f, 0.5), 0.2)        /* rgba(107, 113, 127, 0.3) */

• 만약 투명도가 1인 색상에 $amount를 주면 투명도는 1 - $amount가 된다.

transparentize(#6b717f, 0.2)                   /* rgba(107, 113, 127, 0.8) */
transparentize(rgb(107, 113, 127), 0.2)        /* rgba(107, 113, 127, 0.8) */

2. scale-color

• scale-color()는 주어진 색상($color)에 대해 $red, $green,…값을 주어 컬러를 조정할 수 있다.

scale-color($color,
  $red: null, $green: null, $blue: null,
  $saturation: null, $lightness: null,
  $whiteness: null, $blackness: null,
  $alpha: null)

• 예를 들어 주어진 색상(#6b717f)의 red 비율을 낮추고 싶다면 아래와 같이 사용할 수 있다.

scale-color(#6b717f, $red: 15%);    /* #5b717f, 기존 red를 15% 더 낮춘다 */
scale-color(#6b717f, $red: -15%);   /* #81717f, 기존 red를 15% 더 높인다 */

• 색상의 투명도를 조절하고 싶다면 alpha(투명도)값을 조정하면 된다.
• #998099에 alpha(투명도)를 -40%를 주게되면 투명도가 40% 낮아져 60%(0.6)가 된다.

scale-color(#998099, $alpha: -40%);  /* rgba(153, 128, 153, 0.6) */

• 컬러 조정 값을 여러개 사용할 수도 있다.

scale-color(#998099, $red: 15%, $alpha: -40%);   /* rgba(168, 128, 153, 0.6) */

3. fade-out, fade-in

(1) fade-out

• fade-out()은 주어진 색상($color)에 대해 $amount만큼 투명도를 빼는 함수이다.
• transparentize()와 동일한 동작을 한다.

fade-out($color, $amount)

• rgba(#036, 0.3)에 $amount를 0.3을 주면 투명도는 0(0.3 - 0.3)이 된다.

color: fade-out(rgba(#036, 0.3), 0.3);  /* rgba(0, 51, 102, 0) */

(2) fade-in

• fade-in()은 주어진 색상($color)에 대해 $amount만큼 투명도를 더하는 함수이다.

fade-out($color, $amount)

• rgba(#036, 0.3)에 $amount를 0.3을 주면 투명도는 0.6(0.3 + 0.3)이 된다.

color: fade-in(rgba(#036, 0.3), 0.3);   /* rgba(0, 51, 102, 0.6) */

4. rgba, rgb

(1) rgba

• rgba()는 $red, $green, $blue, $alpha를 조정하면 색상을 지정할 수 있다.

rgba($red $green $blue)
rgba($red $green $blue / $alpha)
rgba($red, $green, $blue, $alpha)
rgba($red, $green, $blue, $alpha: 1)

• 단, 두 개의 인자($color, $alpha)가 주어졌을 때는 $color의 투명도가 $alpha로 조정된다.

rgba($color, $alpha)   

• rgba(25 70 100)의 hex color는 #194664이다.
• rgba()를 이용하여 투명도를 조절할 때는 아래 예시처럼 사용할 수 있다.

rgba(25, 70, 100, 0.3);          /* rgba(25, 70, 100, 0.3) */
rgba(25, 70, 100, $alpha: 0.3);  /* rgba(25, 70, 100, 0.3) */
rgba(#194664, 0.3);              /* rgba(25, 70, 100, 0.3) */
rgba(rgb(25 70 100), 0.3);       /* rgba(25, 70, 100, 0.3) */

(2) rgb

• rgb()도 rgba()처럼 $red, $green, $blue, $alpha를 조정하면 색상을 지정할 수 있다.

rgb($red $green $blue)
rgb($red $green $blue / $alpha)
rgb($red, $green, $blue, $alpha: 1)
rgb($color, $alpha)   

• 단, 두 개의 인자($color, $alpha)가 주어졌을 때는 $color의 투명도가 $alpha로 조정된다.

rgb($color, $alpha)   

• rgba(25 70 100)의 hex color는 #194664인데, rgb()를 이용하여 투명도 조절이 가능하다.

rgb(25 70 100 / 0.3);            /* rgba(25, 70, 100, 0.3) */
rgb(#194664, 0.3);               /* rgba(25, 70, 100, 0.3) */
rgb(rgb(25 70 100), 0.3);        /* rgba(25, 70, 100, 0.3) */
rgb(rgba(25, 70, 100, 1), 0.3);  /* rgba(25, 70, 100, 0.3) */

❓ rgb()에서도 rgba()처럼 $alpha값을 조정해 투명도를 조절할 수 있다고? 그럼 rgb(), rgba()의 차이는 무엇일까?

• rgba(), rgb()의 기능상 차이점은 없으나, 과거 버전 브라우저에는 rgba()가 지원하지 않을 수 있다.

---

🙂 우리는 이번 시간에 투명도를 조절할 수 있는 여러 SCSS 함수를 알아보았다. 만약 주어진 투명도 만큼 빼줘야 한다면 transparentize, fade-out을, 주어진 투명도 비율로 조정되어야 한다면 scale-color, rgba, rgb를 사용하자!