HTML 색상표 - 색상코드 HEX, RGB 값과 한글 색이름 총정리

홈페이지나 블로그를 꾸밀 때, 또는 HTML과 CSS로 글자색과 배경색을 바꿀 때 가장 먼저 필요한 것이 색상코드입니다. 이 HTML 색상표에는 모든 브라우저에서 공통으로 쓸 수 있는 표준 색상 이름 141개를 빨강, 파랑, 초록 같은 계열별로 나누고, 색마다 한글 이름, HEX 코드, RGB 값을 함께 정리했습니다. 하늘색, 베이지, 네이비처럼 자주 찾는 색은 바로 아래 표에서 먼저 확인할 수 있습니다.

자주 찾는 색상코드

많이 검색하는 대표 색상의 코드를 먼저 모았습니다. 필요한 색이 여기 있다면 HEX 코드나 색상 이름을 그대로 복사해서 쓰면 됩니다.

HTML 색상코드 쓰는 법 (색상 이름, HEX, RGB)

HTML과 CSS에서는 같은 색을 세 가지 방식으로 지정할 수 있고, 어떤 방식을 써도 화면에 나오는 색은 똑같습니다. 아래 세 줄은 모두 토마토색(tomato)을 지정하는 코드입니다.

color: tomato;
color: #FF6347;
color: rgb(255, 99, 71);

색상 이름은 외우기 쉽고 코드를 읽기 편합니다. 대소문자를 구분하지 않아서 Tomato, tomato 모두 똑같이 동작합니다.

HEX 코드는 # 뒤에 16진수 6자리로 빨강, 초록, 파랑의 세기를 두 자리씩 나타낸 값입니다. 포토샵이나 피그마 같은 디자인 프로그램에서 뽑은 색을 그대로 옮길 때 가장 많이 씁니다. #FF6600처럼 두 자리씩 같은 숫자가 반복되면 #F60처럼 3자리로 줄여 쓸 수도 있습니다.

RGB 값은 빨강, 초록, 파랑을 각각 0부터 255까지의 숫자로 나타냅니다. rgba(255, 99, 71, 0.5)처럼 네 번째 값으로 투명도를 넣을 수 있어서 반투명한 배경을 만들 때 편리합니다.

HTML 태그에 바로 색을 넣고 싶다면 style 속성을 이용하면 됩니다.

<p style="color: rgb(255, 99, 71);">토마토색 글자</p>
<div style="background-color: skyblue;">하늘색 배경</div>

빨간색 계열 색상코드

경고 문구나 할인 표시, 강조하고 싶은 글자에 많이 쓰는 색입니다. 같은 빨강이라도 crimson은 선명하고 firebrick, darkred는 차분한 느낌을 줍니다.

분홍색 계열 색상코드

부드럽고 밝은 분위기를 낼 때 쓰는 색입니다. 배경에는 pink, lightpink처럼 연한 색을, 버튼이나 포인트에는 hotpink, deeppink를 주로 씁니다.

주황색 계열 색상코드

활기차고 따뜻한 느낌을 주는 색으로, 이벤트 배너나 알림 표시에 자주 쓰입니다.

노란색 계열 색상코드

눈에 잘 띄어서 주의 표시나 형광펜 효과에 좋습니다. lightyellow, lemonchiffon 같은 연한 노랑은 안내 박스 배경으로 많이 씁니다.

보라색 계열 색상코드

고급스럽고 신비로운 느낌을 줍니다. lavender, thistle처럼 연한 보라는 배경색으로, purple, indigo처럼 진한 보라는 제목이나 로고에 어울립니다.

초록색 계열 색상코드

자연스럽고 편안한 느낌을 주는 색으로, 완료 표시나 성공 메시지에 자주 씁니다. 연두색이 필요하면 yellowgreen, 국방색이 필요하면 olivedrab을 쓰면 됩니다.

파란색 계열 색상코드

신뢰감과 차분함을 주는 색이라 링크, 버튼, 기업 사이트에 가장 많이 쓰입니다. 하늘색은 skyblue, 남색은 navy를 쓰면 됩니다.

갈색 계열 색상코드

따뜻하고 안정적인 느낌을 주며, 카페나 인테리어, 원목 느낌의 디자인에 잘 어울립니다.

흰색 계열 색상코드

순수한 흰색(white) 말고도 살짝 색이 섞인 흰색이 많습니다. 흰 배경이 너무 차갑게 느껴질 때 ivory, beige, snow 같은 색으로 바꾸면 한결 부드러워집니다.

회색·검은색 계열 색상코드

본문 글자, 테두리, 구분선처럼 눈에 띄지 않아야 하는 곳에 주로 씁니다. 순수한 검정(black) 대신 진한 회색을 본문 글자색으로 쓰면 눈이 덜 피로합니다.

색상코드 쓸 때 헷갈리기 쉬운 부분

• green은 생각보다 어둡습니다. CSS의 green(#008000)은 진한 초록이고, 형광처럼 밝은 순수한 초록은 lime(#00FF00)입니다.
• darkgray가 gray보다 밝습니다. darkgray(#A9A9A9)가 gray(#808080)보다 밝아서 이름과 반대로 느껴지는 대표적인 예입니다.
• khaki는 우리가 아는 카키색과 다릅니다. 흔히 카키색이라고 하면 군복 같은 올리브빛 초록을 떠올리지만, CSS의 khaki는 연한 황토색입니다. 국방색 느낌을 원한다면 olivedrab이나 darkolivegreen을 쓰는 것이 맞습니다.
• 같은 색인데 이름이 두 개인 경우가 있습니다. aqua와 cyan, fuchsia와 magenta는 완전히 같은 색입니다. 또 gray가 들어간 이름은 grey로 써도 똑같이 동작합니다.
• 민트색, 와인색 같은 이름은 표준 색상 이름에 없습니다. 이런 색은 HEX 코드로 직접 지정해야 합니다. 비슷한 색을 찾는다면 민트색은 aquamarine이나 mediumaquamarine, 와인색은 maroon이나 darkred를 참고하면 됩니다.

글자색을 고를 때 알아두면 좋은 점

색상표에서 예쁜 색을 골라도 배경과 글자색의 차이가 작으면 글이 잘 읽히지 않습니다. 웹 접근성 기준(WCAG)에서는 일반 본문 글자와 배경의 명암 대비를 4.5:1 이상으로 권장합니다. 쉽게 말해 연한 배경에는 진한 글자를, 진한 배경에는 밝은 글자를 쓰면 됩니다. yellow, lime, aqua처럼 밝은 색은 흰 배경의 글자색으로 쓰면 거의 보이지 않으니 배경색이나 포인트 색으로 쓰는 것이 좋습니다.

정리하면, 자주 쓰는 기본 색은 색상 이름으로 간단하게 쓰고, 디자인에 맞춘 정확한 색이 필요할 때는 HEX 코드를, 투명도가 필요할 때는 RGB 값을 쓰면 됩니다. 표에 없는 색도 HEX 코드나 RGB 값으로는 약 1,677만 가지를 표현할 수 있으니, 이 색상표를 기준으로 원하는 색에 가까운 코드를 찾아 조금씩 조절해보면 됩니다.