직관적인 컬러 찾기 ~ (컬러피커) 정보
직관적인 컬러 찾기 ~ (컬러피커)관련링크
첨부파일
본문
왼쪽에 HEX 인풋창을 클릭하면 컬러피커가 나오고 마우스로 움직일때 마다
HEX, RGB 창에 값이 자동으로 입력됩니다.
첨부한 js파일을 테마 js폴더에 넣고
사용할 페이지 상단에 아래 소스를 넣고,
add_javascript('<script src="'.G5_THEME_URL.'/js/jscolor.js"></script>', 0); //<!--색상뱃지 1/2-->
사용할 위치에 아래 소스를 넣으시면 됩니다.
<!--색상뱃지 2/2 시작-->
<div style="margin:5px;">
<!-- Hex Color Input -->
<input type="text" class="btn-color user-color jscolor {hash:true}" data-id="background" style="width:100px;" value="#ffffff" id="hexInput"><!--색상뱃지 1/2-->
<!-- RGB Color Output (초기에는 숨김) -->
<input type="text" id="rgbOutput" readonly style="width:90px; display:none;" placeholder="RGB 값">
</div>
<script>
// HEX 값을 RGB로 변환하는 함수
function hexToRgb(hex) {
// # 제거 후 색상값을 6자리로 확인
hex = hex.replace('#', '');
if (hex.length === 6) {
let r = parseInt(hex.slice(0, 2), 16);
let g = parseInt(hex.slice(2, 4), 16);
let b = parseInt(hex.slice(4, 6), 16);
return `${r},${g},${b}`; // rgb() 형식 대신 숫자와 콤마로 반환
}
return null; // 유효하지 않은 값일 경우 null 반환
}
// 입력값 변경 시 RGB로 변환하여 출력
document.getElementById('hexInput').addEventListener('input', function() {
const hexValue = this.value;
const rgbValue = hexToRgb(hexValue);
if (rgbValue) {
document.getElementById('rgbOutput').value = rgbValue; // 숫자와 콤마로 출력
document.getElementById('rgbOutput').style.display = 'inline'; // RGB 인풋창 보이기
} else {
document.getElementById('rgbOutput').value = '유효한 HEX 값이 아닙니다';
document.getElementById('rgbOutput').style.display = 'inline'; // RGB 인풋창 보이기
}
});
// HEX 인풋창 클릭 시 RGB 인풋창 보이기
document.getElementById('hexInput').addEventListener('focus', function() {
document.getElementById('rgbOutput').style.display = 'inline'; // RGB 인풋창 보이기
});
</script>
<!--색상뱃지 2/2 끝-->
6
댓글 3개
좋아요, 감사 합니다.
좋은 팁 공유 감사드립니다! 추천꾹!!
감사합니다 ^^