Frontend/CSS

CSS 색상 표현법: RGB, HEX, HSL 중 무엇을 써야 할까?

미니임 2026. 2. 10. 01:03

 

웹 디자인과 프론트엔드 개발을 하다 보면 색상을 지정하는 여러 가지 방법을 마주하게 됩니다. #FF5733 같은 복잡한 기호부터 rgb(255, 87, 51) 같은 숫자, 그리고 최근 선호도가 높아진 hsl(11, 100%, 60%)까지.

결과물은 같은 색인데, 왜 표현법은 여러 가지일까요? 각 방식의 특징과 어떤 상황에서 무엇을 쓰는 것이 가장 효율적인지 깊이 있게 알아보겠습니다.

1. HEX (Hexadecimal, 16진수 방식)

가장 전통적이고 널리 쓰이는 방식입니다. # 뒤에 6자리(또는 3자리) 16진수를 붙여 색상을 표현합니다.

  • 표현 방식: #RRGGBB (Red, Green, Blue)
  • 특징: - 코드가 짧고 간결합니다.
    • 디자인 도구(Figma, Photoshop 등)에서 복사해서 붙여넣기 가장 좋습니다.
    • 사람이 직관적으로 어떤 색인지 파악하기는 어렵습니다.

예제: HEX 코드 활용

/* 기본 표현 */
.primary-button {
  background-color: #3498db; /* 선명한 파란색 */
}

/* 약축 표현 (R, G, B가 각각 중복될 때) */
.box {
  color: #f00; /* #ff0000과 동일한 빨간색 */
}

/* 투명도 포함 (HEXA - 8자리) */
.overlay {
  background-color: #3498db80; /* 50% 투명도가 적용된 파란색 */
}

2. RGB / RGBA (Red, Green, Blue)

빛의 3원색을 기반으로 0부터 255 사이의 숫자를 사용하여 색을 조합합니다.

  • 표현 방식: rgb(red, green, blue) / rgba(red, green, blue, alpha)
  • 특징:
    • 컴퓨터가 색을 처리하는 방식과 유사합니다.
    • 과거에는 투명도(Alpha)를 조절하기 위해 필수적으로 사용되었습니다.
    • 현대 CSS에서는 rgb() 함수 내부에 슬래시(/)를 사용해 투명도를 직접 조절할 수도 있습니다.

예제: RGB와 투명도 활용

.card {
  /* 빨간색 52, 초록색 152, 파란색 219 조합 */
  background-color: rgb(52, 152, 219);
}

/* 투명도 0.3 적용 (전통적인 방식) */
.card-shadow {
  background-color: rgba(0, 0, 0, 0.3);
}

/* 최신 CSS 문법 (공백 구분 및 슬래시 투명도) */
.modern-rgb {
  background-color: rgb(52 152 219 / 50%);
}

3. HSL / HSLA (Hue, Saturation, Lightness)

색상(Hue), 채도(Saturation), 명도(Lightness)를 기반으로 색을 표현합니다.

  • 표현 방식: hsl(색상각도, 채도%, 명도%)
  • 특징:
    • 가장 인간 친화적입니다. 코드를 보고 "아, 이건 약간 밝은 초록색이구나"라고 유추하기 쉽습니다.
    • 색상 변형(어둡게, 밝게, 채도 낮게 등)을 줄 때 계산이 매우 간편합니다.
    • 디자인 시스템을 구축하거나 CSS 변수(Variables)를 활용할 때 압도적으로 유리합니다.

예제: HSL의 강력한 직관성

/* 기본 파란색 (200도 방향) */
:root {
  --main-color: hsl(200, 70%, 50%);
}

/* 명도(Lightness)만 조절하여 호버 효과 만들기 */
.button {
  background-color: var(--main-color);
}

.button:hover {
  /* 명도를 50% -> 40%로 낮춰서 직관적으로 더 어두운 색 생성 */
  background-color: hsl(200, 70%, 40%);
}

.button:active {
  /* 명도를 60%로 높여서 더 밝은 색 생성 */
  background-color: hsl(200, 70%, 60%);
}

4. 한눈에 비교하기: 같은 색, 다른 표현

같은 파란색(DodgerBlue)을 세 가지 방식으로 표현해 보겠습니다.

구분코드직관성편집 용이성

HEX #1E90FF 낮음 낮음
RGB rgb(30, 144, 255) 보통 보통
HSL hsl(210, 100%, 56%) 높음 매우 높음

결론: 무엇을 써야 할까?

상황에 따라 권장되는 방식이 다릅니다.

  1. 디자인 툴에서 색상을 가져올 때: HEX가 가장 빠릅니다. 피그마에서 복사해서 붙여넣기만 하면 되니까요.
  2. 단순한 웹사이트를 만들 때: 익숙한 HEX나 RGB 중 아무거나 사용해도 무방합니다.
  3. 디자인 시스템이나 복잡한 UI를 개발할 때: 무조건 HSL을 추천합니다. 버튼의 호버 효과, 테두리 색상, 그림자 등을 기본 색상에서 명도만 살짝 바꿔서 관리할 수 있기 때문입니다.
  4. 투명도가 필요할 때: 과거엔 RGBA였지만, 이제는 **HEX(8자리)**나 HSL 모두 투명도를 잘 지원하므로 선호하는 방식을 선택하면 됩니다.

최근의 모던 프론트엔드 개발 환경에서는 HSL을 기본으로 사용하고, 디자인 툴과의 호환을 위해 HEX를 보조적으로 사용하는 추세입니다. 여러분의 프로젝트 성격에 맞춰 가장 효율적인 도구를 선택해 보세요!

반응형