<aside> ⚡

색상에 투명도를 적용하고 싶을 때, RGB로 변환하지 않고 hex코드를 바로 사용할 수 없을까?

</aside>

우리는 요소의 색상을 지정할 때, Hex 혹은 RGB 컬러를 주로 사용한다. RGB 컬러에 불투명도를 적용할 때에는, rgba(red, green, blue, opacity) 마지막 값인 Opacity를 지정하면 된다. 하지만 Hex컬러는 어떻게 불투명도를 조정할 수 있을까?

지금까지는 Hex컬러를 RGB로 변환하여 사용해 왔다😂 하지만 앞으로 아래의 방법들을 사용한다면, 더 편하게 불투명도를 지정할 수 있다!

📌 Hex8 사용하기

image.png

우리가 주로 사용하던 Hex컬러는 6자리로 이루어진 Hex6로, 두 자리씩 끊어 빨강, 초록, 파랑을 표현한다.

그리고 오른쪽의 조금 생소한 8자리 색상 코드는 Hex8로, 빨강, 초록, 파랑 뒤에 불투명도를 표현할 수 있다.즉, Hex6에 투명도를 적용하려면 불투명도에 해당하는 Hex코드를 Hex6에 붙여 Hex8로 만들어야 한다.

다음은 투명도에 해당하는 hex코드를 10단위로 정리한 표이다.

Opacity(%) Hex Code
100 FF
90 E6
80 CC
70 B3
60 99
50 80
40 66
30 4D
20 33
10 1A
0 00

📌 SCSS의 rgba() 함수 사용하기

기존 CSS에서 RGBA를 사용하기 위해서는 해당 색상의 RGB 값을 알아야 했다.

색상이 Hex 코드로만 주어진 경우에는 RGB 값으로 변환하는 작업이 필요했다. 하지만 SCSS에서는 HEX컬러를 바로 rgba() 함수에 사용할 수 있다.

rgba(HEX값,불투명도)

사용 예시

/* SCSS */

#box {
  background-color: #000;

  .red50 {
    color: rgba(red, 0.5);
  }

  .red75 {
    color: rgba(red, 0.75);
  }

  .red100 {
    color: rgba(red, 1);
  }
}

/* Compiled to */

#box {
  background-color: #000;
}

#box .red50 {
  color: rgba(255, 0, 0, 0.5);
}

#box .red75 {
  color: rgba(255, 0, 0, 0.75);
}

#box .red100 {
  color: red;
}