CSS 색상 표현법 알아보기

CSS 색상 표현

css에서 색상을 표현하는 방법에는 여러가지가 있습니다. 각 방법을 알아두었다가, 유용하게 사용하도록 합시다.

표현법	설명	작성법	예시
주요 색상 이름	주요 색상 이름을 작성한다.	red, white, blue, black, …	color: white;
16진수 표기 (HEX 코드)	rgb의 농도를 00~ff로 표현하는 HEX 코드로 작성한다. 00에 가까울수록 밝고, ff에 가까울수록 어둡다.	#000000 ~ #ffffff	color: #fff;
RGB 표기	red, green, blue의 수치를 0~255까지 표기하여 작성한다.	rgb(0, 0, 0) ~ rgb(255 ,255, 255)	color: rgb(0, 0, 0);
RGBA 표기	RGB와 같으나, 투명도 수치가 포함되어 있다. 0.0 ~ 1.0까지 표기가 가능하고, 소숫점은 생략 가능하다. 0에 가까울 수록 투명하다.	rgba(0, 0, 0, 0.0) ~ rgba(255 ,255, 255, 1.0)	color: rgb(0, 0, 0, 0.3);
HSL 표기	색상, 채도, 밝기를 뜻하는 hsl의 수치로 표현하는 방법. 색상코드는 0 ~ 360까지이며, 밝기는 100%에 가까울수록 밝아진다.	hsl(0, 0%, 0%) ~ hsl(360 ,100%, 100%)	color: rgb(0, 0%, 100%);
HSLA 표기	HSL과 같으나, 투명도 수치가 포함되어 있다. 0.0 ~ 1.0까지 표기가 가능하고, 소숫점은 생략 가능하다. 0에 가까울 수록 투명하다.	hsla(0, 0%, 0%, 0.0) ~ hsla(360 ,100%, 100%, 1.0)	color: rgb(0, 0%, 100%, 0.3);