이 글에서는 숫자와 알파벳의 혼합으로 구성된 임의의 16진수 색상 코드를 생성하는 JavaScript 함수를 만드는 방법을 안내하겠습니다.

이 함수는 실행될 때마다 임의의 16진수 색상을 생성합니다.

function getRandomHexColor() {
    // Generate a random number between 0 and 16777215 (0xFFFFFF in decimal)
    const randomNumber = Math.floor(Math.random() * 16777215);
    // Convert the random number to a hexadecimal string and pad with leading zeros if necessary
    const randomHexColor = `#${randomNumber.toString(16).padStart(6, '0')}`;
    return randomHexColor;
}

// Example usage:
console.log(getRandomHexColor()); // e.g., #3e2f1b

1. 난수 생성

첫 번째 단계에서는 난수를 생성해야 하며 JavaScript Math Object 및 Math Random() 메서드를 사용하여 쉽게 이를 수행할 수 있습니다.

일반적인 무작위 방법을 생성하면 임의의 십진수가 제공됩니다. 아래 예를 참조하세요.

const randomValue = Math.random();
console.log(randomValue); // e.g., 0.123456789

하지만 0에서 16777215 사이의 임의의 숫자를 생성해야 합니다. 왜 "999999"나 6자리 숫자 대신 16777215가 필요한지 생각할 수도 있습니다. 숫자 16,777,215이기 때문에 이 8자리 숫자를 사용해야 합니다. 6자리 16진수 색상 코드로 가질 수 있는 가장 높은 값입니다.

16진수 색상 코드는 6자리 숫자를 사용하며 각 숫자는 0~9 또는 A~F일 수 있으며 각 숫자에 대해 16가지 선택이 가능합니다.

즉, 6자리 숫자로 총 16,777,216개의 다양한 색상을 만들 수 있다는 의미입니다. 가장 큰 16진수 색상 코드는 #FFFFFF이며, 이는 십진수로 16,777,215에 해당합니다.

따라서 최대 16,777,215까지의 숫자를 사용하면 알파벳 문자가 포함된 색상을 포함하여 6자리 16진수 코드로 표시되는 모든 색상을 포함할 수 있습니다. 이렇게 하면 숫자든 문자든 가능한 모든 색상이 포함됩니다.

정수를 얻고 소수 값을 방지하려면 Math.floor() 내에 Math.random() 메서드를 래핑하는 것을 잊지 마세요.

const randomNumber = Math.floor(Math.random() * 16777215);
console.log(randomNumber); // e.g., 45326764

2. 숫자를 16진수 문자열로 변환

function getRandomHexColor() {
    const randomNumber = Math.floor(Math.random() * 16777215);
    const randomHexColor = randomNumber.toString(16) //use the `toString(16)` method

}

이제 숫자를 16진수 문자열로 변환해야 합니다. 이는 toString(16) 메서드를 사용하여 쉽게 수행할 수 있습니다.

난수에 대해 toString(16) 메소드를 사용하고 16을 인수로 전달하여 16진수 문자열로 변환하기만 하면 됩니다.

이 방법을 사용하면 결과 코드에 F 이후의 문자는 포함되지 않고 0에서 F까지의 숫자와 문자만 포함됩니다.

추가 읽기: Next.js의 Google Analytics 추적 코드 [설정 가이드]

3. padStart 메소드 추가

기능이 거의 준비되었습니다. 그러나 잠재적인 문제가 있습니다. 생성된 16진수 색상 코드의 길이가 6자가 아닌 5자일 ​​수도 있습니다.

함수가 5자리 16진수 색상 코드를 반환하는 경우 유효하지 않습니다. 이 문제를 해결하고 항상 6자리 16진수 색상 코드를 얻으려면 코드에 padStart 메서드를 추가해야 합니다.

padStart(6, '0') 메소드는 필요한 경우 앞에 0을 추가하여 색상 코드가 항상 6자리 코드인지 확인합니다.

예를 들어, 16진수 코드가 A9A9A이고 5개의 문자만 포함하는 경우 padStart(6, '0') 메서드는 앞에 0을 추가하여 6자리 색상 코드로 만들고 결과적으로 0A9A9A가 됩니다. 이렇게 하면 함수가 항상 정확히 6자로 구성된 올바른 형식의 16진수 색상 코드를 반환합니다.

4. 생성된 16진수 코드를 반환합니다.

마지막 단계는 생성된 임의의 16진수 색상 코드를 반환하여 필요할 때마다 쉽게 사용할 수 있도록 하는 것입니다.

템플릿 문자열을 사용하여 색상 코드를 래핑하고 시작 부분에 #을 추가하고 싶기 때문에 이 기능을 사용할 때마다 수동으로 #을 추가할 필요가 없습니다.

function getRandomHexColor() {

    const randomNumber = Math.floor(Math.random() * 16777215);

    const randomHexColor = `#${randomNumber.toString(16).padStart(6, '0')}`;
    return randomHexColor; //return the code
}

// Example usage:
console.log(getRandomHexColor()); // e.g., #3e2f1b

결론

처음 JavaScript로 임의의 16진수 색상 생성기를 만들었을 때 알파벳 문자가 포함되지 않아 어둡거나 탁한 색상만 생성되었습니다.

코드를 일부 변경한 후 마침내 원하는 결과를 얻었습니다. 또한 이 게시물이 비슷한 기능을 만드는 데 시간을 절약해 주었기를 바랍니다.

새 프로젝트를 찾고 있거나 JavaScript를 사용하여 무언가를 만들고 싶은 친구들과 이 게시물을 공유하세요!

또한 읽어 보세요: 삭제하지 않고 HTML 코드를 비활성화하는 방법 [3가지 방법]