[CSS] 색 표현하기 2-4

Yumin Jung·2023년 1월 19일

얄코의 제대로 파는 CSS

목록 보기

5/12

색상 표현 background-color 속성

여러 형식들을 사용하여 색상을 지정할 수 있는데, keyword방식, RGB(A)방식, HEX방식, HSL(A) 방식이 있다.

keyword

keyword는 색상마다 부여된 이름으로 이 링크에서 목록을 확인할 수 있다.
https://developer.mozilla.org/ko/docs/Web/CSS/color_value#%EC%83%89%EC%83%81_%ED%82%A4%EC%9B%8C%EB%93%9C
ex) white, red, peru, orangered 등등
가장 단순한 방법

RGB(A)

RGB(A) 는 RED빨강, GREEN초록, BLUE파랑의 광원으로 색을 혼합하는 방식이다.
끝에 A인 알파값을 붙여서 투명도를 조절할 수 있다.
ex) rgb(200, 200, 200) , rgba(100%, 0%, 0%, 50%)

HEX

HEX는 R, G, B, Alpha 값들을 16진수형태로 나타낸 것이다.
#FFFFFF -> 빨(FF) 초(FF) 파(FF)
10진수 가장 큰 두자리가 99라면 16진수 가장 큰 두 자리가 FF이다. 그러므로 RGB상 255로 가장 큰 수치가 된다. (16*16=256)

#FF0000 은 빨간색이 된다.
#00FF00 은 초록색이 된다.
#0000FF 은 파란색이 된다.
#000000 은 검정색이 된다.
#555555 은 세 자리에 같은 숫자가 들어왔으므로 무채색(회색 계열)이 된다.

또한, 같은 색이면 세 자리로 줄일 수 있다.
ex) #FFFFFF(= #FFF)

역시, 맨끝에 추가하여 투명도를 조절할 수 있다.
ex) #0000FF80