웹 개발을 하다 보면 버튼을 클릭할 때마다 무작위 색상이 적용되는 기능이 필요한 경우가 있습니다. 이럴 때 JavaScript를 활용하면 간단하게 랜덤 16진수(hex) 색상 코드를 생성할 수 있습니다. 아래 예제를 통해 그 방법을 살펴보겠습니다.
동작 원리
16진수 색상 코드는 # 기호 뒤에 0~9와 A~F까지 총 16개의 문자 중 6개가 조합된 형태입니다(예: #A3F2B1). 따라서 이 문자들을 담은 문자열에서 Math.random() 함수로 무작위 인덱스를 추출하고, 이를 6번 반복하여 하나의 색상 코드를 만들어내는 방식으로 구현합니다.
예제 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>랜덤 색상 코드 생성기</title>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.result {
box-sizing: border-box;
font-size: 18px;
font-weight: 500;
color: white;
width: 150px;
height: 150px;
text-align: center;
padding-top: 4%;
}
</style>
</head>
<body>
<h1>랜덤 색상 16진수 코드 생성하기</h1>
<button class="Btn">생성하기</button>
<div class="result"></div>
<h3>위의 버튼을 클릭하면 무작위 16진수 색상 코드가 생성됩니다.</h3>
<script>
let resultEle = document.querySelector(".result");
let hexCode = "0123456789ABCDEF";
let Color = "#";
document.querySelector(".Btn").addEventListener("click", () => {
for (let i = 0; i < 6; i++)
Color += hexCode[Math.floor(Math.random() * 16)];
resultEle.style.backgroundColor = Color;
resultEle.innerHTML = Color;
});
</script>
</body>
</html>코드 설명
- hexCode: 16진수에 사용되는 16개의 문자(0~9, A~F)를 저장한 문자열입니다.
- Math.random() * 16: 0 이상 16 미만의 실수 난수를 생성합니다.
- Math.floor(): 생성된 난수를 정수로 내림하여 문자열의 유효한 인덱스로 변환합니다.
- for 반복문: 위 과정을 6번 반복해 '#' 뒤에 붙일 여섯 자리 코드를 완성합니다.
- style.backgroundColor: 생성된 색상 코드를 결과 영역의 배경색으로 적용합니다.
실행 결과
페이지를 열면 다음과 같은 초기 화면이 나타납니다.
'생성하기' 버튼을 클릭하면 무작위 색상 코드가 만들어지고, 해당 색상이 결과 영역에 함께 표시됩니다.
이처럼 몇 줄의 JavaScript 코드만으로도 손쉽게 랜덤 색상 생성기를 만들 수 있습니다. 색상 팔레트 데모, 테마 변경 기능, 디자인 영감 도구 등 다양한 프로젝트에 응용해 보세요.