디자인천일공책

Html＆JQuery Colorpicker - Spectrum

페이지 정보

작성자 디자인천일 작성일Date: 2025-03-27 20:50 조회view: 10

본문

Colorpicker - Spectrum

컬러픽커 만들기


//CDN

<script src="https://cdn.jsdelivr.net/npm/spectrum-colorpicker2/dist/spectrum.min.js">

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/spectrum-colorpicker2/dist/spectrum.min.css">

html

<input id="color-picker" value='#276cb8' />

jQuery/Javascript

$('#color-picker').spectrum({
  type: "component"
});

//options
$("#picker").spectrum({
    color: tinycolor,
    type: sting, // text, component, color, flat
    showInput: bool,
    showInitial: bool,
    allowEmpty: bool,
    showAlpha: bool,
    disabled: bool,
    localStorageKey: string,
    showPalette: bool,
    showPaletteOnly: bool,
    togglePaletteOnly: bool,
    showSelectionPalette: bool,
    clickoutFiresChange: bool,
    containerClassName: string,
    replacerClassName: string,
    preferredFormat: string,
    maxSelectionSize: int,
    palette: [[string]],
    selectionPalette: [string],
    // specify locale
    locale: string,
    // or directly change the translations
    cancelText: string,
    chooseText: string,
    togglePaletteMoreText: string,
    togglePaletteLessText: string,
    clearText: string,
    noColorSelectedText: string,
});

관련링크