HTML 색상(Color) 표현 방식

색상(Color)
빨강, 파랑, 녹색이라는 이름 등으로 서로 구별되는 특성을 말한다. 이러한 3가지 색이 모여 다양한 색상을 만들수 있다.

HTML에서 색을 표현하는 방법에는 총 6가지가 존재한다.

  • 색상 이름으로 표현
  • RGB 색상으로 표현
  • HEX(16진수) 색상으로 표현
  • HSL 색상으로 표현
  • RGBA 색상으로 표현
  • HSLA 색상으로 표현

색상 이름(Color Names)

HTML에서는 색상 이름을 사용하여 색상을 지정할 수 있다.

W3C에서 정의한 16개의 HTML4 표준 색상은 아래와 같다.

aquablack
bluefuchsia
graygreen
limemaroon
navyolive
purplered
silverteal
whiteyellow

예제

<!DOCTYPE html>
<html lang="ko">

<head>
	<meta charset="UTF-8">
	<title>HTML 색상이름</title>
</head>
<body>

<h1>아래는 색상 속성의 이름이다</h1>
<h3 style="color:Tomato;">Tomato</h3>
<h3 style="color:Orange;">Orange</h3>
<h3 style="color:DodgerBlue;">DodgerBlue</h3>
<h3 style="color:MediumSeaGreen;">MediumSeaGreen</h3>
<h3 style="color:Gray;">Gray</h3>
<h3 style="color:SlateBlue;">SlateBlue</h3>
<h3 style="color:Violet;">Violet</h3>
<h3 style="color:LightGray;">LightGray</h3>

</body>
</html>

※HTML에서 색상 이름은 대소문자를 구분하지 않는다.
※HTML 색상은 현재 주요 브라우저에서 140개의 색상 이름을 모두 지원되고 있다.

배경색(Background Color)

HTML 요소의 배경색을 설정할 수 있다.

예제

<!DOCTYPE html>
<html lang="ko">

<head>
	<meta charset="UTF-8">
	<title>HTML 배경색</title>
</head>
<body>

<h1 style="background-color:DodgerBlue;">웹 브라우저에 오신걸 환영합니다.</h1>

<p style="background-color:Tomato;">
웹브라우저의 배경색을 표현하는 방법은 정말 간단합니다. 직접 해보면 큰 어려움이 없습니다. 배경색은 어떤 특정한 제목, 문단을 강조하기 위해서 사용되기도 하며, 중요 단어에 대한 강조표시에도 사용됩니다.
</p>

</body>
</html>

텍스트 색상(Text Color)

HTML 텍스트 색상으로도 설정할 수 있다.

예제

<!DOCTYPE html>
<html lang="ko">

<head>
	<meta charset="UTF-8">
	<title>HTML 텍스트 색상</title>
</head>
<body>

<h1 style="color:Tomato;">안녕하세요. 텍스트 색상 예제입니다.</h1>
<p style="color:DodgerBlue;">텍스트 색상 속성은 이와 같이 표현된다.</p>
<p style="color:MediumSeaGreen;">텍스트 색상 속성은 이름 속성 기반으로 작성되어도 된다.</p>

</body>
</html>

테두리 색상(Border Color)

HTML 테두리 색상을 설정할 수 있다.

예제

<!DOCTYPE html>
<html lang="ko">

<head>
	<meta charset="UTF-8">
	<title>HTML 테두리 색상</title>
</head>
<body>

<h1 style="border: 2px solid Tomato;">안녕하세요!! Tomato 테두리 색상입니다.</h1>

<h1 style="border: 2px solid DodgerBlue;">안녕하세요!! DodgerBlue 테두리 색상입니다.</h1>

<h1 style="border: 2px solid Violet;">안녕하세요!! Violet 테두리 색상입니다.</h1>

</body>
</html>

색상 값(Color Values)

HTML에서는 RGB 값, HEX 값, HSL 값, RGBA 값 및 HSLA 값을 사용하여 색상을 지정할 수 있다. 색상 이름 “Tomato” 와 동일하게 표현될 수 있다. 색상이름 “Tomato” 와 동일하지만 50% 투명도를 가지고 있다.

예제

<!DOCTYPE html>
<html lang="ko">

<head>
	<meta charset="UTF-8">
	<title>HTML 색상 값</title>
</head>
<body>

<p>색상이름 "Tomato":</p>

<h1 style="background-color:rgb(255, 99, 71);">rgb(255, 99, 71)</h1>
<h1 style="background-color:#ff6347;">#ff6347</h1>
<h1 style="background-color:hsl(9, 100%, 64%);">hsl(9, 100%, 64%)</h1>

<p>색상 이름 "Tomato" 와 동일하지만 50% 투명도:</p>
<h1 style="background-color:rgba(255, 99, 71, 0.5);">rgba(255, 99, 71, 0.5)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.5);">hsla(9, 100%, 64%, 0.5)</h1>

<p>HTML에서는 RGB 값, HEX 값, HSL 값, RGBA 값 및 HSLA 값을 사용하여 색상을 지정할 수 있다.</p>

</body>
</html>

RGB 색상 값(RGB Color Values)

모니터나 스크린은 빨간색(Red), 녹색(Green), 파란색(Blue)을 혼합하여 색을 표현한다. HTML에서도 이와 같이 세 가지 색을 가지고 색을 표현하는 RGB 색상을 사용한다. RGB 색상의 기본색(Red, Green, Blue)은 각각 0부터 255까지의 범위를 가지게 된다.

기본 색

  • rgb (0, 0, 0) = 검정색
  • rgb(255, 0, 0) = 빨간색
  • rgb(0, 255, 0) = 녹색
  • rgb(0, 0, 255) = 파란색
  • rgb (255, 255, 255) = 흰색

예제

<!DOCTYPE html>
<html lang="ko">

<head>
	<meta charset="UTF-8">
	<title>HTML RGB 색상 값</title>
</head>
<body>

<h1 style="color:rgb(0,0,255)">RGB 색상값으로 표현된 파란색. rgb(0,0,255)</h1>
<h1 style="color:rgb(0,128,0)">RGB 색상값으로 표현된 녹색. rgb(0,128,0)</h1>
<h1 style="color:rgb(192,192,192)">RGB 색상값으로 표현된 은색. rgb(192,192,192)</h1>
<h1 style="color:rgb(0,128,128)">RGB 색상값으로 표현된 청록색. rgb(0,128,128)</h1>
<h1 style="color:rgb(255,0,0)">RGB 색상값으로 표현된 빨간색. rgb(255,0,0)</h1>

</body>
</html>

각각의 메인 색상에 대한 광원 효과도 나타낼 수 있다. 아래는 회색을 표현한 방식이다.

예제

<!DOCTYPE html>
<html lang="ko">

<head>
	<meta charset="UTF-8">
	<title>HTML RGB 색상 값</title>
</head>
<body>

<h1 style="background-color:rgb(0, 0, 0);">rgb(0, 0, 0)</h1>
<h1 style="background-color:rgb(60, 60, 60);">rgb(60, 60, 60)</h1>
<h1 style="background-color:rgb(120, 120, 120);">rgb(120, 120, 120)</h1>
<h1 style="background-color:rgb(180, 180, 180);">rgb(180, 180, 180)</h1>
<h1 style="background-color:rgb(240, 240, 240);">rgb(240, 240, 240)</h1>
<h1 style="background-color:rgb(255, 255, 255);">rgb(255, 255, 255)</h1>

</body>
</html>

16진수 색상 값(HEX Color Value)

16진수 색상값은 RGB 색상값을 각각 16진수로 변환한 것이다. 따라서 각각의 기본색(Red, Green, Blue)은 각각 00부터 FF까지의 범위를 가지게 된다.

예를 들어, 빨간색을 나타내는 RGB 색상값인 rgb(255,0,0)은 16진수 색상값으로는 #FF0000이 된다. 이것은 빨간색은 가장 높은 값(FF)으로 설정하고, 가장 낮은 값(00)으로 설정해서 #FF0000 이 된다. 숫자는 RGB 위치와 동일하다. R은 FF, G는 00, B도 00이다.

예제

<!DOCTYPE html>
<html lang="ko">

<head>
	<meta charset="UTF-8">
	<title>HTML 16진수 색상값</title>
</head>
<body>

<h1 style="color:#0000FF">16진수 색상값으로 표현된 파란색. color:#0000FF</h1>
<h1 style="color:#008000">16진수 색상값으로 표현된 녹색. color:#008000</h1>
<h1 style="color:#C0C0C0">16진수 색상값으로 표현된 은색. color:#C0C0C0</h1>
<h1 style="color:#008080">16진수 색상값으로 표현된 청록색. color:#008080</h1>
<h1 style="color:#FF0000">16진수 색상값으로 표현된 빨간색. color:#FF0000</h1>

</body>

</html>

HSL 색상 값(HSL Color Value)

HTML에서는 색상, 채도 및 명도 (HSL)를 사용하여 다음과 같은 형식으로 색상을 지정할 수 있다.

hsl(색조 , 채도 , 명도 )

색조는 0에서 360까지의 색상환에 대한 정도이다. 0은 빨간색이고 120은 녹색이며 240은 파란색이다. 채도는 백분율 값으로 표현하며, 0%는 회색 음영을 나타내며 100%는 전체 색상이다. 명도(밝기)도 백분율로 표현하는데, 0%는 검은색, 50 %는 밝거나 어두운 색, 100%는 흰색이다.

예제

<!DOCTYPE html>
<html lang="ko">

<head>
	<meta charset="UTF-8">
	<title>HTML HSL 색상값</title>
</head>
<body>

<h1 style="background-color:hsl(0, 100%, 50%);">hsl(0, 100%, 50%)</h1>
<h1 style="background-color:hsl(240, 100%, 50%);">hsl(240, 100%, 50%)</h1>
<h1 style="background-color:hsl(147, 50%, 47%);">hsl(147, 50%, 47%)</h1>
<h1 style="background-color:hsl(300, 76%, 72%);">hsl(300, 76%, 72%)</h1>
<h1 style="background-color:hsl(39, 100%, 50%);">hsl(39, 100%, 50%)</h1>
<h1 style="background-color:hsl(248, 53%, 58%);">hsl(248, 53%, 58%)</h1>

</body>

</html>

채도(Saturation)

채도는 색상의 강도로 설명 할 수 있다. 100% 순수한 색상, 회색 음영 없음, 50%는 50 %회색이지만 여전히 색상을 볼 수 있다. 0%가 완전히 회색이면 더 이상 색상을 볼 수 없게 된다.

예제

<!DOCTYPE html>
<html lang="ko">

<head>
	<meta charset="UTF-8">
	<title>HTML HSL 색상값</title>
</head>
<body>

<h1 style="background-color:hsl(0, 100%, 50%);">hsl(0, 100%, 50%)</h1>
<h1 style="background-color:hsl(0, 80%, 50%);">hsl(0, 80%, 50%)</h1>
<h1 style="background-color:hsl(0, 60%, 50%);">hsl(0, 60%, 50%)</h1>
<h1 style="background-color:hsl(0, 40%, 50%);">hsl(0, 40%, 50%)</h1>
<h1 style="background-color:hsl(0, 20%, 50%);">hsl(0, 20%, 50%)</h1>
<h1 style="background-color:hsl(0, 0%, 50%);">hsl(0, 0%, 50%)</h1>

</body>

</html>

명도(밝기)(Lightness)

밝기는 색상을 지정하려는 빛의 양으로 표시 할 수 있다. 0%는 빛이 없음을 의미하고 50%는 50%의 빛을 의미한다. (어두운 것도 밝은 것도 없음). 100%는 완전한 밝기(흰색)를 의미한다.

예제

<!DOCTYPE html>
<html lang="ko">

<head>
	<meta charset="UTF-8">
	<title>HTML HSL 색상값</title>
</head>
<body>

<h1 style="background-color:hsl(0, 100%, 0%);">hsl(0, 100%, 0%)</h1>
<h1 style="background-color:hsl(0, 100%, 25%);">hsl(0, 100%, 25%)</h1>
<h1 style="background-color:hsl(0, 100%, 50%);">hsl(0, 100%, 50%)</h1>
<h1 style="background-color:hsl(0, 100%, 75%);">hsl(0, 100%, 75%)</h1>
<h1 style="background-color:hsl(0, 100%, 90%);">hsl(0, 100%, 90%)</h1>
<h1 style="background-color:hsl(0, 100%, 100%);">hsl(0, 100%, 100%)</h1>

</body>

</html>

RGBA 색상 값(RGBA Color Value)

RGBA 색상 값은 색상의 불투명도를 지정하는 알파 채널이있는 RGB 색상 값의 확장된 것이다. RGBA 색상 값은 다음과 같이 지정된다.

rgba (빨강, 녹색 , 파랑, 알파)

알파 매개 변수는 0.0 (완전히 투명)과 1.0 (전혀 투명하지 않음) 숫자로 표현된다.

예제

<!DOCTYPE html>
<html lang="ko">

<head>
	<meta charset="UTF-8">
	<title>HTML RGBA 색상값</title>
</head>
<body>

<h1 style="background-color:rgba(255, 99, 71, 0);">rgba(255, 99, 71, 0)</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.2);">rgba(255, 99, 71, 0.2)</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.4);">rgba(255, 99, 71, 0.4)</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.6);">rgba(255, 99, 71, 0.6)</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.8);">rgba(255, 99, 71, 0.8)</h1>
<h1 style="background-color:rgba(255, 99, 71, 1);">rgba(255, 99, 71, 1)</h1>

</body>

</html>

HSLA 색상 값(HSLA Color Value)

HSLA 색상 값은 색상의 불투명도를 지정하는 알파 채널이있는 HSL 색상 값의 확장된 것이다. HSLA 색상 값은 다음과 함께 지정 된다.

hsla (색조, 채도 , 명도, 알파)

알파 매개 변수는 0.0 (완전히 투명)과 1.0 (전혀 투명하지 않음) 숫자로 표현된다.

예제

<!DOCTYPE html>
<html lang="ko">

<head>
	<meta charset="UTF-8">
	<title>HTML HSLA 색상값</title>
</head>
<body>

<h1 style="background-color:hsla(9, 100%, 64%, 0);">hsla(9, 100%, 64%, 0)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.2);">hsla(9, 100%, 64%, 0.2)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.4);">hsla(9, 100%, 64%, 0.4)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.6);">hsla(9, 100%, 64%, 0.6)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.8);">hsla(9, 100%, 64%, 0.8)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 1);">hsla(9, 100%, 64%, 1)</h1>

</body>

</html>

댓글 남기기

이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다