Computer >> 컴퓨터 >  >> 프로그래밍 >> HTML

HTML 색상 스타일 완벽 가이드: Hex, RGB, HSL 표기법

웹사이트에 뛰어난 시각적 인상과 사용자 경험을 부여하려면 색상 활용이 매우 중요합니다. HTML에서는 다양한 방식으로 색상을 지정할 수 있으며, 그중에서도 Hex 코드, RGB 값, HSL 값 세 가지 방법이 가장 널리 사용됩니다. 이 글에서는 각 표기법의 개념과 함께 실제 동작하는 예제 코드를 통해 웹페이지에 색상을 적용하는 방법을 자세히 알아보겠습니다.

Hex 코드 (16진수 색상 표기법)

16진수(Hexadecimal) 색상 코드는 6자리 숫자와 문자의 조합으로 색상을 표현하는 방식입니다. 앞의 두 자리(RR)는 빨간색(Red) 값을, 다음 두 자리(GG)는 초록색(Green) 값을, 마지막 두 자리(BB)는 파란색(Blue) 값을 각각 나타냅니다.

16진수 색상 값은 Adobe Photoshop과 같은 그래픽 편집 소프트웨어에서 손쉽게 얻을 수 있으며, 모든 16진수 코드 앞에는 샵 기호(#)가 붙습니다. 참고로 앞자리가 같은 숫자가 반복되는 경우 3자리로 축약하여 쓸 수도 있습니다. 예를 들어 #FF0000은 #F00으로 줄여 표현할 수 있습니다.

아래는 16진수 표기법으로 표현된 대표적인 색상들의 예시입니다.

HTML 색상 스타일 완벽 가이드: Hex, RGB, HSL 표기법

그럼 HTML에서 Hex 스타일을 적용하여 테이블 열(column)의 배경색을 지정하는 예제를 살펴보겠습니다.

예제

<!DOCTYPE html>
<html>
<head>
<style>
    table, th, td {
        border: 2px solid black;
    }
</style>
</head>
<body>
<h2>Result</h2>
<table>
    <colgroup>
        <col span = "3" style = "background-color:#00FF00;">
        <col style = "background-color:#00FFFF;">
    </colgroup>
    <tr>
        <th>Id</th>
        <th>Name</th>
        <th>Percentage</th>
        <th>Rank</th>
    </tr>
    <tr>
        <td>009</td>
        <td>Tom</td>
        <td>98</td>
        <td>1</td>
    </tr>
    <tr>
        <td>011</td>
        <td>Kieron</td>
        <td>97</td>
        <td>2</td>
    </tr>
    <tr>
        <td>039</td>
        <td>Gayle</td>
        <td>95</td>
        <td>3</td>
    </tr>
    <tr>
        <td>017</td>
        <td>Shaun</td>
        <td>92</td>
        <td>4</td>
    </tr>
    <tr>
        <td>009</td>
        <td>Kane</td>
        <td>91</td>
        <td>5</td>
    </tr>
    <tr>
        <td>025</td>
        <td>Steve</td>
        <td>87</td>
        <td>6</td>
    </tr>
    <tr>
        <td>013</td>
        <td>Jack</td>
        <td>85</td>
        <td>7</td>
    </tr>
    <tr>
        <td>023</td>
        <td>Tim</td>
        <td>84</td>
        <td>8</td>
    </tr>
</table>
</body>
</html>

실행 결과

위 코드를 실행하면 처음 3개 열은 녹색(#00FF00), 마지막 열은 청록색(#00FFFF) 배경으로 표시됩니다.

HTML 색상 스타일 완벽 가이드: Hex, RGB, HSL 표기법

RGB 색상 값

RGB 색상 값은 rgb( ) 속성을 사용하여 지정합니다. 이 속성은 빨간색(Red), 초록색(Green), 파란색(Blue)에 해당하는 세 개의 값을 순서대로 받으며, 각 값은 0부터 255 사이의 정수 또는 백분율(%)로 표현할 수 있습니다. 예를 들어 rgb(255, 0, 0)은 순수한 빨간색을 의미합니다.

아래는 RGB 방식으로 표현된 몇 가지 색상 예시입니다.

HTML 색상 스타일 완벽 가이드: Hex, RGB, HSL 표기법

이번에는 HTML에서 RGB 스타일을 적용하여 색상을 표현하는 예제를 확인해 보겠습니다.

예제

<!DOCTYPE html>
<html>
<head>
<style>
    table, th, td {
        border: 2px solid black;
    }
</style>
</head>
<body>
<h2>Result</h2>
<table>
    <colgroup>
        <col span = "3" style = "background-color:rgb(255,0,0);">
        <col style = "background-color:rgb(255,255,0);">
    </colgroup>
    <tr>
        <th>Id</th>
        <th>Name</th>
        <th>Percentage</th>
        <th>Rank</th>
    </tr>
    <tr>
        <td>009</td>
        <td>Tom</td>
        <td>98</td>
        <td>1</td>
    </tr>
    <tr>
        <td>011</td>
        <td>Kieron</td>
        <td>97</td>
        <td>2</td>
    </tr>
    <tr>
        <td>039</td>
        <td>Gayle</td>
        <td>95</td>
        <td>3</td>
    </tr>
    <tr>
        <td>017</td>
        <td>Shaun</td>
        <td>92</td>
        <td>4</td>
    </tr>
    <tr>
        <td>009</td>
        <td>Kane</td>
        <td>91</td>
        <td>5</td>
    </tr>
    <tr>
        <td>025</td>
        <td>Steve</td>
        <td>87</td>
        <td>6</td>
    </tr>
    <tr>
        <td>013</td>
        <td>Jack</td>
        <td>85</td>
        <td>7</td>
    </tr>
    <tr>
        <td>023</td>
        <td>Tim</td>
        <td>84</td>
        <td>8</td>
    </tr>
</table>
</body>
</html>

실행 결과

처음 3개 열은 빨간색(rgb(255,0,0)), 마지막 열은 노란색(rgb(255,255,0)) 배경으로 출력됩니다.

HTML 색상 스타일 완벽 가이드: Hex, RGB, HSL 표기법

HSL 색상 값

HTML에서는 HSL 방식으로도 색상을 설정할 수 있습니다. 여기서 'H'는 색조(Hue), 'S'는 채도(Saturation), 'L'은 명도(Lightness)를 의미합니다. 색조는 0~360도의 각도 값으로 색상환上的 위치를 나타내고, 채도와 명도는 각각 0~100% 범위의 백분율로 지정합니다. HSL은 사람이 색을 인지하는 방식과 유사하여 원하는 색감을 직관적으로 조정할 수 있다는 장점이 있습니다.

HTML에서 HSL 스타일을 적용하여 색상을 표현하는 예제를 살펴보겠습니다.

예제

<!DOCTYPE html>
<html>
<head>
<style>
    table, th, td {
        border: 2px solid black;
    }
</style>
</head>
<body>
<h2>Result</h2>
<table>
    <colgroup>
        <col span = "3" style = "background-color: hsl(300, 75%, 85%); ">
        <col style = "background-color: hsl(200, 30%, 40%);">
    </colgroup>
    <tr>
        <th>Id</th>
        <th>Name</th>
        <th>Percentage</th>
        <th>Rank</th>
    </tr>
    <tr>
        <td>009</td>
        <td>Tom</td>
        <td>98</td>
        <td>1</td>
    </tr>
    <tr>
        <td>011</td>
        <td>Kieron</td>
        <td>97</td>
        <td>2</td>
    </tr>
    <tr>
        <td>039</td>
        <td>Gayle</td>
        <td>95</td>
        <td>3</td>
    </tr>
    <tr>
        <td>017</td>
        <td>Shaun</td>
        <td>92</td>
        <td>4</td>
    </tr>
    <tr>
        <td>009</td>
        <td>Kane</td>
        <td>91</td>
        <td>5</td>
    </tr>
    <tr>
        <td>025</td>
        <td>Steve</td>
        <td>87</td>
        <td>6</td>
    </tr>
    <tr>
        <td>013</td>
        <td>Jack</td>
        <td>85</td>
        <td>7</td>
    </tr>
    <tr>
        <td>023</td>
        <td>Tim</td>
        <td>84</td>
        <td>8</td>
    </tr>
</table>
</body>
</html>

위 코드를 실행하면 다음과 같은 결과가 출력됩니다. 처음 3개 열은 연한 분홍색 계열(hsl(300, 75%, 85%)), 마지막 열은 어두운 청록색 계열(hsl(200, 30%, 40%))로 표시됩니다.

HTML 색상 스타일 완벽 가이드: Hex, RGB, HSL 표기법

마무리

지금까지 HTML에서 색상을 지정하는 대표적인 세 가지 방법, 즉 16진수 Hex 코드, RGB 값, HSL 값을 알아보았습니다. Hex 코드는 디자인 도구와의 호환성이 뛰어나고, RGB는 빛의 삼원색 기반으로 직관적이며, HSL은 색조·채도·명도를 기준으로 색감을 미세하게 조정하기에 적합합니다. 상황에 맞는 표기법을 선택하여 웹페이지의 완성도를 한층 높여 보시기 바랍니다. 또한 rgba(), hsla() 형태를 사용하면 마지막에 알파 값(투명도)을 추가하여 반투명한 색상도 표현할 수 있습니다.