본문 바로가기
웹코딩 배우기/· HTML

HTML 색상

by 닐기 2019. 10. 12.

html 색상은 색이름, rgb, hex, hsl, rgba, hsla 값을 사용한다.

 

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>

<p style="background-color: blue; color: #fff;">파란배경 흰 글씨</p>
<h2 style="background-color: tomato;">토마토색</h2>
<p style="color: gray;">화색</p>
<h3 style="color: green;">녹색</h3>
<p style="border: 2px solid violet;">보라색테구리</p>
<h2 style="border: 2px solid lightgray;">밝은회색테두리</h2>

</body>
</html>

 

파란배경 흰 글씨

토마토색

화색

녹색

보라색테구리

밝은회색테두리

 

색상은 이처럼 배경, 글자, 테두리 등에 쓰인다.

 

 

색이름

blue, red, black 등으로 색이름을 직접 지정한다.

 

RGB(빨강, 녹색, 파랑)

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

값은 0~255

예]

rgb(255, 0, 0) : 빨간색

rgb(0, 0, 0) : 검은색

rgb(255, 255, 255) : 흰색

rgba(44, 44, 44, 0.5) : a를 주어 0.0~1.0 사이의 소수점 값을 주면 된다. 1에 가까울수록 알파값이 작아진다.

 

무채색은 3개의 값이 동일하다.

16진수

#rrggbb

rr - 빨강 gg- 녹색 bb- 파랑

무채색 값은 3가지 값이 동일하다.

 

HSL(색조, 채도, 밝기)

HSLA(색조, 채도, 밝기, 알파)

색조 0~360 : 0은 빨강, 120은 녹색, 240 파랑

채도 0~100% : 0%는 회색 음영. 100% 풀 컬러

밝기 0~100% : 0%는 검은색. 50% 중간 밝기. 100% 흰색.

알파 : 0.0~1.0 사이의 소수점 값을 주면 된다. 1에 가까울수록 알파값이 작아진다.

반응형

댓글0