[javascript] 자바스크립트로 rgb 색상표 출력하기 html rgb색상 코드표 만들기

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

서론

RGB 색상 코드는 다양한 컬러를 표현하는 데 사용되는 중요한 개념입니다. 컴퓨터는 이 코드를 이해하기 위해 옥텟(Octet) 단위로 해석하며, 이는 8비트로 이루어진 데이터 묶음을 나타냅니다. 이러한 옥텟은 실제로 우리가 흔히 알고 있는 10진수 형식인 0부터 255까지의 값을 가지게 됩니다.

RGB 색상 코드의 구성

RGB 색상 코드는 세 개의 옥텟으로 구성되며, 각각은 빨강(R), 녹색(G), 파랑(B)의 색상을 나타냅니다. 각 옥텟은 0부터 255까지의 값을 가질 수 있으며, 0은 해당 색상의 최소 빛의 양을 의미하고, 255는 해당 색상의 최대 빛의 양을 의미합니다. 예를 들어, #000000은 검은색을 나타내며, #FFFFFF는 흰색을 나타냅니다.

RGB 색상 코드의 출력

우리는 자바스크립트를 사용하여 RGB 색상 코드를 활용하여 다양한 색상을 출력할 수 있습니다. 아래는 RGB 색상 코드를 이용하여 256가지 색상을 출력하는 예시 코드입니다.

var r, g, b;
var colorT;

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

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

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

    colorT = r + g + b;

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

다양한 색상표 만들기

우리는 위와 같은 방법으로 256가지 색상을 출력할 수 있습니다. 더 나아가, 3중 for문을 이용하여 모든 조합의 RGB 값을 활용하여 더 다양한 색상표를 만들어낼 수도 있습니다. 예를 들어, 다음과 같이 적절한 조건으로 반복문을 설정하여 색상표를 생성할 수 있습니다.

var r, g, b;
var colorT;

for (var i = 0; i < 256; i = i + 25) {
    for (var j = 0; j < 256; j = j + 16) {
        for (var k = 0; k < 256; k = 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;

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

결론

RGB 색상 코드를 활용하여 다양한 색상을 출력하는 자바스크립트 코드를 통해 컴퓨터가 어떻게 색상을 인식하고 표현하는지에 대해 이해할 수 있었습니다. 이러한 방식으로 우리는 다양한 색상을 시각적으로 표현하고 조합할 수 있습니다. 다음에는 팔레트를 그리는 방법에 대해 살펴보도록 하겠습니다.

키워드

RGB 색상 코드, 컬러 표현, 자바스크립트, 색상표, 컴퓨터 그래픽스, 색 조합

레이싱모델 각선미