CSS 색상

CSS 색상

css에서 색상을 표현하는 방법은 다음과 같이 다양한 방법이 있다

• 1. HEX 색상
• 2. RGB 색상
• 3. RGBA 색상
• 4. HSL 색상
• 5. HSLA 색상
• 6. 색상 이름 표기법
• 7. transparent 색상

HEX 색상

HEX 색상(Hexadecimal colors)은 #000000 형태의 색상 값은 모든 브라우저에서 지원하므로 색상을 표현하는 가장 기본적인 방법이다 . 모든 값은 00~FF 사이여야 하고 #FFF00처럼 #기호 다음에 6자리의 16진수로 표시된다.

RGB 색상

RGB는 앞에서부터 차례대로 빨간색과 초록색,파란색의 양을 나타내는데 여기서 16진수가 아닌 십진수로 표현한다. 하나도 섞이지 않았을 때는 0으로 표시하고, 가득 섞였을 때는 255로 표시하면 그 사이 값으로 색상의 양을 조절한다.

RGBA색상

RGBA에서의 맨 끝의 a 즉 a(alpha)는 불투명도 값을 나타내는 것으로 0부터 1까지의 값중에서 사용할 수 있다. 1은 완전 불투명한 것이고 0.7이나 0.3처럼 숫자가 작아질수록 조금씩 투명해지다가 0이 되면 완전히 투명해진다

HSL색상

HSL(색상,채도,밝기)를 차례대로 hue(색상), saturatuin(채도), lightness(밝기)를 나타낸다. 색상은 색의 3요소 중 하나로 각도를 기준으로 색상을 둥글게 배치한 색상환을 표시한다. 채도는 색의 3요소 중 하나로 %로 표시, 아무 것도 섞이지 않은 상태가 채도가 가장 높은 상태이다. 채도가 0%면 회색 톤, 100%면 순색으로 표시되고 밝기도 %로 표시하는데 0%가 가장 어둡고 100%가 가장 밝다.

HSLA색상

hsla에서 맨 끝의 a 즉 a(alpha)는 불투명도 값을 나타내는 것으로 0부터 1까지의 값중에서 사용할 수 있다. 1은 완전 불투명한 것이고 0.7이나 0.3처럼 숫자가 작아질수록 조금씩 투명해지다가 0이 되면 완전히 투명해진다.

색상 이름 표기법

red나 yellow,black,pink처럼 잘 알려진 색상 이름으로 색상을 표기할 수 있는데 모든 브라우저에서 할 수 있는 색상을 웹 안전 색상이라고 한다. 16가지 기본 색상 (aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow)을 포함해 모두 216가지이다.

transparent 색상

transparent는 완전히 투명한 색상을 나타낸다 검정색에 알파 값을 0으로 한 것으로 rgba(0, 0, 0, 0)과 같다.