CSS 컬러를 사용하는 방법과 지원 색상 영역(Color Space) 기초 (#웹컬러, 컬러이름, RGB, HSL, HWB, LCH, LAB)

Modern CSS, 흔히 최신 웹 페이지를 제작하는데 필요한 모던 CSS 속성에서 컬러 속성은 가장 빈번하게 사용하는 탑 티어 CSS 속성입니다.

많이 자주 사용하지만 많은 개발자와 웹 디자이너에게 웹에서 표현하는 컬러 값 표현을 편하게 사용하는 것은 그렇게 만만치 않습니다.

CSS로 표현하는 컬러 속성 값은 평소에는 우리가 사용할 일이 없는 16진수(#FABB88) 값이거나, CSS 속성 값 표현으로도 생소한 함수형 표현(rgb(255,128,128,. 5))으로 값을 정의합니다.

다른 CSS 속성과 달리 컬러 속성 값은 색상 공간이나 색상의 혼합에 대한 기초 개념이 있어야 하기 때문에 제대로 이해를 하는데 많은 시간이 걸립니다. 그리고 그전까지는 대체로 좀 더 싸 보이는 고급스럽지 않은 색상과 원색 계열만을 주로 사용하는 수준에 머무르게 됩니다.

그리고 16진수 웹 컬러 표현이나 RGB() 웹 컬러에 익숙해질 무렵 hsl(15deg, 95%, 40%) 라던가 hsl(var(--hue), 100%, 50%)와 같은 처음 보는 이상한 컬러 표현 방법들까지 마주하게 됩니다.

굳이 풀어서 설명을 하면 hsl(15deg, 95%, 40%) 컬러 값은 휘도 15도, 채도 95%, 명도 40% 인 색상입니다. 대충 주홍색(진한 주황) 색상이고, 16진수 웹 컬러로는 #c73605, RGB() 컬러 표현으로는 rgb(199,54,5)가 됩니다. 빨강이 많고 녹색이 약간, 그리고 파랑은 거의 없는 색상입니다.

HSL(휘도, 채도, 명도)로 표현하는 색상을 웹에서 왜 사용하냐의 문제는 색상의 접근성과 원하는 색상을 얻는 방식의 차이에 대한 이론적인 부분이기 때문에 여기서는 그냥 넘어갑니다.

대충 사용하기 편한 경우가 있기 때문에 사용한다고 생각하면 됩니다.

웹에서 표준으로 정해져서 사용 가능한 컬러 표현 방법은 대략 7가지가 있습니다.

그중 최신의 메이저 웹브라우저들(크롬, 신형 엣지, 파이어폭스) 5가지(색상 이름, 16진수, RGB, HSL, HWB)를 지원합니다.

이외에 더 다양한 표현 방법이 새 표준으로 계속 추가되고 있으며, CSS Level 5에서 정해진 color-contrast(), color-mix() 처럼 전혀 새로운 방식으로 색상을 만드는 방법을 제공하는 기능들도 추가되고 있습니다.

뒤에서 언급하겠지만, 최근에 추가된 새로운 컬러 값 표현 방법들 중 일부는 웹 브라우저에 따라 지원하는 정도가 약간씩 다를 수 있습니다. 어떤 웹 브라우저에서는 지원하지만, 어떤 웹 브라우저에서는 지원하지 않을 수도 있기 때문에, 지원 여부를 꼭 확인하고 사용해야 하며, 최근에 추가된 색상 표현 방법은 호환성 검증이 어느 정도 완료될 때 까지는 사용하지 않는 것이 좋습니다.

뒤에서 더 자세히 설명합니다.

이름 색상 표현

이름(영문 컬러 이름)으로 색상을 표현하는 방법입니다.

가장 고전적인 방법이고, 숫자로 표현하는 색상 표현 방법보다 직관적이기 때문에 과거에는 색상 이름 표현을 많이 사용했습니다.

빨간색은 "red"(#FF0000), 보라색은 "purple"(#800080) 과 같이 영어 색상명 그대로 CSS에 사용합니다.

단, 모든 컬러 이름을 웹 브라우저에서 지원하는 것은 아니고, 표준으로 정해진 140개의 컬러 이름이 있으며, 이 색상 이름만 모던 웹 브라우저들에서 지원됩니다.

지원되는 웹 표준 색상 이름은 다음과 같습니다.(알파벳순)

색상 이름으로 색상을 표현하는 방법은 최근에는 권장하지 않으며, 사용 빈도도 급격하게 감소하고 있습니다.

표현할 수 있는 색상이 제한되어 있을 뿐만 아니라, 색상 이름이 나타내는 실제 색상이 국가나 문화권에 따라 다른 색상으로 인식될 수 있는 문제가 있어 권장하지 않고 있습니다.

모던 웹에서는 16진수 "#색상값" 사용 방법, 또는 RGB 색상 표현을 기본으로 사용하는 것을 추천합니다.

웹 컬러의 기본 16진수 #색상값 표현

현재 가장 널리 사용되는 색상 표현 방법입니다. "#"을 앞에 붙이고, 순서대로 2자리씩 R(Red), G(Green), B(Blue) 색상을 16진수로 표현해서 1600만 컬러를 표현하는 방식입니다.

#000000 ~ #FFFFFF 까지 R, G, B 색상 각각 256단계의 값을 가지게 됩니다.

빛의 3원색에 기초한 우리가 가장 잘 아는 방식의 색상 표현 방법입니다. 색상별로 2자리씩 16진수로 표현하는데 16진수가 익숙하지 않으면 초기에는 원하는 색상을 선택하는데 다소 어려움이 있을 수 있습니다.

녹색 없이 빨간색과 파란색을 반씩 넣으면 #800080 이 되고, 이 색상은 보라색이 됩니다.

자주 사용하다 보면 주요 색상들은 익숙하게 사용할 수 있게 되고, 또 몇몇 색상의 16진수 값은 외워서 사용하는 것을 추천합니다.

.colored {
	color: #AA0000;
	background-color: #98FF20;
}
.colored2 {
	color: #000000;
	background-color: #444444;
}

그리고 6자리 16진수 표현은 제한적으로 3자리로 줄여서 표현할 수도 있습니다.

R, G, B 각각의 16진수의 앞뒤 자리가 모두 같은 "#88AACC" 같은 색상 값은 "#8AC" 과 같이 3자리로 줄여서 표현할 수 있습니다.

R, G, B 일부만을 줄일 수 없으므로 반드시 RGB 색상 모두 줄일 수 있어야 합니다. 3자리로 줄일 수 있는 경우에만 제한적으로 사용합니다.

.colored {
	color: #A00;
	background-color: #98FF20;
}
.colored2 {
	color: #000;
	background-color: #444;
}

인터넷 익스플로러 호환성 문제로 사용이 봉인되어 왔지만 16진수 #색상값 표현은 색상 투명도를 설정할 수 있습니다.

#색상값 뒤에 16진수 2자리로 알파값을 추가해서 색상의 투명도를 설정할 수 있습니다.

"#FF000080"은 반투명 빨강이 되며, 배경색이 반쯤 비쳐 보이는 빨간색으로 표현됩니다.

배경 이미지가 있을 경우 배경 이미지가 붉은 톤으로 보이는 효과를 만들 수 있습니다.

.colored {
	color: #A00;
	background-color: #FF000080;
}

RGB 색상 표현

16진수 색상 표현보다 최근에 권장하고 있는 색상 표현 방법입니다. R, G, B 색상 값을 10진수로 표현(0 ~ 255) 하기 때문에 16진수보다 이해하기가 쉽고, 우리가 다른 곳에서 일상적으로 사용하는 컬러 표현 숫자 단위와 같기 때문에 가독성 또한 더 높습니다.

rgb(128,0,128)과 같이 R, G, B 색상을 0~255까지의 정수로 쉼표로 각각 구분해서 색상을 표현합니다.

16진수 #색상값 표현과 동일한 구조이며, 표현 방식만 10진수인가 16진수인가가 다르다고 생각하면 됩니다.

.colored {
	color: rgb(128,0,255);
	background-color: RGB(248, 248, 252);
}

최근 구글은 16진수 #색상값 표현보다는 rgb() 색상 표현을 사용할 것을 권장하고 있습니다.

RGB 색상 표현은 추가적으로 알파값(투명도)을 사용할 수도 있기 때문에 더 활용성이 높고, 더 보기 좋고 더 사용성이 좋은 색상을 구현할 수 있는 장점이 있습니다.

알파값은 R, G, B 색상 뒤에 4번째 인자로 정의하며, 소수점 값(0 ~ 1), 또는 퍼센트(0% ~ 100%)로 투명도를 표현하게 됩니다. 투명도 표현이므로 1, 또는 100%가 되면 완전한 투명한 색상이 되며, 배경 색상이 그대로 비쳐 보이게 됩니다.

.colored {
	color: rgb(128,0,255,50%);
	background-color: RGB(248, 248, 252, .25);
}

과거에는 알파값을 사용할 수 있는 RGB 표현으로 rgba()를 구분해서 사용했었는데, 현재는 rgb() 표현에 알파값까지 사용하는 방식이 모던 웹 브라우저에서 모두 지원되기 때문에 rgba() 표현을 따로 사용하지는 않으며, rgb() 표현으로 알파값이 있는 색상까지 모두 표현이 가능합니다.

HSL 색상 표현

HSL은 Hue, Saturation, Lightness의 첫 철자를 따서 만들어진 색상 표현입니다.

표준 용어이며, 웹 이외에도 널리 사용됩니다.

한글로는 휘도(Hue), 채도(Saturation), 명도(Lightness)라고 합니다. 우리의 인쇄 기술과 용어들 중 많은 부분이 일본에서 온 것들이기 때문에 영어 단어를 한자식으로 표현한 색상 용어들도 일본의 인쇄 용어에서 유래한 것이 많습니다.

컬러를 많이 다루는 인쇄 쪽이나 색상 전문가가 아니면 HSL을 사용할 일이 사실 좀 드뭅니다.

앞서의 2가지 색상 표현처럼 RGB에 개별 색상을 조합해서 만들어지는 색상도 아니기 때문에 개념을 이해하기도 조금 어렵습니다.

HSL 색상 표현은 hsl()로 표시하고, 인자는 3개를 사용합니다. 첫 번째 인자인 휘도(Hue)는 0 ~ 360 사이의  값으로 각도를 표현, 채도와 명도는 % 값으로 0 ~ 100% 사이의 값으로 표현합니다.

휘도 각도는 다음처럼 표현되는 컬러 원의 오른쪽 끝에서 부터 반시계 방향으로 회전하는 각도로 색상이 결정됩니다.

예를 들어 빨간색(#FF0000, rgb(255,0,0))은 HSL 표현으로 hsl(0, 100%, 50%), 또는 hsl(0deg 100% 50%) 이 됩니다.

hsl() 표현은 콤마로 구분해서 3개의 인자를 사용하는 방법과 콤마 없이 단위를 표시해서 표현하는 방법 2가지가 존재합니다. 2가지 모두 사용 가능하며, 콤마 없이 사용할 때는 공백으로 구분해서 3개의 값을 표시하고, 휘도에는 "deg"를 붙여서 각도 표기임을 명시해야 합니다.(CSS Level 4 지원)

.colored {
	color: hsl(90, 100%, 50%);
	background-color: hsl(227deg 95% 30%);
}

휘도 0에 채도 100%, 명도 50%인 색상은 우리가 아는 그 순수한 빨간색(red)이 됩니다.

휘도 값은 0 ~ 360 범위 안의 값을 가지며 범위 안의 값만 유효합니다. 범위를 넘어가는 값은 자동으로 계산되어 범위 안의 값으로 적용됩니다.

360보다 크면 360으로 나눈 나머지 각도가 사용되며, 0보다 작으면 360으로 나눈 나머지 각도만큼 반대 방향으로 회전합니다.

hsl(90deg 100% 50%)과 hsl(-270deg 100% 50%) 은 같은 색상이 됩니다.

HSL 색상 표현도 알파값을 사용할 수 있습니다.(CSS Level 4 지원)

사용하는 방식은 rgb() 색상과 같습니다.

HSL의 알파값은 hsl(90, 100%, 50%, 50%)와 같이 4번째 인자로 사용합니다. 콤마로 구분해서 0 ~ 100% 사이의 퍼센트 값, 또는 0 ~ 1 사이의 소수점 값으로 표현해야 합니다.

.colored {
	color: hsl(90, 100%, 50%, 90%);
	background-color: hsl(227deg 95% 30% / 35%);
}

HSL 색상 표현은 웹 페이지에 테마를 설정하거나, 컬러 베리에이션(Color Variation), 또는 웹페이지에 특정한 느낌을 줄 필요가 있을 때 특히 유용합니다.

웹 페이지에 사용한 색상들이 바랜 느낌을 주고 싶다면 색상의 채도(Saturation)만 전체적으로 낮춰주면 됩니다.

CSS 변수를 사용하면 전체 웹페이지에 사용한 컬러의 채도를 하나의 변수만으로 간편하게 조절할 수 있기 때문에 적은 CSS 만으로도 더 기능적으로 뛰어난 웹페이지를 만들 수 있습니다.

:root{
	--tone: 35%;
}

.colored {
	color: hsl(90, var(--tone), 50%, 90%);
	background-color: hsl(227deg var(--tone) 30% / 35%);
}

HWB 색상 표현

웹 표준으로 정해진 색상 표현 방식이지만, 아직 웹 실무에서는 거의 사용되지 않고 있습니다.

아직 어떤 방식으로 이런 색상 모델들을 잘 이용하는지 레퍼런스가 많지 않기 때문에, 활용 방법에 대한 이해가 넓지 않기 때문이기도 하고, 특정한 경우가 아니면 HSL로 대부분의 필요를 충족할 수 있기 때문이기도 합니다.

또, HSL 색상 표현에서 파생된 성격이 크기 때문에 개념적으로 유사한 점도 많이 있습니다.

HWB는 휘도(Hue), 흰 정도(Whiteness), 검은 정도(Blackness)로 색상을 표현하는 컬러 공간입니다. 각각의 의 첫 첫 철자를 따서 HWB로 표현합니다. 휘도는 HSL 색상 공간의 휘도와 같습니다. 흰 정도와 검은 정도 표현은 0 ~ 100%까지의 값으로 표현합니다.

빨간색은 HSL 색상 표현으로 hsl(0,100%,50%)이지만 HWB 색상 표현으로는 hwb(0, 0%, 0%) 이 됩니다.

빨간색은 HWB 색상 표현으로 휘도 0인 빨강톤에 흰색과 검은색이 전혀 추가되지 않은 형태로 표현됩니다.

흰 정도가 높아지면 점점 옅은 밝은 색으로 변하며, 검은 정도가 높아지면 점점 어두운 색이 됩니다. 톤만 다른 같은 계열 색상을 만들기 쉬운 색상 공간입니다.

HSL 색상 표현과 동일하게 콤마 구분 없는 표현(hwb(0del 50% 0%))을 지원하며, 알파값 표현도 지원(hwb(0deg 50% 0%/.5))합니다.

그 외의 색상 공간

참고 삼아 알아두면 좋은 색상 공간입니다. 웹 표준 색상이지만, 지원하는 웹 브라우저는 아직 애플 사파리 밖에 없습니다.

웹에서 색상 적용 결과를 확인하고 싶으면 사파리로 확인해야 합니다.

LAB 색상 표현

장치 독립 색상(Device Independant Color)을 구현하기 위한 색상 공간(Color Space)입니다.

장치 독립 색상이랑 색상을 표현하는 장치에 무관하게 같은 색상을 구현할 수 있도록 고안된 색상 개념으로 모니터에서 보는 색상이 인쇄물에서도 동일하게 보일 수 있도록, 또는 최대한 근사할 수 있도록 합니다.

예를 들어 포토샵에서 작업한 팜플랫이 프린터에서, 또는 인쇄소 출력기에서도 무리 없이 예상했던 같은 색상으로 인쇄될 수 있도록 하기 위해서 만든 색상 공간입니다.

물론, LAB 색상을 쓴다고 크게 달라지지는 않습니다. 

현실에서는 모니터와 프린터/인쇄기를 위한 컬러 프로파일을 적용해야 하고, 캘리브레이션 장비로 캘리브레이션을 따로 봐야 할 수도 있고, 사용하는 잉크 종류에 따라서도 별도의 색상 프로파일을 적용해야 할 수도 있습니다.

주로 인쇄 분야를 위해서 고안된 색상 공간이지만 웹에서도 사용할 수 있습니다.

LAB 은 명도(Lightness), A축(A axis), B축(B axis)의 첫 철자를 따서 만든 단어입니다.

A축은 green -> red, B축은 blue -> yellow의 색상 스펙트럼을 표현합니다.

명도 값은 HSL의 명도와 같습니다.

같기는 하지만 조금 다릅니다. LAB 색상 공간에서의 명도는 HSL 색상 공간에서의 명도가 100%가 최대 값인 것과 달리 400%까지 사용할 수 있습니다. 400% 명도는 무진장 울트라 다이내믹 밝은 흰색(ultra bright white) 이 됩니다.

A축과 B축은 컬러 스펙트럼의 값을 -160 ~ 160 사이의 소수점 실수 값으로 표현합니다.

LAB 컬러는 lab(52.2345% 40.1645 59.9971)(진한 주황)과 같이 표현하며, HSL과 마찬가지로 알파값을 지원합니다.

LCH 색상 표현

LAB과 유사한 색상 공간을 사용하며, 마찬가지로 장치 독립 색상을 구현하기 위한 색상 공간입니다.

주로 인쇄를 위한 용도로 사용합니다.

LCH는 명도(Lightness), 크로마(Chroma), 휘도(Hue)로 표현하는 색상 공간입니다.

HSL 색상 공간보다는 LAB 색상 공간과 유사성이 더 많으며 HSL 색상 공간의 휘도, 명도와 같은 개념을 사용하지만 사용 값의 범위가 완전히 일치하지는 않습니다.

마찬가지로 알파값을 4번째 인자에 사용할 수 있습니다.

LCH 색상 공간에서 휘도 표현은 HSL 색상 공간의 휘도 값보다는 LAB 컬러의 A축, B축 방향과 더 유사합니다.

예를 들어 LCH 색상의 90deg 휘도 값은 LAB 색상 공간에서 양의 B축 방향 색상 값과 유사하며, 180deg는 음의 A축, 그리고 270deg는 음의 B축과 유사한 색상이 됩니다.

LCH의 C 즉 크로마(Chroma)는 색상의 강도(Strength)를 표현합니다. HSL 색상 공간에서 채도(Saturation)가 하는 것과 비슷하다고 이해하면 됩니다.

개념상 유사하지 실제로는 다릅니다. 채도 값은 100%가 최대이며, 넘어서는 값은 100%로 고정되지만 크로마 값은 100을 넘을 수 있습니다.

앞서의 LAB 색상 공간에서 예를 든 진한 주황색은 LCH 색상으로는 lch(52.2345% 72.2 56.2) 이 됩니다.

웹 브라우저 호환성

이름 색상, #16진수 색상값, RGB(), HSL()은 모든 최신 브라우저들에서 지원됩니다. 

투명도를 표시하는 알파값 표현까지도 호환성 문제가 없으므로 사용에 무리가 없습니다.

LAB()과 LCH() 색상은 현재는 사파리에서만 지원됩니다. 애플 기기에서만 지원되므로 향후 다른 웹 브라우저 호환성이 검증될 때까지는 사용하지 않는 것이 좋습니다.

웹 브라우저별로 다른 색상 공간을 사용할 수 있도록 @supports 쿼리를 이용해서 구분 처리를 할 수 있습니다.

예를 들어 LCH 색상 공간을 지원하는 브라우저에서는 LCH 색상 값으로 구분해서 적용하고 싶으면 다음과 같이 @supports 쿼리를 적용할 수 있습니다.

@supports (background-color: lch(50% 150 180)) {
  .theme1 {
    color: lch(5% 50 225);
    background-color: lch(50% 150 180);
  }
}

LAB과 LCH 색상 공간은 인쇄에 특히 특화된 색상 공간이기 때문에 많은 웹 브라우저에서 지원이 되게 되면, 웹 브라우저에서 위지웍으로 만든 팜플랫을 거의 같은 색상으로 어렵지 않게 출력할 수 있게 됩니다.

완벽하지는 않겠지만, 시간이 지나면 기존의 색상 공간으로는 채우기 어려웠던 장치 독립 색상의 이점을 웹 브라우저로도 누릴 수 있게 될 수 있습니다.

CSS Level 5에서 추가된 색상 표현들

색상 값을 정의한다기 보다는 색상을 조합해서 사용하는 표현이 CSS Level 5에서 2개 추가되었습니다.

color-mix(), color-contrast() 2가지이며, CSS Level 5 명세로 제출만 되어있고 표준으로 확정되지 않았기 때문에 아직 지원하는 웹 브라우저가 없습니다. 따라서 이 글을 쓰는 시점(2022.06)에서는 이 2가지 색상 표현을 테스트조차 해볼 수 없습니다.

최종적으로는 표현 방식이 변경될 수도 있지만, 색상을 조합하거나 선택적인 조건 처리를 할 수 있도록 해주기 때문에 채택될 가능성이 높습니다.

아직은 이런 색상 표현이 생긴다 정도만 알아두면 됩니다.

color-mix()

명세에 따르면 색상 공간, 컬러1, 컬러2 3개의 인자를 받아서 두 색상의 혼합 색상을 표시합니다.

예를 들어 color-mix(in lch, red 30%, blue 50%) 색상 값은 빨강 30%와 파랑 50%를 혼합한 색상을 LCH 색상 공간의 값으로 표현합니다.

색상 블랜딩을 할 수 있기 때문에 중간 어디쯤의 색상이 어느 색상이 될지 예측하거나 계산할 필요 없이 기초 색상을 혼합해서 새로운 색상을 사용할 수 있습니다.

color-contrast()

이름대로 대비를 기준으로 색상을 선택합니다. 기준이 되는 하나의 색상과 다른 색상들을 비교해서 대비가 가장 높은 색상을 표현합니다.

예를 들어 배경색과 텍스트 색상이 더 명확하게 구분될 수 있도록 기초 컬러 중에서 어떤 컬러를 선택해야 할 때 자동으로 선택되도록 할 수 있습니다.

예를 들어 color-contrast(#AA4444 vs #AA0000, #444444, #8AAA44)와 같이 표현하며, vs 왼쪽의 색상이 기준 색상이며, vs 오른쪽의 색상들이 비교 대상인 색상들입니다. 비교 대상인 색상들 중 기준 색상과 대비가 가장 높은 색상을 선택해서 색상 값으로 사용합니다.

색상 이해를 위한 개발자 도구의 활용

개발자나 디자이너가 아니더라도 웹브라우저가 제공하는 개발자 도구의 색상 선택자를 이용하면, 여러가지 색상 표현 방법을 이용한 색상 선택을 할 수 있습니다.

또 선택한 색상이 색상 선택 방법에 따라 어떤 값으로 달라지는 지도 확인할 수 있습니다.

구글 크롬 개발자도구의 컬러 피커는 색상 공간을 자유롭게 변경할 수 있는 기능을 제공합니다.

표시 색상 숫자 값 오른쪽의 양방향 화살표를 클릭하면 색상 공간이 달라집니다. 16진수 -> RGB -> HSL -> HWB 순으로 색상 공간이 순차적으로 변합니다.