CSS 단위 part-2 - by. UXKM

색상 이름

색상 이름(color keyword)을 지정하는 방법 ex) red, green, blue...등
색상을 지정하기 위해 키워드(red, blue…)를 사용할 수 있습니다. 사용이 간편하다는 장점이 있으나 표현할 수 있는 색상의 수는 제한됩니다.

HEX 코드

HEX 코드 단위(Hexadecimal Colors)로 지정하는 방법(16진수)입니다. ex) #000000...등

다음 색상 값은 모두 동일합니다.
#f00
#ff0000
rgb(255,0,0)
rgb(100%, 0%, 0%)
예: #fb0 = #ffbb00 / #fff = #ffffff

각각의 HTML 코드는 "#"와 6자리 숫자로 되어있습니다. 이 숫자는 16진법의 숫자 시스템입니다. 예를 들면 16진법에서 "FF"는 십진법에서의 숫자 25를 나타냅니다.

HTML컬러 코드에서 처음 두 자리의 상징(#'00'9AFF)은 빨강색의 강도를 나타냅니다. 00는 최소값이며 FF는 최대값을 의미합니다.
세 번째와 네 번째(#00'9A'FF)는 녹색의 강도를 표현하며 다섯 번째 및 여섯 번째(#009A'FF')는 파랑의 강도를 나타냅니다.
빨강, 녹색 그리고 파랑의 강도를 조합하여 희망하는 컬러를 만들 수 있습니다.
만약 각 색을 표현하는 두 자릿수의 코드값이 각각 같은 경우, 각각 1자리로 줄여 사용이 가능합니다.(예 : #0099FF → #09F / #009AFF → #09AF(×))
코드값에 영문이 들어가는 경우, 대소문자를 가리지 않으나 소문자 사용을 권장합니다.(예 : #009AFF(○) / #009aff(○))

RGB

RGB(Red, Green, Blue) rgb(255, 255, 0)
RGB로 표현할 때는 0과 255 사이의 숫자 또는 백분율 0% 100% 사이로 표현합니다.
rgb(0,0,255) = rgb(0%,0%,255%)

RGBA

RGBA(Red, Green, Blue, Alpha/투명도) rgba(255, 255, 0, 1)
RGB 색상에 alpha(투명도)가 추가된 것입니다.
alpha 값은 0.0(완전 투명) 과 1.0(완전 불투명) 사이 입니다.

HSL

HSL(Hue/색상, Saturation/채도, Lightness/명도) hsl(0, 100%, 25%)
CSS 3에서 rgb색상에 대한 보완으로 hue,saturation,lightness 색상값을 추가했습니다.
hue 는 0~360 사이의 숫자.( 0 또는 360은 red, 120은 green, 240은 blue)
saturation은 0%~100%(0%는 회색 빛, 100%는 원래의 완전한 색상)
lightness은 0%~100%(0%는 검정색, 100%는 흰색)

HSLA

HSLA(Hue, Saturation, Lightness, Alpha) hsla(60, 100%, 50%, 1)
HSL에 ahpha(투명도)가 추가된 것입니다.