자바스크립트로 RGB 색상표 출력하기: HTML RGB 색상 코드표 만들기

소개

RGB 색상 코드는 컴퓨터가 색을 이해하는 방식 중 하나로, 빨강(R), 초록(G), 파랑(B)의 각 색상을 조합하여 다양한 색을 표현합니다. 이 블로그 포스트에서는 이 RGB 색상 코드를 사용하여 자바스크립트로 HTML RGB 색상 코드표를 만들어보려고 합니다.

RGB 색상 코드의 작동 원리

RGB 색상 코드는 흔히 16진수나 10진수로 표현됩니다. 컴퓨터는 이 코드를 8비트로 끊어서 처리하며, 각각의 8비트는 옥텟(Octet)이라 불리는 단위로 구성됩니다. 첫 번째 옥텟은 빨간색(R)을 나타내고, 두 번째 옥텟은 초록색(G), 세 번째 옥텟은 파란색(B)을 나타냅니다. 각 옥텟의 값이 0이면 해당 색상의 빛이 꺼져 어두운 색이 되며, 1로 채워지면 밝은 색이 됩니다. 예를 들어, #000000은 검은색을, #FFFFFF는 흰색을 나타냅니다.

흑백 색상표 만들기

흑백 색상표를 만들기 위해 먼저 빨간색(R) 옥텟을 0부터 255까지 증가시키면서 각각의 색상 코드를 생성합니다. 아래는 이에 대한 자바스크립트 코드 예시입니다.

var r, colorT;

for (var k = 0; k < 256; k += 4) {
    r = k.toString(16);
    if (r.length < 2) r = "0" + r;

    colorT = r + r + r; // 모든 옥텟에 같은 값을 사용하여 흑백 색상 생성

    // HTML 코드로 색상 표시
    document.write(`
        <div style="float:left; font-weight:bold;
                    text-align:center; width:120px;
                    height:20px; background-color:#${colorT};">
            #${colorT}
        </div>
    `);
}

다채로운 색상표 만들기

이제 다양한 색상을 생성하기 위해 세 개의 옥텟을 모두 다르게 조합하여 색상 코드를 생성합니다. 아래는 이에 대한 자바스크립트 코드 예시입니다.

var r, g, b, colorT;

for (var i = 0; i < 256; i += 25) {
    for (var j = 0; j < 256; j += 16) {
        for (var k = 0; k < 256; k += 18) {
            r = i.toString(16);
            if (r.length < 2) r = "0" + r;

            g = j.toString(16);
            if (g.length < 2) g = "0" + g;

            b = k.toString(16);
            if (b.length < 2) b = "0" + b;

            colorT = r + g + b; // 각각의 옥텟을 다르게 조합

            // HTML 코드로 색상 표시
            document.write(`
                <div style="float:left; font-weight:bold;
                            text-align:center; width:120px;
                            height:20px; background-color:#${colorT};">
                    #${colorT}
                </div>
            `);
        }
    }
}

결론

이렇게 자바스크립트를 사용하여 RGB 색상 코드표를 만들어보았습니다. RGB 색상 코드를 이해하고 활용한다면 다양한 색상을 생성하고 조합하여 원하는 디자인을 구현할 수 있을 것입니다. 각 옥텟의 조합에 따라 다양한 색이 만들어지므로 실험해보며 다양한 조합을 찾아보세요.

html5css2018

이 블로그 검색