Color Picker

색상과 투명도를 선택하고 HEX·RGB·HSB 값으로 전달합니다.

<sy-colorpicker>설치 안내 기본 사용법

Live preview

컴포넌트를 조작하면 여기에 결과가 표시됩니다.

코드 보기

HTML

<sy-colorpicker
  format="hex"
  opacity="1"
  trigger="click"
  showtext
  value="#6750a4"
  id="sample"
></sy-colorpicker>

사용 가이드

사용자가 임의의 색상을 직접 정해야 할 때 사용합니다. 정해진 브랜드 색 중에서만 고른다면 고정 팔레트가 더 간단합니다.

필요할 때 열기

기본 팝업 방식은 색상 설정을 가볍게 노출할 때 알맞습니다.

계속 보며 조절

inline으로 패널을 항상 표시하면 반복해서 색을 조절하기 편합니다.

색상 형식: value는 format에 맞는 HEX·RGB·HSB 값으로 전달하세요.
투명도: opacity는 0–1 범위입니다. 투명도 조절이 필요 없다면 hideOpacity를 사용하세요.

예제

색상 값과 형식

같은 보라색을 세 가지 형식으로 표현합니다. 각 항목을 열어 값을 수정해 보세요.

코드 보기

HTML

<div style="display:grid;gap:16px;width:100%">
  <sy-colorpicker
    format="hex"
    value="#6750a4"
    showtext
  ></sy-colorpicker>
  <sy-colorpicker
    format="rgb"
    value="rgb(103, 80, 164)"
    showtext
  ></sy-colorpicker>
  <sy-colorpicker
    format="hsb"
    value="hsb(256, 51%, 64%)"
    showtext
  ></sy-colorpicker>
</div>

항상 보이는 편집 패널

inline은 별도의 버튼 없이 색 영역과 입력란을 보여줍니다.

코드 보기

HTML

<sy-colorpicker inline value="#6750a4"></sy-colorpicker>

투명도

왼쪽은 50% 투명도이며, 오른쪽은 투명도를 조절할 수 없는 불투명 색입니다.

코드 보기

HTML

<div style="display:flex;flex-wrap:wrap;align-items:center;gap:16px">
  <sy-colorpicker
    value="#6750a4"
    opacity="0.5"
    showtext
  ></sy-colorpicker>
  <sy-colorpicker
    value="#1976d2"
    hideopacity
    showtext
  ></sy-colorpicker>
</div>

직접 만든 트리거

trigger 슬롯으로 동작 목적을 설명하는 버튼을 제공할 수 있습니다.

코드 보기

HTML

<sy-colorpicker value="#6750a4">
  <sy-button slot="trigger" variant="secondary">브랜드 색상</sy-button>
</sy-colorpicker>

외부에서 색 바꾸기

setColor는 값과 형식을 함께 지정할 수 있습니다. open·close는 팝업을 열고 닫습니다.

코드 보기

HTML

<sy-colorpicker
  value="#6750a4"
  showtext
  id="sample"
></sy-colorpicker>
<div class="demo-actions"
  style="display:flex;flex-wrap:wrap;gap:8px;margin-top:16px"
>
  <sy-button id="action-0" size="small">파란색 적용</sy-button>
  <sy-button id="action-1" size="small">패널 열기</sy-button>
  <sy-button id="action-2" size="small">패널 닫기</sy-button>
</div>
<output id="demo-result" aria-live="polite"></output>

<script type="module">
  const describeResult = value => JSON.stringify(value, (_key, item) => {
    if (item instanceof File) return {
      name: item.name,
      size: item.size,
      type: item.type
    };
    if (item instanceof Element) return `<${item.localName}>`;
    return item;
  }) ?? '완료';
  const actionTarget0 = document.querySelector("#sample");
  document.querySelector('#action-0').addEventListener('click', async () => {
    const result = await actionTarget0.setColor("#1976d2", "hex");
    document.querySelector('#demo-result').textContent = describeResult(result);
  });
  const actionTarget1 = document.querySelector("#sample");
  document.querySelector('#action-1').addEventListener('click', async () => {
    const result = await actionTarget1.open();
    document.querySelector('#demo-result').textContent = describeResult(result);
  });
  const actionTarget2 = document.querySelector("#sample");
  document.querySelector('#action-2').addEventListener('click', async () => {
    const result = await actionTarget2.close();
    document.querySelector('#demo-result').textContent = describeResult(result);
  });
</script>

비활성화와 읽기 전용

두 상태 모두 사용자가 패널을 열어 색을 바꾸는 것을 막습니다.

코드 보기

HTML

<div style="display:flex;flex-wrap:wrap;align-items:center;gap:16px">
  <sy-colorpicker
    value="#6750a4"
    disabled
    showtext
  ></sy-colorpicker>
  <sy-colorpicker
    value="#1976d2"
    readonly
    showtext
  ></sy-colorpicker>
</div>

이벤트와 전달 값

컴포넌트를 조작하고 최근 이벤트의 이름과 detail 값을 확인하세요. 코드에는 이 컴포넌트와 하위 구성 요소가 보내는 이벤트의 구독 방법이 모두 포함되어 있습니다.

코드 보기

HTML

<sy-colorpicker
  format="hex"
  opacity="1"
  trigger="click"
  showtext
  value="#6750a4"
  id="sample"
></sy-colorpicker>
<output id="demo-events" aria-live="polite">컴포넌트를 조작하면 최근 이벤트와 전달 값이 표시됩니다.
</output>

<script type="module">
  const describeResult = value => JSON.stringify(value, (_key, item) => {
    if (item instanceof File) return {
      name: item.name,
      size: item.size,
      type: item.type
    };
    if (item instanceof Element) return `<${item.localName}>`;
    return item;
  }) ?? '완료';
  for (const name of ["changed", "opened", "closed", "format-change", "colorChange"]) {
    document.addEventListener(name, event => {
      document.querySelector('#demo-events').textContent =
        `${event.target.localName} · ${name}: ${describeResult(event.detail)}`;
    });
  }
</script>

초기 색상 지정

defaultValue는 value가 지정되지 않았을 때 적용할 초기 색입니다. 실행 중에는 setColor(value, format)로 색을 변경하세요.

코드 보기

HTML

<sy-colorpicker default-value="#1976d2" showtext></sy-colorpicker>

기능별 예제

10개 주제에서 필요한 기능을 선택하세요. 속성 설정, 메서드 호출, 이벤트 결과와 슬롯 구성을 실행 화면과 코드로 확인할 수 있습니다.

기능 찾기

사용 예제 · Overview

선택한 예제를 직접 조작해 보세요. 여러 구성이 있는 주제는 세부 예제를 바꿀 수 있습니다.

코드 보기

HTML

예제를 불러오고 있습니다.