[CSS] Chapter 06. Color의 이해

1. Hex Color: #000000; ~ #fffff;

Hex Color는 색깔의 변화를 Red, Green, Blue을 각각 16진수로 삽입하여 색을 표현하는 방식이다.

16진수는 0~9, a~f 를 조합한 것으로 ff가 가장 높은 수(15)이다. Style에서 Color를 적용할 때, 0~f의 조합을 통해 색을 구현할 수 있다.

rgb를 따라 진행하므로 3자리 혹은 6자리로 구현이 가능하다.

기본적으로 #00000 식으로 기입한다. 6자리의 구현이 더욱 정밀하다.

 

예) color:#0000ff

 

Hex 코드를 10진수로 표현하면 255,255,255 의 숫자로 구성되는데 이는 RGB 값과 동일하다. 때문에 RGB를 통한 색상 지정도 가능하며, RGB의 경우, RGBA 로 추가하여 투명도까지 설정할 수 있다.

 

2. hsl (색상, 채도, 명도): hsl(0~360, 0~100%, 0~100%)

Hue, Saturation, Lightness 를 원으로 표현한 것으로 각각의 값에 따라 hue는 0~360, Saturation은 0~100%, Lightness는 0~100%의 값을 가진다. (기준색은 Red 이며 이는 0, 100%, 50%) 

Hue: 0은 Red, 120은 Green, 240은 Blue이다. 

 

예) color:hsl(220,50%,72%) // 파스텔 블루

 

 

3. hsl alpha (색상, 채도, 명도, 투명도): hsla(0~360, 0~100%, 0~100%, 0~1)

기본 hsl에서 alpha (투명도)값이 추가된 형식의 표현 기법이다.

투명도란 앞의 오브젝트에 뒤의 오브젝트가 비쳐보이는 효과를 말하는데, 0이 가장 투명한 상태이다. 

 

 

4. 색상 코드