[css] 색상

이 글을 부스트코스 강의를 기반으로 작성하였습니다.

컬러 키워드

p { color: red }

css 자체에서 사용 가능한 문자 식별자이다.

red, blue, balck 등과 같이 미리 정의되어있는 키워드를 이용해서 색상을 표현할 수 있다.

16진법

p { color: #aa11cc }
p { color: #a1c }

/*
 * #RRGGBB
 * #RGB (축약 작성) 
 */

6자리의 16진수(0~9, A~F)는 각각 두 자리씩 세 가지 색상을 나타낸다.

첫 번째 두 자리는 적색, 두 번째 두 자리는 녹색, 마지막 두자리는 청색을 의미한다.

각 자리의 알파벳은 대소문자를 구분하지 않는다.

각각의 두 자리가 같은 값을 가지면 3자리로 축약하여 사용할 수 있다.

예를들어, #aa11cc는 #a1c로 축약하여 사용할 수 있다.

RGB[A]

p { color: rgb(0,0,0) }
p { color: rgb(255,255,255,1) }
p { color: rgba(255,255,255,1) }

/*
 * rgb(0,0,0) ~ rgb(255,255,255)
 * rgba(0,0,0,0) ~ rgb(255,255,255,1)
 */

RGB 값은 rgb(R, G, B)의 형태로 각 변수 값(R 적색, G 녹색, B 청색)의 강도를 정의한다.

0~255의 정수로 된 값을 지정할 수 있으며, 0 → 255는 검정 → 흰색으로 값의 변화를 나타낸다.

RGBA 값은 기존 RGB에서 alpha(A)값이 추가된 형태이다.

rgb(R, G, B, A) 혹은 rgba(R, G, B, A) 작성하며 각 변수는(R 적색, G 녹색, B 청색, A 투명도)의 강도를 정의한다.

alpha값은 투명도를 나타내며 0 ~ 1 사이의 값을 지정할 수 있으며, 0.5와 같이 소수점으로 표기할 수 있다.

0 → 1은 투명 → 불투명으로 값의 변화를 나타낸다.
예를 들어, rgba( 0, 0, 0, 0)는 투명한 색상을 가지게 된다.