CSS RGB vs RGBa 색상 완벽 정리: 개념부터 UI 카드 활용까지

CSS에서 RGB와 RGBa 색상의 차이점을 알아보고, RGBa의 알파 채널을 활용해 웹사이트에 어울리는 아름답고 시선을 사로잡는 UI 컴포넌트를 만드는 방법을 배워보세요.

RGB와 RGBa란 무엇인가?

RGB와 RGBa는 CSS에서 사용되는 두 가지 색상 모델로, 16진수(Hex) 색상 코드(예: #282828)를 대신해 사용할 수 있는 방식입니다.

그렇다면 RGB와 RGBa의 차이점은 무엇일까요?

RGB: 빨강(Red), 초록(Green), 파랑(Blue)의 약자
RGBa: 빨강, 초록, 파랑에 알파(Alpha)가 추가된 형태

알파는 투명도(transparency) 채널로, 색상이 얼마나 투명하게 보일지를 조절할 때 사용합니다.

처음에는 다소 헷갈릴 수 있지만, 곧 이해하게 될 테니 걱정하지 마세요.

rgb() 함수와 rgba() 함수

CSS에서는 RGB와 RGBa 색상을 사용하기 위해 rgb()와 rgba()라는 두 가지 색상 함수를 제공합니다.

두 함수 모두 빨강, 초록, 파랑 각각의 색상 값(0~255 범위)을 지정해 배경색을 설정하는 데 사용됩니다.

다만 rgb() 함수는 불투명한 단색 배경색만 지정할 수 있습니다:

{   
    /* 100% 불투명한 초록색 */
    background-color: rgb(0, 255, 0); 
}

반면 RGBa는 알파 채널을 통해 투명도까지 함께 조절할 수 있어 훨씬 더 유연하게 활용할 수 있습니다:

{   
    /* 50% 투명한 초록색 */
    background-color: rgb(0, 255, 0, 0.5); 
}

배경색에 투명도를 적용하는 이유

배경색에 투명도를 추가하면 어떤 점이 좋을까요?

예를 들어, 웹사이트에 아래와 같은 시선을 사로잡는 UI 카드를 디자인한다고 가정해 보겠습니다.

CSS RGB vs RGBa 색상 완벽 정리: 개념부터 UI 카드 활용까지

위 UI 카드는 다음 요소들로 구성되어 있습니다:

썸네일 이미지
오버레이(overlay)
그 위에 배치된 텍스트

rgba() 함수의 알파 채널을 활용하면, 배경 이미지가 텍스트에 비해 얼마나 잘 보이게 할지 조절할 수 있습니다. 여기서는 UI 카드 오버레이에 50% 검은색 반투명을 적용했습니다:

.card-overlay {
    background-color: rgba(0, 0, 0, 0.5); /* 0.5 = 50% */
}

왜 하필 50% 투명도를 사용했을까요?

사실 40%나 60%여도 무방합니다. 서로 다른 투명도 수준을 조합한 linear-gradient를 사용할 수도 있죠. 결국 어떤 느낌의 결과물을 원하는지에 따라 달라지는 부분입니다.

알파 값에 따른 투명도 변화

알파 채널 값이 낮을수록(예: 0.1) 투명도가 높아져 배경 이미지가 더 선명하게 드러납니다.
알파 채널 값이 높을수록(예: 0.9) 투명도가 낮아져 배경 이미지가 덜 보입니다.

아래 비교 이미지에서 확인할 수 있듯이, 알파 채널 값은 화면의 가독성과 전체적인 분위기에 큰 영향을 미칩니다.

오버레이를 너무 밝게 하거나 너무 어둡게 하면 안 됩니다.

중요한 것은 콘텐츠를 사용자에게 어떻게 보여주고 싶은지에 맞춰 최적의 균형점을 찾는 것입니다.

예제 코드

아래는 위 UI 카드 예제에 사용된 전체 HTML과 CSS 코드입니다.

HTML

    <div class="card">
      <div class="card-overlay"></div>
      <img class="card-thumbnail" src="/images/the-north-sea-denmark.png" />
      <div class="card-text">
        <h3 class="card-title">The North Sea of Denmark</h3>
        <p class="card-description">
          Explore the beautiful & dynamic North Sea of Denmark — where every day
          is a new experience.
        </p>
      </div>
    </div>

CSS

.card {
    position: relative;
    height: 400px;
    width: 400px;
}

.card-thumbnail {
    height: 100%;
    width: 100%;
    display: block;
    object-fit: cover;
}

.card-text {
    color: white;
    position: absolute;
    width: 80%;
    max-width: 300px;
    top: 70%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
}

.card-title {
    font-size: 1.45rem;
}
.card-description {
    font-size: 1.15rem;
    margin-top: 0.5rem;
    line-height: 1.4;
}

.card-overlay {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1;
}

이 코드를 참고 자료로 활용하거나, 직접 만드는 UI 카드의 출발점으로 삼아보세요.