CSS color property

웹 페이지의 분위기와 브랜드 이미지를 결정하는 가장 직관적인 속성인 CSS 색상(Color) 속성에 대해 알아보겠습니다.

CSS에서 색상을 지정하는 방법은 아주 다양하며, 각 방법은 사용 목적에 따라 장단점이 있습니다.

---

1. 정의 및 적용 범위

color 속성은 기본적으로 텍스트(글자)의 색상을 지정하는 데 사용됩니다.

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

---

2. 색상을 지정하는 4가지 주요 방식

1) 색상 이름 (Color Names)

브라우저에 미리 정의된 키워드를 사용합니다.

• 예: red, blue, gold, transparent(투명) 등 약 140여 가지가 있습니다.
• 장점: 기억하기 쉽고 간단합니다.

2) 16진수 코드 (Hex Code)

가장 대중적인 방식으로, # 뒤에 6자리(또는 3자리) 16진수를 입력합니다.

• 구조: #RRGGBB (빨강, 초록, 파랑의 조합)
• 예: #ff0000 (빨강), #000000 (검정), #ffffff (흰색)
• 장점: 정교한 색상 표현이 가능하며 코드 길이가 짧습니다.

3) RGB / RGBA

빛의 3원색인 빨강, 초록, 파랑의 양을 0~255 사이의 숫자로 지정합니다.

• RGBA: 마지막에 Alpha(투명도) 값을 추가한 것입니다. (0: 투명 ~ 1: 불투명)
• 예: rgb(255, 0, 0), rgba(255, 0, 0, 0.5) (반투명한 빨강)

4) HSL / HSLA

색상(Hue), 채도(Saturation), 명도(Lightness)를 기준으로 지정합니다.

• Hue: 0~360도의 색상환 위치
• Saturation/Lightness: 0~100% 비율
• 장점: 인간이 직관적으로 색의 밝기나 선명도를 조절하기에 매우 편리합니다.

---

🖥️ 실전 예제 코드

HTML

 

<style>
  /* 키워드 사용 */
  h1 { color: tomato; }

  /* 16진수 코드 사용 */
  p { color: #34495e; }

  /* RGBA 사용 (반투명 효과) */
  span { 
    background-color: rgba(52, 152, 219, 0.2); 
    color: rgb(41, 128, 185);
  }

  /* HSL 사용 (밝기 조절 용이) */
  .button { color: hsl(200, 100%, 50%); }
</style>

<h1>CSS Color Guide</h1>
<p>다양한 방식으로 색상을 입혀보세요.</p>
<span>강조 텍스트</span>

---

📋 색상 지정 방식 요약표

방식	구문 예시	특징
Name	color: skyblue;	직관적이지만 종류가 한정적임
Hex	color: #f39c12;	표준적이고 가장 널리 쓰임
RGBA	color: rgba(0,0,0,0.5);	투명도를 조절할 때 필수
HSL	color: hsl(0, 100%, 50%);	색의 변화(밝기 등)를 계산하기 좋음

---

학습 정리

• 최근 웹 디자인에서는 투명도 조절이 자유로운 **rgba**나 디자인 시스템 관리가 용이한 **hsl**의 인기가 높아지고 있습니다.
• 텍스트 색상을 고를 때는 배경색과의 **대비(Contrast)**를 고려하여 시각 장애가 있는 사용자도 읽기 편하도록 배려하는 것이 중요합니다.

---

웹에 생동감을 불어넣는 색상 속성을 정복하셨습니다!

 

 

---

코드 예제

---

/* 키워드 값 */
color: currentcolor;

/* 컬러 이름 값 */
color: green;
color: orange;
color: darkslateblue;
color: transparent;

/* 16진수(hex) 값 */
color: #f00; /* 빨강 */
color: #ff6347; /* 토마토색 */
color: #ff6347aa; /* 토마토색, 반투명 */

/* rgb() 값 */
color: rgb(255, 99, 71, 0.8); /* 토마토 */
color: rgba(255, 99, 71, 0.8); /* 토마토, 투명도 */
color: rgb(255 99 71 / 0.5); /* 토마토, 50% 투명도 */
color: rgba(255 99 71 / 0.3); /* 토마토, 30% 투명도 */
color: rgb(255 99 71 / 60%); /* 토마토, 60% 투명도 */
color: rgba(255.6 99 71 / 40%); /* 토마토, 40% 투명도 */

/* hsl() 값 */
color: hsl(120, 100%, 25%, 0.5); /* 녹색 */
color: hsla(120, 100%, 25%, 0.5); /* 녹색, 투명도 */
color: hsl(120 100% 25% / 0.5); /* 녹색, 투명도 */
color: hsla(120 100% 25% / 50%); /* 녹색, 50% 투명도 */
color: hsl(120 100% 25% / 70%); /* 녹색, 70% 투명도 */
color: hsla(120.2 100% 25% / 80%); /* 녹색, 80% 투명도 */

/* 전역 값 */
color: inherit;
color: initial;
color: unset;

 

 

 

 

---

칼라 코드 참고

---

https://htmlcolorcodes.com/

HTML Color Codes

 

디자인에 사용할 칼라를 고르고 테스트할 수 있는 사이트입니다.
코딩에서 사용되는 칼라코드를 쉽게 추출합니다.
코딩에서 사용되는 다양한 칼라 포맷을 지원합니다.

---