syidaxdesign system
홈 가격 내 정보
ComponentsPickers

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>

API reference

#

이름에 마우스를 올리거나 키보드로 선택하면 적용 코드를 확인할 수 있습니다. 터치 화면에서는 이름을 누르세요.

<sy-colorpicker>

Properties

Attribute / PropertyTypeDefaultDescription
string'#5A2A82'선택한 색상입니다. 기본 형식은 HEX이며, RGB·HSB 문자열을 사용하려면 format도 함께 지정하세요.
string''초기 색상입니다. value를 지정하지 않았을 때 적용합니다.
number1불투명도입니다. 0은 투명, 1은 불투명입니다.
booleanfalse선택한 색상 값을 트리거에 표시합니다.
ColorTrigger'click'팝업을 클릭 또는 포인터 진입으로 엽니다.
booleanfalse사용자 조작과 키보드 포커스를 차단합니다.
booleanfalse현재 값을 보여주면서 사용자 수정을 막습니다.
booleanfalse팝업 대신 편집 패널을 항상 표시합니다.
booleanfalse투명도 조절을 숨깁니다.
ColorFormat'hex'hex·rgb·hsb 중 하나입니다. value도 같은 형식의 문자열로 지정하세요.

Events

EventDetailDescription
CustomEvent<ColorChangeDetail>값 또는 선택 상태가 바뀔 때 발생합니다.
CustomEvent<void>목록을 열면 발생합니다.
CustomEvent<void>이벤트의 detail에서 결과를 확인하세요.
CustomEvent<ColorFormatChangeDetail>이벤트의 detail에서 결과를 확인하세요.

Methods

MethodReturnsDescription
Promise<void>색상 선택 팝업을 엽니다.
Promise<void>열린 패널을 닫습니다.
Promise<void>색상 값과 선택적인 형식을 함께 변경합니다.

Slots

SlotDescription
trigger 영역에 표시할 내용입니다.

<sy-colorpicker-content>

Properties

Attribute / PropertyTypeDefaultDescription
string'#ff0000'현재 값 또는 항목의 식별 값입니다.
number1불투명도입니다. 0은 투명, 1은 불투명입니다.
booleanfalse투명도 조절을 숨깁니다.
'hex' | 'rgb' | 'hsb''hex'값을 표시하고 해석할 형식입니다. 사용 가이드의 토큰 또는 형식 값을 확인하세요.
booleanfalse사용자 조작과 키보드 포커스를 차단합니다.
booleanfalse현재 값을 보여주면서 사용자 수정을 막습니다.

Events

EventDetailDescription
CustomEvent<{ value: string; opacity: number; format: string }>이벤트의 detail에서 결과를 확인하세요.
Design SystemTab 이동 Enter 열기