비전공자 초보마케터를 위한 HTML 색상 시스템 3가지

행파마 — 마케팅 꿀팁 시리즈

행파마 Marketing Blog

HTML / CSS 기초 › HTML 색상

HTML 기초 · 프론트엔드

색상 이름 RGB HEX 16진법

행파마 · 2026. 5. 25.

1

색상 이름 (Color Name)

HTML이 기본으로 제공하는 가장 직관적인 방법이다. 140개의 미리 정의된 색상 이름을 그대로 입력하면 색상이 적용된다. 코드를 읽는 사람도 바로 어떤 색인지 알 수 있다는 게 장점이다.

Tomato

tomato

SteelBlue

steelblue

MediumSeaGreen

mediumseagreen

Gold

gold

Orchid

orchid

Coral

coral

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

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

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

💡 색상 이름은 편리하지만 140가지라는 한계가 있다. 브랜드 컬러처럼 정확한 색을 지정해야 한다면 RGB나 HEX를 써야 한다.

---

2

RGB

색상 이름만으로는 부족할 때 쓰는 방법이다. Red · Green · Blue 세 가지 빛의 강도를 각각 0에서 255 사이로 조합해 색상을 만든다. 이 조합으로 표현할 수 있는 색상이 1,600만 가지 이상이다.

RGB 값	결과 색상	설명
rgb(255, 0, 0)	빨간색	빨강만 최대, 나머지 0
rgb(0, 255, 0)	초록색	초록만 최대, 나머지 0
rgb(0, 0, 255)	파란색	파랑만 최대, 나머지 0
rgb(255, 255, 255)	흰색	세 값 모두 최대 — 가산 혼합
rgb(0, 0, 0)	검정	세 값 모두 0 — 빛이 없는 상태
rgb(128, 128, 128)	회색	세 값이 동일하면 항상 회색

h1 { color: rgb(255, 0, 0); }     /* 빨간색 */
p  { color: rgb(141, 2, 31); }   
div{ color: rgb(128, 128, 128); }/* 회색 */

💡 검정을 이해하는 가장 쉬운 방법 — 스마트폰이 완전히 꺼진 상태를 떠올리면 된다. 빛이 없으니 색도 없고, 그 결과가 rgb(0, 0, 0) 검정이다. 반대로 모든 빛이 다 켜지면 rgb(255, 255, 255) 흰색이 된다.

---

3

HEX — 16진법 색상 코드

RGB와 표현하는 색상 범위는 동일하다. 다만 표기 방식이 다르다. 10진수(0~255) 대신 16진수(00~FF)로 표현하는 것이 HEX다. 실무에서 디자이너가 공유하는 색상 코드가 대부분 이 형식이다.

16진법이란?

우리가 평소 쓰는 숫자 체계는 10진법이다. 0에서 9까지 10개의 숫자로 표현한다. 9 다음은 자리가 올라가서 10이 된다.

16진법은 0~9에 A~F를 더해 총 16개의 문자로 숫자를 표현한다. F 다음이 되어야 자리가 올라간다.

0

0

1

1

2

2

3

3

4

4

5

5

6

6

7

7

8

8

9

9

A

10

B

11

C

12

D

13

E

14

F

15

💡 FF가 왜 255인가 — 16진수 두 자리가 표현할 수 있는 최댓값은 FF다. 이걸 10진수로 바꾸면 (15 × 16) + 15 = 255. 그래서 RGB의 최댓값과 HEX의 FF가 정확히 같은 숫자다.

HEX 코드의 구조

HEX 코드는 #으로 시작하고 6자리가 뒤따른다. 이 6자리는 2자리씩 3쌍으로 나뉘어 R, G, B 각 채널을 담당한다.

# FF 00 00

FF

Red = 255

00

Green = 0

00

Blue = 0

#FF0000

R=FF(255) G=00(0) B=00(0) → 빨간색

#000000

모두 00 → 검정

#FFFFFF

모두 FF → 흰색

#8D021F

R=8D(141) G=02(2) B=1F(31) → 버건디

#FFFF00

R=FF G=FF B=00 → 노란색

RGB vs HEX 비교

색상

RGB

HEX

빨간색

rgb(255, 0, 0)

#FF0000

검정

rgb(0, 0, 0)

#000000

흰색

rgb(255, 255, 255)

#FFFFFF

행파마

rgb(141, 2, 31)

#8D021F

/* RGB와 HEX는 결과가 완전히 동일 */
h1 { color: rgb(255, 0, 0); }
h1 { color: #FF0000; }   /* 위와 동일한 빨간색 */

/* 실무에서 디자이너가 공유하는 형식 */
.brand { color: #8D021F; }   

💡 어떤 걸 써야 하나 — 둘 다 결과는 같다. 다만 디자이너와 협업할 때는 대부분 HEX로 색상을 공유하기 때문에, HEX를 읽고 바로 CSS에 붙여넣을 수 있는 것이 실무에서 더 유용하다.

행파마

비전공자 마케터의 HTML 공부 기록

HTML CSS RGB HEX 16진법