CSS 색상지정 , Hex color, RGB color

 

HEX

Hex 컬러란? 

 

 위의 양식처럼 표현된 것이 Hex 컬러이다. hexadecimal 이라고 하는 16진수를 바탕으로 표시된 것이며 RGB와 대응하여 사용할 수 있다. 두글자씩 묶여서 rgb로 대응시킬 수 있다. 

 

00에서 FF까지 총 16가지(0~15)로 표현하고, 위의 그림에 표시된 경우처럼 중복된 두문자 혹은 숫자가 연속되어 쓰이면 해당 숫자 및 문자는 하나만 써서 간략하게 쓸 수도 있다. 

 

 예시 

 #FFFFFF -> #FFF

 #00FFFF -> #0FF

 #000000 -> #000

 

HSL

HSL (hue, Saturation, Lightness) 

 

 Hue는 위 색상환에서의 색상을 결정 

 Saturatino은 채도, 0이 될수록 회색빛이고 파스텔톤으로 바뀜 

 Lightness는 명도로 클수록 밝아지고 , 숫자가 작을수록 검정색으로 변함 

 

hsl(0,0%,0%)

 이런식으로 첫 hue는 0부터 360까지의 숫자로 , 이후 두 자리는 퍼센트로 표기한다. 

 

 

 

Opacity / Alpha

 

 투명도를 조절함. RGB 뒤에 붙어서, RGBA 로 쓰이기도 하고 HSL 뒤에 붙어서 HSLA 로 쓰이기도함. 

Hex에도 사용할 수는 있지만 널리 사용되는 방법은 아니다. hex에 쓰일 때는 00에서 FF까지로 쓰인다. 일반적으로 rgba나 hsla에서는 0이 제일 투명, 1이 제일 불투명(일반색상)으로 쓰인다. 

 

 일반 name으로 하는 색상의 경우에는 alpha를 붙일 수 없으나, transparent 라고 하는 이름의 색상은 rgb(0,0,0,0)과 똑같은 역할로 쓰일 수 있다. alpha가 음수일 경우에는 투명한 것이 아니라 뒤의 배경색과 섞이게(blend) 된다(사라진 것 처럼 보임) . 

 

 

참고

https://developer.mozilla.org/en-US/docs/Web/CSS/color_value

<color> - CSS: Cascading Style Sheets | MDN