비전공자 초보마케터의 HTML 색상 완전 정복 (3가지 방법)

하이니주 · HTML / CSS 기초

HTML 기초 프론트엔드 2025

HTML 색상 완전 정복

색상 이름부터 RGB, 16진수, RGBA까지 — 1,600만 가지 색을 다루는 방법

---

1

HTML 색상 지정의 기초

HTML에서 색상을 지정하는 방법은 크게 세 가지로 나뉜다. 색상 이름, RGB, 그리고 16진수 값이다. 기본적으로 HTML은 140개의 미리 정의된 색상 이름을 지원하며, 이를 통해 배경색이나 텍스트 색상, 테두리 등을 간편하게 설정할 수 있다.

Tomato

color: tomato

SteelBlue

color: steelblue

MediumSeaGreen

color: mediumseagreen

색상 이름을 사용하는 방법은 간단하다. 속성에 색상 이름을 직접 입력하기만 하면 된다.

/* 배경색 */
p { background-color: tomato; }

/* 텍스트 색상 */
h1 { color: steelblue; }

/* 테두리 색상 */
div { border: 2px solid mediumseagreen; }

2

정밀한 색상 표현을 위한 RGB 및 16진수

단순한 색상 이름을 넘어 더 정밀한 색을 표현하고 싶다면 RGB 또는 16진수(Hex)를 활용해야 한다. 이 방식들을 사용하면 1,600만 가지 이상의 색상을 세밀하게 표현할 수 있다.

RGB는 빨간색(Red), 녹색(Green), 파란색(Blue)의 강도를 각각 0에서 255 사이로 설정하는 방식이다.

RGB 값	결과 색상	설명
rgb(255, 0, 0)	빨간색	빨간색만 최대, 나머지 0
rgb(0, 0, 0)	검은색	세 값 모두 0
rgb(255, 255, 255)	흰색	세 값 모두 최대
rgb(128, 128, 128)	회색	세 값을 동일하게 설정

💡 세 가지 색상 값을 동일하게 맞추면 밝기만 달라지는 회색 계열이 만들어진다. 값이 낮을수록 어두운 회색, 높을수록 밝은 회색이 된다.

16진수 색상 코드는 해시 기호(#)로 시작하며 6자리 문자가 뒤따른다. 원리는 RGB와 동일하지만, 10진수 대신 16진수로 표현한다는 점이 다르다. 00이 가장 낮은 값, FF가 가장 높은 값이다.

/* 색상 이름 → RGB → Hex 비교 */

/* 빨간색 */
color: red;
color: rgb(255, 0, 0);
color: #FF0000;

/* 검은색 */
color: black;
color: rgb(0, 0, 0);
color: #000000;

/* 흰색 */
color: white;
color: rgb(255, 255, 255);
color: #FFFFFF;

3

RGBA를 통한 투명도 조절

색상에 불투명도를 추가하고 싶다면 RGBA 형식을 사용하면 된다. RGBA는 기존 RGB에 알파(Alpha) 채널이 추가된 확장형 형식이다. 알파 값은 0.0에서 1.0 사이의 숫자로 지정한다.

alpha: 1.0 (불투명)

rgba(192, 57, 43, 1.0)

alpha: 0.7

rgba(192, 57, 43, 0.7)

alpha: 0.4

rgba(192, 57, 43, 0.4)

alpha: 0.1 (투명)

rgba(192, 57, 43, 0.1)

/* RGBA 사용 예시 */
.overlay {
  background: rgba(0, 0, 0, 0.5);  /* 반투명 검은 오버레이 */
}

.glass-card {
  background: rgba(255, 255, 255, 0.2);  /* 글래스모피즘 */
}

배경이 살짝 비치는 UI 요소나 오버레이 효과를 줄 때 유용하게 활용할 수 있다.

HTML 공부 중인 마케터의 기록 👩‍💻

HTML CSS 색상