UI를 한층 돋보이게 만드는 가장 확실한 방법은 바로 적절한 색상 팔레트를 선택하는 것입니다. 이 튜토리얼에서는 UI를 제작하는 과정에서 요소, 글꼴 등 거의 모든 것에 색상을 지정하는 것이 얼마나 쉬운지 차근차근 배워보겠습니다.
CSS에서 색상을 추가할 때는 color 데이터 타입을 사용합니다. 이 데이터 타입은 표준적인 빨강(Red), 초록(Green), 파랑(Blue), 즉 RGB 형식으로 색상을 나타냅니다.
color 구문(Syntax)
CSS에서 색상을 정의하는 방법은 크게 네 가지가 있습니다.
- 키워드 사용: 'red', 'white', 'yellow'처럼 문자열로 입력하거나 #fff처럼 16진수로 입력
- 16진수 표기법: 예를 들어 #fff
rgb()또는rgba()함수 표기법 사용hsl(),hsla()같은 HSL 계열 함수 사용
키워드 식별자 사용하기
색상이 필요한 요소에 가장 간단하게 색상을 추가하는 방법은 키워드를 활용하는 것입니다.
다만 배경인지, 텍스트인지, 요소 자체인지에 따라 어떤 속성을 사용해야 하는지에 미묘한 차이가 있다는 점에 유의하세요. 여기서는 가장 익숙한 예제인 버튼을 사용해 보겠습니다.
<button class="color">Color Me</button>
버튼 요소에 색상을 입히는 방법은 두 가지입니다. background-color 속성을 사용하거나 color 속성을 사용하는 것입니다. 이때 color 속성은 텍스트 색상을, background-color 속성은 배경색을 변경합니다. 그럼 버튼을 선택하고 직접 색상을 추가해 보겠습니다!
생각보다 쉽죠?
rgb(), rgba() 그리고 hsl() 함수
앞서 키워드를 사용해 특정 색상 속성에 색상을 추가하는 방법을 살펴봤습니다. 사용 가능한 모든 키워드는 색상 치트시트에서 확인할 수 있습니다. 키워드 색상만으로도 폭넓은 색상을 표현할 수 있지만, 원하는 색을 정확히 지정하기에는 한계가 있을 수 있습니다.
키워드 색상을 비롯한 대부분의 색상은 Hex RGB 또는 RGB 10진수로도 표현할 수 있습니다. 예를 들어 'black'은 #000000이며, 10진수로는 0,0,0입니다. 16진수나 10진수 방식을 사용하면 키워드보다 훨씬 더 세밀한 색상을 지정할 수 있습니다.
RGB 10진수 값을 쉽게 적용하는 방법은 rgb() 함수를 사용하는 것입니다. 각 채널 값의 최대값은 255입니다. 앞서 작성한 키워드 색상 코드를 이 두 가지 방식으로 바꿔 보겠습니다.
button.color {
/* RGB 및 10진수 */
color: #fff;
background-color: rgb(210,105,30);
}
눈치채셨나요? black(#000000)처럼 같은 문자가 반복될 때는 위에서 white를 #fff로 표기한 것처럼 처음 세 자리만 입력해도 됩니다. 물론 #ffffff처럼 여섯 자리를 모두 써도 결과는 동일합니다.
색상을 지정하는 또 다른 방법은 hsl() 함수를 사용하는 것입니다. HSL은 색조(Hue), 채도(Saturation), 명도(Lightness)의 약자입니다. 명도는 흰색(100%)부터 검은색(0%)까지의 백분율을 의미하고, 채도 역시 백분율이지만 회색을 기준으로 하며 100%일 때 '완전한' 색이 됩니다. 색조는 RGB를 기반으로 한 색상환에서의 각도(0~360도)를 나타내며, 0도는 빨강, 120도는 초록, 240도는 파랑입니다. 처음 들으면 다소 복잡하게 느껴질 수 있습니다 😅
Visual Studio 같은 코드 에디터는 색상 선택기를 제공합니다. hsl()을 직접 입력한 후 커서를 올려보세요. 색상 선택기가 나타나는 것을 확인할 수 있습니다.
선택기의 좌측 영역에서는 색조를, 나머지 두 개의 막대에서는 채도와 명도를 조절할 수 있습니다. 직접 만져보면서 원하는 색상을 찾아보세요. HSL은 특히 음영(shade)을 만들 때 유용하며, 채도와 명도를 조절해 미세하게 톤을 다듬을 수 있습니다. 그래서 자신만의 작업 방식에 맞춰 HSL을 선호하는 개발자들도 많습니다.
색상 불투명도 조절하기
rgb와 hsl 함수는 각각 rgba(), hsla() 형태로도 표현할 수 있다는 점을 눈치챘을 겁니다. 여기서 'a'는 알파(alpha)를 의미하며, 사실상 투명도·불투명도를 뜻합니다. 0은 완전히 투명, 1은 완전히 불투명 상태입니다.
불투명도를 조절하면 색상을 더욱 정교하게 다듬을 수 있습니다. 버튼 색상의 불투명도를 조절하며 이번 튜토리얼을 마무리해 보겠습니다.
button.color {
color: #fff;
background-color: rgba(210,105,30, 0.7);
}
불투명도를 적용하니 배경과 텍스트의 대비가 좋아져 훨씬 잘 읽히네요!
