CSS 색상
CSS를 통해 색을 표현하는 방법입니다.
CSS
CSS는 색상을 표현하는 방법이 다양합니다.
16진수 표기법
웹 문서에서 색상을 표현하는 방법은 16진수로 표현하는 방법입니다. 두자리씩 묶어서 #RRGGBB 형식으로 표현하며, RR은 빨간색, GG는 초록색, BB는 파란색의 양을 표현합니다. 각 색상의 하나도 섞이지 않았음은 00부터 가득 썩였음은 FF까지 사용할 수 있습니다.
| 십진수 | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 16진수 | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | a | b | c | d | e | f |
RGB와 RGBA
웹 문서에서 색상을 표현하는 rgb(255,255,255)는 십진수를 이용하여 표현합니다. 색이 하나도 석이지 않았을 때에는 0으로 표시하고 가득섞였을 때에는 255로 표현합니다. 숫자는 색상의 양을 나타내고 a는 투명도(alpha)를 나태냅니다. 투명도는 0과 1사이 값으로 표현합니다.
rgb(red 값, green 값, blue 값);
rgba(red 값, green 값, blue 값, alpha 값);
HSL와 HSLA
웹 문서에서 색상을 표현하는 HSL은 색상(hue), 채도(saturation), 밝기(lightness)를 나타냅니다. 색상은 둥글게 배치한 색상환으로 표시하고 0도와 360에는 빨간색, 120도에서는 초록색, 240도에서는 파란색이 배치됩니다. 채도가 0%이면 회색톤, 100%이면 순색으로 표시됩니다. 밝기는 0%에서는 가장 어둡고 100%에서는 가장 밝습니다.
hsl(hue 값, saturation 값, lightness 값);
hsla(hue 값, saturation 값, lightness 값, alpha 값);
색상 이름 표기법
색상 이름을 이용하여 색을 표현 할 수 있습니다. 가장 기본적인 16가지를 포함하여 216가지의 색상 이름 표기법이 있습니다.
aqua, black, blue, fnchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow
CSS 색상
| 속성값 | 설명 |
|---|---|
| #RRGGBB | 빨강, 초록, 파랑의 색상을 16진법 두자리로 지정한 색상 표현 방법입니다. 각 요소별로 256단계로 표현합니다. |
| #RGB | 빨강, 초록, 파랑의 색상은 16진수 한자리로 지정한 색상 표현 방법입니다. 각 요소별 16단계로 표현합니다. |
| rgb(r,g,b) | 빨강, 초록, 파랑의 색상을 표현합니다. |
| rgba(r,g,b,a) | 빨강, 초록, 파랑의 색상과 투명도로 색상을 표현합니다. |
| hsl(h,s,l) | 색상, 채도, 명도로 색상을 표현합니다. |
| hsla(h,s,l,a) | 색상, 채도, 명도로 색상과 투명도로 색상을 표현합니다. |
| 색상 이름 | 미리 정의된 색상이름을 사용합니다.(red, blue...) |
색상 이름
| 이름 | 색상 값 | 이름 | 색상 값 |
|---|---|---|---|
| Black | #000000 | Navy | #000080 |
| Olive | #808000 | Marron | #800000 |
| Gray | #808080 | teal | #008080 |
| Green | #008000 | Purple | #800080 |
| Silver | #c0c0c0 | aqua | #00ffff |
| Lime | #00ff00 | Fuchsia | #ff00ff |
| White | #ffffff | Blue | #0000ff |
| Yellow | #ffff00 | red | #ff0000 |
