[javaScript] Color Picker ! 컬러 피커 Coloris 자바스크립트로 간단하게 적용하기

컬러 피커 코드 공유 합니다!

😎 cdn 

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/mdbassit/Coloris@latest/dist/coloris.min.css"/>

<script src="https://cdn.jsdelivr.net/gh/mdbassit/Coloris@latest/dist/coloris.min.js"></script>

 

😎HTML

<input type="text" data-coloris>

 

cdn이랑 html코드만 넣어도 출력가능합니다.

스크립트 코드로 컬러피커 세팅 변경 할수 있습니다.

 

😎 script

<script>
      Coloris({
        parent: '.demo',
        theme: 'default',     //default, large, polaroid, pill
        themeMode: 'light',   //light , dark 모드
        margin: 2,            //입력 필드와 색선택시 사이 여백
        alpha: true,          //불투명도 조절
        format: 'hex',        //포맷  hex rgb hsl auto mixed
        formatToggle: false,   //포맷 토글
        clearButton: true,
        clearLabel: 'Clear',
        swatches: [
          '#264653',
          '#2a9d8f',
          '#e9c46a',
          'rgb(244,162,97)',
          '#e76f51',
          '#d62828',
          'navy',
          '#07b',
          '#0096c7',
          '#00b4d880',
          'rgba(0,119,182,0.8)'
        ],
        inline: false,
        defaultColor: '#000000',
      });
    </script>

Demo 여기서 확인가능합니다.