css 색

rgb? hsla? hex?

흔히들 web에서 쓰는 색상은 rgb 값이라고 표현한다.

포토샵에서 저장할때 문서 설정을 rgb로 두어야 모니터에서 제대로 된 색상이 나온다고 할 때 그 rgb이다.

(반대로 인쇄물은 cmyk)

그리고 css로 코딩할 때도 rgb값으로 코딩하는 경우를 많이 봐왔을 것이다.

예를 들어

background:rgb(255,255,255); 

로 배경색을 지정하는 등의 방식으로

그런데 나는 rgb 코드가 너무 길다고 생각해서(...) hex 코드로 배경색을 지정해주는 것을 선호하는데

background:#222222 or background:#222

-> 숫자 6개가 동일하다면 3개 숫자만 단축으로 써줘도 된다.

이런식으로 사용을 하고 있다. 이렇듯 색상 값의 방법이  hex와 rgb가 있다는 것은 알고 있었는데, 여기에 hsla라는 단위가 하나 더 있다는 사실을 오늘 처음 알게되서 3가지 방식의 단위를 비교, 사용법을 적어보고자 한다=)

1) hex (hex 코드 단위)

#RRGGBB  :   RR-red, GG-green, BB-blue 순서대로의 값을  00 ~ FF 까지 16진수로 표현한 단위

Hex 는 16진수로 표현되는 색상값을 뜻함.

16진수가 뭔지 모르겠어서 초록창에 검색했더니  '2진수로 나타내는 4자리의 숫자는 0000에서 1111까지의 16 방법이 있다. 이것을  0에서 9까지의 숫자와 A에서 F까지의 영어문자에 대응시켜서 표현한 것을 16진수라 한다. 16진수는 4비트의 정보를 처리하는 데 편리하다" 라고 나오는데,,, 나는 영문 숫자 혼용한 값으로 데이터를 처리했다. 라고 이해했음

아무튼 우리에게 익숙한 포토샵에서 색상을 스포이드로 콕 찝어서 나오는 맨아래 코드<<< 가 바로 hex

 

 

시작은 흰색 #FFFFFF에서 검은색 #000000으로 끝남

소문자로 써도 웹에서 색상이 표시된다. 

#fff = #FFF

사용방법

em { color: #000000 }  /* black */

hex 코드를 쓰고싶을 때 아래와 같은 색상 홈페이지에서 복사해서 쓰면 편하다=)

https://www.w3schools.com/colors/colors_picker.asp

http://html-color-codes.info/Korean/

2) rgb (red, green, blue)

rgb (red, green, blue) : 0에서 255 사이의 값으로 red, green, blue의 배합율에 따라 색상을 표현

rgb(255,255,255) - 흰색

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

왜 검은색은 0, 0, 0이고 흰색이 255,255,255이냐하면, rgb는 빛의 삼원색이 기본이 되는 색상값으로 가산혼합을 체계로하는 색상표인데, 빛이 아무것도 없으면 검은색(0, 0, 0)이고 빛이 가장 많을 때(255,255,255)가 흰색이 되는것!

rbg는 포토샵에서 아래와 같은 RGB 값을 순서대로 적으면 웹에 색상이 표현된다.

 

 

 

+ Alpha 값

rgb는 여기에서 더 나아가서 알파(alpha)값과 같이 사용할 수 있다.

이 경우를 RGBA값 이라고 하는데 마지막 알파값은 0.0~ 1.0으로 투명도를 조절할 수 있다. 

0 은 투명(=opacity:0) 1.0은 불투명(=opacity:1.0).

사용방법

em { color: rgb(0,0,0, 1.0) }  /* black */

3) hsl(hue, saturation, lightness) -> hsla(hue, saturation, lightness, alpha)

hsl(hue, saturation, lightness)  : hue 색상값(0~360도), satutaion 채도값(0~100%), lightness 밝기(0~100%)

이 글을 쓰게된 이유인 hsla값,

 

hsb, hsv는 본적이 있는데 hsla은 처음봤기 때문...

그치만, 단어만 조금 다르고, 색상 채도 명도(밝기)는 다 같은 의미!

근데 대체 hsla는 왜 생긴걸까!? 하다가 html5 명세에 적힌 내용을 보고 이해를 했다. 

RGB만으로는 완벽하게 명도와 채도를 표현할수가 없어서 hsl 값을 추가하게 되었다고 한다.

Hue가 0~360도로 쓰이는 이유는 색상이 원으로 계산되기때문(먼셀 표색계)

0, 360도는 빨강,  60도는 노랑, 120도는 초록색, 180도는 시안, 240도는 파란색, 300도는 마젠타 계열이다.

 

 

 

채도는 0은 회색톤 100%는 순수한 색

밝기는 0은 가장 어두운상태(불꺼진상태), 100%은 가장 밝은 상태(불켜진 상태)

RGB에서 HSB로 변환되는 내용에 관한 자세한 내용은 아래 블로그에 너무 좋은 설명이 있어서 링크를 가져왔다.

https://yeun.github.io/2016/03/21/rgb-and-hsb.html

 

포토샵에서는 아래의 칸에 나오는 숫자를 넣어서 사용하면 된다.

rgba와 hsla는 투명도 조절이 필요할 때 요긴:)

사용방법

em { color: hsla(57,100%,0%, 1.0) }  /* black */

* 0%일때도 % 단위 꼭 써주기!

컬러에 관해 유용한 사이트

http://htmlcolorcodes.com/color-names/