직관적인 컬러 찾기 ~ (컬러피커)

왼쪽에 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 끝-->