color 속성

 

🟢   color

웹 페이지의 텍스트(글자)의 색을 지정하는 속성.

• 상속: 부모 요소에 지정된 color 값은, 특별한 설정이 없는 한 자식 요소로 전달(상속)된다.
• 확장: 텍스트 외에도 테두리(border)나 구분선(hr) 등에 색상을 줄 때는 border-color, background-color 처럼 접두사가 붙은 속성을 사용한다.

 

🎨 주요 방식 (4가지) 🎨

1️⃣ Color Names (색상 이름)

브라우저가 미리 정의해둔 색 이름을 사용하는 방식.

header {
      color: red; /* 빨강 */
      color: blue; /* 파랑 */      
}

• 예: red, blue, gold, transparent(투명) 등. (약 140개 색상만 사용 가능)
• 직관적이지만 세밀한 표현은 어려움.

 

2️⃣ Hex Code (16진수 코드) ⭐대중적

#RRGGBB (빨강, 초록, 파랑): # 뒤에 6자리(또는 3자리) 16진수를 입력하는 방식. (각 값 범위: 00 ~ FF)

header {
      color: #ff0000; /* 빨강 */
      color: #000000; /* 검정 */      
}

/* 축약형 */
header {
      color: #f00; /* #ff0000 */      
}

• 예: #ff0000 (빨강), #000000 (검정), #ffffff (흰색)
• 정교한 색상 표현이 가능하며 코드가 짧고 깔끔하다. (투명도(alpha) 표현은 불가능해 별도 방식 필요)

 

3️⃣ RGB / RGBA

빛의 3원색(Red, Green, Blue)을 숫자로 조합하여 색을 표현하는 방식.  (각 값 범위: 0~255, 0%~100%)

/* RGB */
header {
      color: rgb(255, 0, 0); /* 빨강 */
      color: rgb(0, 0, 0); /* 검정 */      
}

/* RGBA */
header {
      color: rgba(255, 0, 0, 0.5); /* 반투명 빨강 */      
}

• RGBA: RGB에 Alpha(투명도) 값을 추가한 방식. (0: 투명 ~ 1: 불투명)
• 색을 수치로 정밀하게 표현 가능하고 JavaScript와 함께 사용할 때 편리하다.

 

4️⃣  HSL / HSLA

색을 색상(Hue), 채도(Saturation), 밝기(Lightness) 기준으로 표현하는 방식.

/* HSL */
header {
      color: hsl(0, 100%, 50%); /* 빨강 */
      color: hsl(120, 100%, 50%); /* 초록 */      
}

/* HSLA */
header {
      color: hsla(0, 100%, 50%, 0.5);      
}

• H: 색상. (0 ~ 360도)
• S: 채도. (0~100%)
• L: 밝기. (0~100%)
• 사람이 색을 이해하는 방식과 유사하고 밝기/채도 조절이 쉬워 테마 색상 관리에 유리하다.

 

 

📍  POINT 📍 

✔️ 텍스트 색상을 고를 때는 배경색과의 대비(Contrast)를 고려해야한다. ✔️

 

 

📋 컬러 주요 속성 방식 요약표 📋

방식	설명	구문 예시	특징
Name	이름으로 표현	color: black;	직관적이지만 제한적
Hex	16진수 코드	color: #f39c12;	표준적이고 가장 많이 사용
RGBA	RGB + 투명도	color: rgba(0,0,0,0.5);	투명도를 조절할 때 필수
HSL	색상/채도/밝기	color: hsl(0, 100%, 50%);	색의 변화(밝기 등)를 계산하기 좋음