CSS에서 색상을 정의하는 4가지 방법

로

핵심 요약

  • 색상 이름 사용: CSS는 145가지 색상 이름을 제공하여 색상 선택을 간편하게 만들지만, 선택의 폭이 제한적이라 디자인 요구사항을 정확히 충족시키기 어려울 수 있습니다.
  • 16진수 색상 코드: 16진수 코드는 다소 복잡해 보일 수 있지만, 다양한 색상 옵션과 세밀한 맞춤 설정을 제공합니다.
  • RGB 및 RGBA 색상 값: RGB는 숫자를 이용하여 색상을 정밀하게 제어할 수 있고, RGBA는 투명도를 추가합니다. 접근성을 고려한 색상 조합을 선택하는 것이 중요합니다.

색상은 CSS에서 가장 자주 사용되는 속성 중 하나이며, 웹사이트의 시각적 정체성, 분위기 및 사용자 경험을 만드는 데 중요한 역할을 합니다. CSS는 다양한 색상 지정 방법을 제공하며, 각각 특정 디자인 요구와 선호도에 맞게 활용할 수 있습니다.

색상 정의의 중요성은 간과하기 쉽지만, 색상 선택은 웹사이트의 전체적인 모습과 느낌에 큰 영향을 미칠 수 있습니다. 다양한 색상 지정 방법의 차이점을 이해하고, 이를 효과적으로 사용하면 시각적으로 매력적인 웹사이트를 만들 수 있습니다.

1. 색상 이름 활용하기

CSS는 이름을 사용하여 색상을 지정하는 편리한 방법을 제공하며, 총 145가지 색상 이름을 사용할 수 있습니다. 이러한 이름은 “빨간색”, “녹색”, “파란색”과 같은 기본적인 색상부터 “산호색”, “라벤더색”과 같은 좀 더 구체적인 색상까지 다양합니다.

색상 이름을 사용하는 방법은 간단합니다. “red”와 같은 색상 이름을 선택하고, 해당 이름을 색상 값을 필요로 하는 CSS 속성에 사용하면 됩니다. 이러한 속성에는 color, background-color는 물론 테두리 색상, 윤곽선 색상, 텍스트 그림자 등도 포함됩니다.

색상 이름은 프로토타입 제작 시 임시 색상이 필요하거나, 코드를 읽기 쉽게 유지하고 싶을 때 유용합니다. 사용법은 다음과 같습니다.

 color_property: color_name;

위 코드에서 color_name을 원하는 색상 이름으로 변경하면 됩니다. 예를 들어, 단락의 텍스트 색상을 빨간색으로 설정하려면 다음과 같이 코드를 작성합니다.

 p {
        color: red;
    }

위 코드를 실행하면 단락의 텍스트가 빨간색으로 표시됩니다.

장점: CSS 코드에서 이해하기 쉽고, 초보자에게 친숙하며, 다양한 브라우저에서 잘 작동합니다. 빠른 디자인 구상에 유용합니다.

단점: 색상 옵션이 제한적이고, 원하는 정확한 색상을 제공하지 못하여 디자인 창의성이 제한될 수 있습니다. 또한, 엄격한 접근성 요구 사항을 항상 만족하지 못할 수 있으며, 이전 시스템에서는 지원이 다를 수 있습니다.

2. 16진수 색상 코드 사용법

16진수 색상 코드는 종종 “헥스 코드”라고 불리며, 웹 디자인에서 색상을 지정하는 가장 일반적인 방법 중 하나입니다. 16진수 코드는 숫자와 문자(0-9, A-F)의 6자리 조합으로 구성되며, 색상의 빨간색, 녹색, 파란색(RGB) 구성 요소의 혼합을 나타냅니다.

사용하기는 간단하지만, 작동 방식을 이해하기 어려울 수 있습니다. 16진수 코드에 대해 자세히 알아봅시다. 다음은 CSS에서 16진수 코드를 사용하는 기본 예입니다.

 color: #RRGGBB;

위 형식에서 RR, GG, BB는 각각 빨간색, 녹색, 파란색 구성 요소를 나타냅니다. 각 구성 요소의 범위는 00(강도 없음)부터 FF(최대 강도)까지입니다. 예를 들어, 웹사이트 헤더의 배경색을 특정 파란색 음영으로 설정하려면 다음과 같은 16진수 코드를 사용할 수 있습니다.

 header {
        background-color: #336699;
    }

위 코드를 실행하면 진한 파란색이 생성됩니다.

만약 세 구성 요소 각각이 동일한 문자를 두 번 반복한다면, 약칭을 사용할 수도 있습니다. 위의 예는 다음과 같이 작성할 수 있습니다.

 header {
        background-color: #369;
    }

장점: 16진수 색상 코드는 다양한 색상 옵션을 제공하므로, 세밀하고 사용자 정의된 색상을 만들 수 있습니다. 색상 선택을 원활하게 제어할 수 있어 복잡한 디자인 요구에 이상적입니다.

단점: 16진수 코드는 강력하지만, 색상 이름보다 덜 직관적일 수 있습니다. 특정 색상 값을 기억하기 어려울 수 있지만, 16진수 코드를 찾아주는 도구를 활용하여 쉽게 관리할 수 있습니다.

3. RGB 및 RGBA 색상 값

16진수 코드와 마찬가지로, RGB 및 RGBA 형식을 사용하면 빨간색, 녹색, 파란색 구성 요소별로 색상을 지정할 수 있습니다. 이번에는 더 친숙한 정수값을 사용할 수 있습니다.

RGB 색상 값

RGB 색상 값은 CSS에서 색상을 정의하는 두 번째로 많이 사용되는 방법입니다. “RGB”는 빨간색, 녹색, 파란색을 나타내며, CSS 함수로 표현됩니다. 괄호 안에는 각 색상 채널에 0부터 255까지의 값을 할당합니다. 이 값을 통해 색상의 빨간색, 녹색, 파란색 강도를 제어할 수 있습니다.

사용법은 다음과 같습니다.

 rgb(red_value, green_value, blue_value);

red_value, green_value, blue_value를 해당 숫자 값으로 대체하면 됩니다. 예를 들어, 다음 이미지와 같이 흰색, 검정색, 빨간색 색상을 얻을 수 있습니다.

세 가지 색상 채널(빨간색, 녹색, 파란색)을 모두 최대값 255로 설정하면 각 채널의 강도가 최대가 되어 흰색이 생성됩니다.

 .white-box {
        color: rgb(255, 255, 255);
    }

세 가지 색상 채널을 모두 최소값인 0으로 설정하면, 각 채널에 색상이 없음을 나타내며, 결과적으로 검정색이 됩니다.

 .black-box {
        color: rgb(0, 0, 0);
    }

빨간색 채널을 최대값인 255로 설정하고, 다른 채널을 최소값인 0으로 유지하면 빨간색이 생성됩니다.

 .red-box {
        color: rgb(255, 0, 0);
    }

RGBA 색상 값

RGBA는 RGB와 동일한 방식으로 작동하지만, 알파 값을 포함한다는 점만 다릅니다. RGBA의 “A”는 알파를 나타내며, 선택한 색상의 투명도 또는 불투명도 수준을 결정합니다. 값이 0이면 색상이 완전히 투명해지고, 값이 1이면 색상이 완전히 불투명해집니다.

RGBA는 반투명 배경이나 희미한 텍스트와 같이 다양한 투명도 수준이 필요한 요소를 만들 때 특히 유용합니다. 전체 사용법은 다음과 같습니다.

 color: rgba(red_value, green_value, blue_value, alpha_value);

여기서 red_value, green_value, blue_value는 RGB와 마찬가지로 색상 채널을 나타내고, alpha_value는 투명도 수준을 지정합니다.

 div {
        background-color: rgba(0, 128, 0, 0.5);
    }

위 예시에서, 알파 값 0.5는 녹색에 50% 투명도를 할당하여 그 아래의 내용이 비쳐 보이도록 합니다.

장점: RGB 및 RGBA를 사용하면 색상을 정밀하게 제어할 수 있어 시각적으로 매력적인 디자인을 만들 수 있습니다. 다양한 웹 브라우저와 호환되므로 선택한 색상이 일관되게 표시됩니다.

단점: 접근 가능한 색상 조합을 만드는 것이 어려울 수 있습니다. 특히 RGBA에서 투명도를 사용할 때 명암비에 주의를 기울이는 것이 중요합니다. WCAG 지침을 참조하면 디자인의 접근성을 확보하는 데 도움이 될 수 있습니다.

4. HSL 및 HSLA 색상 값

HSL은 색조(Hue), 채도(Saturation), 밝기(Lightness)의 약자이며, 색상을 정의하는 또 다른 CSS 함수입니다. RGB와 마찬가지로, HSL은 숫자 값을 사용하여 색상을 표현하지만, 방식이 다릅니다. 디자인 앱 또는 UI 구성 요소에서 HSL 값을 자주 접할 수 있습니다.

색조(Hue): 0부터 360까지의 색상환 각도를 사용하여 색상 자체를 나타냅니다. 각 각도가 다른 색상에 해당하는 원 위의 한 점을 선택한다고 상상해보세요. 예를 들어, 빨간색은 0도와 360도, 녹색은 120도, 파란색은 240도입니다.

채도(Saturation): 채도는 색상의 선명도 또는 강도를 결정합니다. 색상과 회색 사이의 관계를 정의하며, 0%는 완전한 회색조(채도 낮음)이고, 100%는 완전 포화(선명하고 순수함)를 나타냅니다.

밝기(Lightness): 밝기는 색상이 얼마나 밝거나 어두운지를 나타냅니다. 검정색(0%)과 흰색(100%) 사이의 스펙트럼에서 색상의 위치와 관련이 있습니다. 50% 값은 일반적인 색상을 나타내고, 50% 미만의 값은 색상을 어둡게 하고, 50% 이상의 값은 색상을 밝게 합니다.

HSL 외에도 HSLA가 있는데, 여기서 “A”는 “알파”를 나타냅니다. 이는 RGBA의 “A”와 유사하며 투명도를 의미합니다.

사용법은 다음과 같습니다.

 color: hsl(hue_value, saturation_percentage, lightness_percentage);

hue_value, saturation_percentage, lightness_percentage를 각 구성 요소에 맞는 값으로 대체하면 됩니다. 예를 들면 다음과 같습니다.

 div {
        background-color: hsl(120, 100%, 50%);
    }

위의 예에서 div 요소의 배경색은 HSL 값을 사용하여 생생한 녹색으로 설정됩니다. 120은 색상(녹색)을 나타내고, 100%는 최대 채도를 나타내고, 50%는 밝기를 균형 잡힌 수준으로 설정합니다.

장점: HSL 및 HSLA는 CSS 사용자 정의 속성을 활용하여 다양한 색상 계산을 제공합니다. 최신 브라우저와 호환성이 뛰어나며, 색상 밝기를 쉽게 조정할 수 있습니다.

단점: HSL을 배우려면 색조 및 채도와 같은 색상 과학을 이해해야 하며, 이는 익숙한 RGB 색상보다 더 어려울 수 있습니다.

CSS 색상의 힘을 활용하기

이 외에도 다양한 방법이 존재합니다. CSS에서 색상을 정의하는 다양한 형식을 탐색하면서, 웹사이트의 모양, 분위기 및 사용자 경험을 형성하는 색상의 힘을 기억하세요.

간단한 색상 이름, 16진수 코드, RGB 또는 HSL 중 어떤 색상 형식을 선택하든, 이는 사용자에게 웹사이트가 어떻게 인식될지에 큰 영향을 미칠 수 있습니다. 따라서 디자인 목표에 가장 적합한 색상 정의를 실험하고 배우며 찾아보세요.