CSS 색상 표현 방법

CSS는 웹 페이지의 스타일을 정의할 때 다양한 방식으로 색상을 표현할 수 있다. 색상 모델과 함수, 불투명도(opacity), 그리고 Tailwind CSS와 같은 프레임워크에서 제공하는 색상 클래스 등을 이해하면 더욱 효과적으로 스타일을 지정할 수 있다.

 

CSS 색상 모델

---

CSS에서는 색상을 표현하는 여러 가지 방법을 지원한다. 주요 색상 모델로는 RGB와 HSL이 있다.

RGB (Red, Green, Blue)

RGB 색상 모델은 빛의 삼원색인 빨강-초록-파랑을 혼합하여 색상을 표현한다.

16진수를 의미하는 # 기호 뒤에 #빨강초록파랑 방식으로 표현한다. 여기서 각각의 색상은 0~ff(즉, 0~255)까지 16진수 값 또는 0부터 1까지의 소수로 나타낼 수 있다.

HSL (Hue, Saturation, Lightness)

HSL 색상 모델은 색상(Hue), 채도(Saturation), 명도(Lightness)로 색상을 정의한다. 색상은 0도부터 360도까지의 각도로 표현되며, 채도와 명도는 0%에서 100% 사이의 값으로 나타낸다.

불투명도 (Opacity)

색상은 또한 불투명도라는 개념의 존재한다. CSS는 색상의 불투명도를 표현할 수 있도록 opacity라는 스타일 속성을 제공한다.

불투명도는 알파값(alpha value)으로 불리기도 하는데, 불투명도는 알파값 0~1사이의 소수로 표현한다. 알파값이 0이면 완전히 투명함을, 1이면 완전히 불투명함을 의미한다. CSS는 색상과 알파값을 동시에 표현할 수 있는 rgba와 hsla라는 함수를 제공한다.

/* 16진수 표기법 */
color: #ff0000; /* 빨간색 */

/* rgb() 함수 */
color: rgb(255, 0, 0); /* 빨간색 */

/* rgba() 함수 */
color: rgba(255, 0, 0, 0.5); /* 빨간색, 50% 불투명도 */

/* hsl() 함수 */
color: hsl(0, 100%, 50%); /* 빨간색 */

/* hsla() 함수 */
color: hsla(0, 100%, 50%, 0.5); /* 빨간색, 50% 불투명도 */

검정	흰색	빨강
rgb(0, 0, 0)	rgb(255, 255, 255)	rgb(255, 0, 0)
#000000	#ffffff	#ff0000
hsl(0, 100%, 0%)	hsl(0, 100%, 100%)	hsl(0, 100%, 50%)

 

Tailwind CSS 색상 클래스

---

테일윈드는 색상과 관련된 스타일 속성에 대응하는 색상 클래스를 제공한다. 

 

색상 클래스 구조

 

{접두사}-{색상}-{채도}/{불투명도}

예) bg-black/70, text-white, border-green-300

접두사

스타일 속성을 의미한다.  배경색을 의미하는 bg, 텍스트 색상을 의미하는 text, 경계 색상을 의미하는 border 등이 있다.

색상

지정하려는 색상 이름이다.

채도

색상의 밝기 또는 어두운 정도를 나타낸다. 50, 100, 200, 300, 400, 500, 600, 700, 800, 900 등 10개 번호로 세분화한다. 숫자가 클수록 어두운 색상이다.

불투명도

색상의 투명도를 설정한다. 20~100 사이에서 5~10씩 증가하는 숫자로 제한한다. 20이 가장 투명한 색상, 100은 가장 불투명한 색상이다.

 

Tailwind CSS와 CSS 함수 비교

---

Tailwind CSS와 CSS의 색상 함수를 비교하면, Tailwind CSS는 더 직관적이고 일관된 방법으로 색상을 적용할 수 있게 해 준다. 예를 들어, Tailwind CSS에서는 클래스 이름만으로 색상을 지정할 수 있어 코드가 간결해진다.

CSS 함수 예시:

/* CSS 함수 사용 */
.element {
  background-color: rgb(255, 99, 71); /* 토마토 색상 */
  color: hsl(120, 100%, 50%); /* 초록색 */
  border-color: rgba(0, 0, 255, 0.3); /* 반투명 파란색 */
}

Tailwind CSS 예시:

<!-- Tailwind CSS 클래스 사용 -->
<div class="bg-red-400 text-green-500 border-blue-300/30">...</div>