CSS CSS 색상
CSS 색상
색상 이름으로 표현
색상의 이름을 바로 입력하여 사용이 가능합니다.
p {
color: red;
}RGB 색상값으로 표현
RGB 색상표기법은 rgb(red, green, blue)형식으로 색상을 표현하는데, 각 요소에는 0에서 255사이의 숫자를 입력합니다.
여기에 투명도를 더하고 싶다면 rgba(red, green, blue, alpha)형식으로 네번째 자리에 불투명도를 표기해주면 됩니다.
투명도 표기법은 0~1까지 사용할 수 있고, 숫자가 적을수록 투명해 집니다.
p {
color: rgba(0, 0, 0, 0.5); //투명도 50% 검정색
}16진수 색상값으로 표현(HEX)
RGB 순서대로 16진수로 변환하여 00~ff까지 두자리씩 표기합니다.
여섯자리의 색상코드 앞에는 샵(#)을 붙입니다.
숫자가 작을수록 어두운 색상으로 #000000은 검정색, #ffffff는 하얀색 입니다.
같은 숫자가 반복된다면 #000000 -> #000, #ffffff -> #fff와 같이 세자리로 표기해도 무방합니다.
p {
color: #000;
}HSL/HSLA 값으로 표현
HSL은 Hue(색상), Saturation(채도), Lightness(명도)로 색상을 정의하는 방법입니다.
색상은 0부터 360까지의 색상환에 따라 결정되며 0:red, 120:green, 240:blue로 나타냅니다.
채도와 명도는 백분율로 나타냅니다.
HSLA는 HSL방식에서 불투명도 지정 기능이 추가된 것이며 HSLA(색상,채도,명도,불투명도) 형식으로 나타냅니다.
<p style="background-color:hsl(o,100%,80%);">채도 100%, 밝기 80%<p>