씨본 팔레트 컬러 시뮬레이터 보수작업

https://koreanraichu.tistory.com/853

씨본 컬러 파레트 씨뮬레이터

이거 함 써보고 고칠점 찾음…

---

입력하는 색상 앞에 #가 들어가면 #을 빼주기

이게 왜 필요함? 하실 수도 있는데 컬러 파레트 만드는데서 복사할때 앞에 #이 붙는 경우가 있고, 아닌 경우가 있습니다. 근데 #이 붙으면 안됐거든요? 이러면 사용자 입장에서는 아니 내가 이거 하나 쓰자고 #을 지워야됨??? 이 되는거죠. 뭔지 아시겠죠?

 

const color1 = first_color.value.replace(/#/g, '').trim(); // 응 샵 들어가
const color2 = second_color.value.replace(/#/g, '').trim(); // 얘도 데려가

#은 잘 뺐는데 생성이 안돼서 봤더니 함수에 다른걸로 들어가서 그런거였음… 제미나이 이 에미나이 왜 자꾸 딴데서 돌리고 있냐고… 클로드가 찾아줘서 알았음 나도… 아무튼 이거 수정해서 잘됩니다.

 

그라데이션 종류 추가

그 단색으로 해서 라이트&다크가 있고 diverging이라고 해서 양 끝단에 색 두개+가운데 색 하나 있는 게 있어요. 그걸 만들어야됨.

const cmap_div_light = document.querySelector('.cmap2'); // Light
const cmap_div_dark = document.querySelector('.cmap3'); // Dark
const cmap_div_divl = document.querySelector('.cmap4'); // Diverging(light)
const cmap_div_divd = document.querySelector('.cmap5'); // Diverging(dark)

일단 네개 추가요… diverging도 가운데 색 따라서 라이트 다크 있음.

 

// 라이트
cmap_div_light.style.backgroundImage = `linear-gradient(to right, ${"#" + color1}, #ffffff)`; // 왼->오

// 다크
cmap_div_dark.style.backgroundImage = `linear-gradient(to right, ${"#" + color1}, #000000)`; // 왼->오

//diverging(light)
cmap_div_divl.style.backgroundImage = `linear-gradient(to right, ${"#" + color1}, #ffffff, ${"#" + color2})`; // 왼->오

//diverging(dark)
cmap_div_divd.style.backgroundImage = `linear-gradient(to right, ${"#" + color1}, #000000, ${"#" + color2})`; // 왼->오

이게 한번에 될라나...

 

일단 그라데이션은 다 나왔으니까 위치나 잡아봅시다…

 

.cmap_wrapper > div {
    width: 100%;
    height: 90px;
    margin: 10px 0;
}

일단 하위 div가 늘었는데 그 div들 사양이 다 같아서 이렇게 줬음.

 

그리고 p태그 문구 바꿨습니다. 저기 개별로 추가하긴 힘들어...

 

그라데이션은 순서대로 2배색 그라데이션, 단색(밝음), 단색(어두움), diverging(밝은색), diverging(어두운색)입니다. 여기다가 두번째색 단색도 넣으면 될듯?

 

// 그라데이션
cmap_div.style.backgroundImage = `linear-gradient(to right, ${"#" + color1}, ${"#" + color2})`; // 왼->오

// 라이트
cmap_div_light.style.backgroundImage = `linear-gradient(to right, ${"#" + color1}, #ffffff)`; // 왼->오

// 다크
cmap_div_dark.style.backgroundImage = `linear-gradient(to right, ${"#" + color1}, #000000)`; // 왼->오

// 라이트
cmap_div_light2.style.backgroundImage = `linear-gradient(to right, ${"#" + color2}, #ffffff)`; // 왼->오 (두번째색)

// 다크
cmap_div_dark2.style.backgroundImage = `linear-gradient(to right, ${"#" + color2}, #000000)`; // 왼->오 (두번째색)

//diverging(light)
cmap_div_divl.style.backgroundImage = `linear-gradient(to right, ${"#" + color1}, #ffffff, ${"#" + color2})`; // 왼->오

//diverging(dark)
cmap_div_divd.style.backgroundImage = `linear-gradient(to right, ${"#" + color1}, #000000, ${"#" + color2})`; // 왼->오

한 화면에서 보기 힘들어졌음.. 일단 기능은 잘 됩니다.

 

근데 한가지 문제가 있다면 씨본에서 diverging 만들때 rgb가 아니라 husl을 입력함… 아 이것도 rgb 해달라고… husl 변환 귀찮다고…