컬러는 미린 정의된 컬러 이름, 또는 RGB, HEX, HSL, RGBA, HSLA 값을 사용하며 명시합니다.
CSS에서, 미리 정의된 컬러 이름을 사용하여 컬러를 명시할 수 있습니다.
모든 최신 브라우저가 지원하는 140개의 표준 컬러 이름을 CSS와 HTML이 지원합니다.
HTML 요소들에 대한 background 컬러를 설정할 수 있습니다.
<h1 style="background-color:DodgerBlue;">Hello World</h1> <p style="background-color:Tomato;">Lorem ipsum...</p>
HTML 요소들에 대한 폰트 컬러를 설정할 수 있습니다.
<h1 style="color:Tomato;">Hello World</h1> <p style="color:DodgerBlue;">Lorem ipsum...</p> <p style="color:MediumSeaGreen;">Ut wisi enim...</p>
HTML 요소들에 대한 보더 컬러를 설정할 수 있습니다.
<h1 style="border:2px solid Tomato;">Hello World</h1> <p style="border:2px solid DodgerBlue;">Hello World</p> <p style="border:2px solid violet;">Hello</p>
CSS에서 RGB 값, HEX 값, HSL 값, RGBA 값, HSLA 값을 사용하여 컬러를 명시할 수 있습니다.
<h1 style="background-color:rgb(255, 99, 71);">...</h1> <h1 style="background-color:#ff6347;">...</h1> <h1 style="background-color:hsl(9, 100%, 64%);">...</h1> <h1 style="background-color:rgba(255, 99, 71, 0.5);">...</h1> <h1 style="background-color:hsla(9, 100%, 64%, 0.5);">...</h1>
RGB 컬러 값은 RED, GREEN, BLUE 광원을 나타냅니다.
CSS에서, 컬러는 아래의 공식을 사용하여 RGB 값으로 명시될 수 있습니다.
각각의 매개변수 (red, green, blue)는 0~255사이의 색상 강도(color intensity)를 정의합니다.
예를 들어, rgb(255, 0, 0)은 red가 가장 높은 값(255)으로 설정되고, 나머지 값들은 0으로 설정되었기 때문에 red로 표시됩니다.
black을 나타내기 위해, 모든 컬러의 매개변수를 0으로 설정합니다: rgb(0, 0, 0)
white를 나타내기 위해, 모든 컬러의 매개변수를 255로 설정합니다: rgb(255, 255, 255)
회색 음영 (shades of gray)은 모든 3개의 광원에 동일한 값을 사용하여 정의되곤 합니다.
RGBA 컬러 값은 알파 채널 (Alpha channel)로 RGB 컬러 값을 확장한 것이며, 컬러에 대한 불투명도 (opacity)를 지정합니다.
RGBA 컬러 값은 아래의 형식으로 지정됩니다.
알파 매개변수는 0.0(완전 투명) ~ 1.0 (완전 불투명) 사이의 숫자로 표시합니다.
hexadecimal(16진수) 컬러는 #RRGGBB로 지정하고, RR (red), GG (green), BB (blue) 16진수는 색상의 구성 요소를 지정합니다.
CSS에서 아래 형식의 16진수 값을 사용하여 컬러를 지정할 수 있습니다.
rr (red), gg (green), bb (blue)는 00 ~ ff (십진수 0~255와 동일) 사이의 16진수 값입니다.
예를 들어, #ff0000는 red가 가장 높은 값(ff)로 설정되고, 나머지는 가장 낮은 값(00)으로 설정되었기 때문에 red로 표시됩니다.
회색 음영 (shades of gray)은 모든 3개의 광원에 동일한 값을 사용하여 정의되곤 합니다.
CSS 파일에서 3 자리 HEX 코드를 볼 수 있습니다.
3 자리 HEX 코드는 6 자리 HEX 코드 중 일부에 대한 속기 표현입니다.
3 자리 HEX 코드는 다음의 형식을 가집니다.
r, g, b는 0 ~ f 사이의 값을 가진 red, green, blue 구성요소를 나타냅니다.
3자리 HEX 코드는 각 구성 요소에 대한 RR, GG, BB의 두 개의 값이 동일할 때에만 사용될 수 있습니다.
그래서 #ff00cc를 #f0c로 쓸 수 있습니다.
body { background-color: #fc9; /* same as #ffcc99 */ } h1 { color: #f0f; /* same as #ff00ff */ } p { color: #b58; /* same as #bb5588 */ }
HSL은 hue (색상), saturation (채도), lightness (명도)를 나타냅니다.
CSS에서 아래 형식의 색상, 채도, 명도를 사용하여 지정할 수 있습니다.
색상 (hue)은 0 ~ 360까지의 색상환의 각도입니다. 0은 red, 120은 green, 240은 blue입니다.
채도 (saturation)는 백분율 값이며, 0%는 회색 음영이고, 100%는 전체 색상입니다.
명도 (lightness)도 백분율 값이며, 0%는 black, 50%는 밝거나 어둡지도 않으며, 100%는 white입니다.
채도는 색의 강도로 설명할 수 있습니다.
100%는 순수한 색상이며, 회색 음영이 없습니다.
50%는 50% 회색이지만 색상을 볼 수 있습니다.
0%는 완전히 회색이며, 더 이상 색상을 볼 수 없습니다.
색상의 명도는 색상에 제공할 빛의 양으로 나타낼 수 있습니다.
0%는 빛이 없음(black)을 의미합니다.
50%는 50%의 빛 (어둡거나 밝지도 않음)을 의미합니다.
100%는 완전 밝음 (white)을 의미합니다.
회색 음영은 색상 (hue)과 채도 (Saturation)를 0으로 설정하고, 명도 (lightness)를 0%~100%사이에서 조절하여 더 어둡거나 더 밝은 음영을 가지게 됩니다.
HSLA 컬러 값은 컬러에 대한 불투명도 (opacity)를 지정하는 알파 채널 (alpha channel)로 HSL 컬러 값을 확장하는 것입니다.
HSLA 컬러 값은 아래와 같이 지정합니다.
알파 매개변수는 0.0(완전 투명) ~ 1.0 (완전 불투명) 사이의 숫자로 표시합니다.