그 Seaborn에서 컬러 커마 가능한거 아시죠? 근데 이게 뭔 색인지 뭔 파레트가 어떻게 나오는지 모르잖아요. ㅇㅋ? ㅇㅇㅋ. 그래서 색 두 개를 입력받은 다음 한 10칸정도로 띄엄띄엄 칠한거 하나, cmap(이어지는거)으로 하나 짜잔 하고 보여주자 이거다.
이거 근데 팀플에서도 써먹으려면 코드펜에도 올려야 할 듯.
<html>
<head>
<title>Seaborn palette simulator</title>
<link href="style.css" rel="stylesheet">
</head>
<body>
<div class="wrapper">
<h1>Seaborn palette simulator</h1>
<p>그... 저기 인풋창에 색깔 두개 입력하시면 파레트랑 cmap이랑 보여줄거긴 합니다. 근데... 아... </p>
<p>세개 이상... 그거는 제 능력 밖이니까 걍 두개씩 돌려보세요... <s>이봐요</s></p>
<div class="color_input"></div>
<div class="palette">
</div>
<div class="cmap"></div>
</div>
</body>
<script src="script.js"></script>
<script src="https://kit.fontawesome.com/dc58858c96.js" crossorigin="anonymous"></script>
</html>그래요. 여기에도 썼지만 세개 이상은 내 능력 밖이니께 걍 두개씩 보든가 하세요.
cmap_gradation = document.querySelector('.cmap');
palette_gradation = document.querySelector('.palette');
color_button = document.querySelector('#generate'); // Button일단 파레트는 아래에 div를 10개정도 생성하고 색을 동적으로 줘야 하고, cmap은 걍 그라데이숑 주면 된다. 그라데이션이 쉽죠. 배경만 입히면 되니까. 그럼 걍 그라데이션 하면 안되나 할 수도 있는데 씨본 파레트가 딱딱 끊어지는 구조입니다.
cmap_gradation = document.querySelector('.cmap');
palette_gradation = document.querySelector('.palette');
// Input
first_color = document.querySelector('#first_color');
second_color = document.querySelector('#second_color');
color_button = document.querySelector('#generate'); // Button
// 벗흔이여 일을 하세요
color_button.addEventListener('click',()=>{
console.log(first_color.value, second_color.value)
});뭔가 가져온 게 늘은 것 같죠? 늘은거 맞음. 인풋창을 갖고와야 색을 제어하죠.
// 벗흔이여 일을 하세요
color_button.addEventListener('click',()=>{
// 칸으로 노나지는 그거
palette_div = document.createElement('div');
palette_div.classList.add('palette_div');
// 그라데이션
cmap_div.style.backgroundImage = `linear-gradient(to right, ${"#" + first_color.value}, ${"#" + second_color.value})`; // 왼->오
});그라데이션이 간단할거라고 생각하던 시절이 나에게도 있었다. 저거 적용하고 텍스트 달고 하는게 개노가다였지만 그라데이션은 선녀예요. 파레트는 저 전체 크기를 10등분한 걸 생성해서 줄줄이 붙여야됩니다... ㅋㅋㅋㅋㅋㅋ
const hexToRgb = (hex) => {
const r = parseInt(hex.substring(0, 2), 16);
const g = parseInt(hex.substring(2, 4), 16);
const b = parseInt(hex.substring(4, 6), 16);
return [r, g, b];
};
const startRgb = hexToRgb(first_color.value);
const endRgb = hexToRgb(second_color.value);
const n = 10;
//자 드가자
for (let i = 0; i < n; i++) {
const step = i / (n - 1); // 0부터 1까지의 비율
// R, G, B 각각 보간 계산
const r = Math.round(startRgb[0] + (endRgb[0] - startRgb[0]) * step);
const g = Math.round(startRgb[1] + (endRgb[1] - startRgb[1]) * step);
const b = Math.round(startRgb[2] + (endRgb[2] - startRgb[2]) * step);
// 새 div 생성 및 스타일 적용
const chip = document.createElement('div');
chip.classList.add('palette_chip'); // CSS에서 너비/높이 설정용
chip.style.backgroundColor = `rgb(${r}, ${g}, ${b})`;
chip.style.flex = "1"; // 10칸이 골고루 나눠지도록
// 드디어 등장하는 오타 없는 그 녀석
palette_div.appendChild(chip);생성되는거 방향 뻑나서 플렉스 줬다... 그럼 여기서 끝인가요? 아뇨. 유효성검사 해야죠.
// 벗흔이여 일을 하세요
color_button.addEventListener('click',()=>{
if (!regex.test(first_color.value) || !regex.test(second_color.value)) {
alert('유효한 색상값이 아닙니다!')
} else {
palette_div.innerHTML = '';
cmap_div.innerHTML = '';
// 칸으로 노나지는 그거
const hexToRgb = (hex) => {
const r = parseInt(hex.substring(0, 2), 16);
const g = parseInt(hex.substring(2, 4), 16);
const b = parseInt(hex.substring(4, 6), 16);
return [r, g, b];
};
const startRgb = hexToRgb(first_color.value);
const endRgb = hexToRgb(second_color.value);
const n = 10;
//자 드가자
for (let i = 0; i < n; i++) {
const step = i / (n - 1); // 0부터 1까지의 비율
// R, G, B 각각 보간 계산
const r = Math.round(startRgb[0] + (endRgb[0] - startRgb[0]) * step);
const g = Math.round(startRgb[1] + (endRgb[1] - startRgb[1]) * step);
const b = Math.round(startRgb[2] + (endRgb[2] - startRgb[2]) * step);
// 새 div 생성 및 스타일 적용
const chip = document.createElement('div');
chip.classList.add('palette_chip'); // CSS에서 너비/높이 설정용
chip.style.backgroundColor = `rgb(${r}, ${g}, ${b})`;
chip.style.flex = "1"; // 10칸이 골고루 나눠지도록
// 드디어 등장하는 오타 없는 그 녀석
palette_div.appendChild(chip);
}
}
// 그라데이션
cmap_div.style.backgroundImage = `linear-gradient(to right, ${"#" + first_color.value}, ${"#" + second_color.value})`; // 왼->오
});나 그러고보니 처음에 요소 가져올때 const도 안 붙이고 가져왔네?
마진 좀 조절하고 깃헙에 올리겠음.
See the Pen Seaborn palette simulator by koreanraichu (@koreanraichu) on CodePen.
코드펜에도 올렸음다.
'Coding > JavaScript' 카테고리의 다른 글
| 씨본 팔레트 컬러 시뮬레이터 보수작업 (0) | 2026.02.22 |
|---|---|
| 특정 조건을 만족하면 DOM이 나타나게 해 보자 (0) | 2025.09.17 |
| 프로그레스 바 만들어보기 (0) | 2025.09.16 |
| 드디어 추가되는 파일 불러오기 기능 (0) | 2025.09.11 |
| 텍스트 에디터에 뭔가 추가해보자 (0) | 2025.08.18 |