# 색상

## 사용방법

<figure><img src="https://2124792335-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSGiM6UdbWlqrZA6kPT9b%2Fuploads%2FzHg6isKuufaQMvvpvElk%2F%E1%84%89%E1%85%A2%E1%86%A8%E1%84%89%E1%85%A1%E1%86%BC.png?alt=media&#x26;token=ea1ca499-8a34-412c-87d5-cc661f27db38" alt=""><figcaption></figcaption></figure>

1. 색상을 적용하고 싶은 컴포넌트를 선택합니다.
2. 색상 아이콘<img src="https://2124792335-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSGiM6UdbWlqrZA6kPT9b%2Fuploads%2Fkg1YPLEdEotNV65WTEhj%2Fimage.png?alt=media&#x26;token=6d6cfb94-4f8f-411b-8328-2ab800c61501" alt="" data-size="line">을 선택하여 원하는 색상으로 변경합니다.
3. 기본 색상 창에서 원하는 색상을 선택할 수 있습니다.
4. 최근 내가 사용한 색상 중에서 색상을 선택할 수 있습니다.
5. 마우스로 색상을 선택할 수 있습니다.
6. Hex값(ex)#ffffff)을 입력하여 원하는 색상을 입력하고, 투명도를 조절합니다.
7. 테마를 지정해두면 내가 자주 쓰는 색상을 각각의 컴포넌트에 맞게 자동 적용할 수 있습니다.

## 테마색 설정

<figure><img src="https://2124792335-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSGiM6UdbWlqrZA6kPT9b%2Fuploads%2FKMrYTJFbD71nFNtT4K1h%2Fimage.png?alt=media&#x26;token=938221bc-ed10-40cc-972c-e3c2d2df7a06" alt=""><figcaption></figcaption></figure>

테마 색상을 설정하면 원하는 색상을 각각의 컴포넌트에 맞게 자동 적용할 수 있습니다.

[\[시나리오 스튜디오 인터페이스\]-\[테마색설정\]](https://docs.flextudio.com/flextudio/scenario/interface/deploy-1) 에서 자세한 사용법을 확인할 수 있습니다.

## 색상적용

<table><thead><tr><th width="124">모양</th><th width="125">기능</th><th>의미</th></tr></thead><tbody><tr><td><img src="https://2124792335-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSGiM6UdbWlqrZA6kPT9b%2Fuploads%2FaknArjIjzdAQ6tADScJQ%2Fimage.png?alt=media&#x26;token=12ec4113-ebe2-40d4-81ed-325050d35185" alt="" data-size="original"></td><td>텍스트 색상</td><td><a data-mention href="text">text</a>색상 및 옵션 변경 설정</td></tr><tr><td><img src="https://2124792335-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSGiM6UdbWlqrZA6kPT9b%2Fuploads%2F2821T8jZMStj7K0RMDDB%2Fimage.png?alt=media&#x26;token=119e0495-3638-4b59-8608-b4bfc4c03fca" alt="" data-size="original"></td><td>배경 색상</td><td><a data-mention href="background">background</a>색상 및 옵션 변경 설정</td></tr><tr><td><img src="https://2124792335-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSGiM6UdbWlqrZA6kPT9b%2Fuploads%2FhFT3smkAh3IfxFRqRmki%2Fimage.png?alt=media&#x26;token=891c81a6-ad01-4004-960f-7f5358048108" alt="" data-size="original"></td><td>보더 색상</td><td><a data-mention href="border">border</a> 색상 및 옵션 변경 설정</td></tr><tr><td><img src="https://2124792335-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSGiM6UdbWlqrZA6kPT9b%2Fuploads%2F7nypgfzbEy5RryhSs16T%2Fimage.png?alt=media&#x26;token=0c6420fa-6d2b-45f4-b7ca-7866be735053" alt="" data-size="original"></td><td>아이콘 라인 색</td><td><a data-mention href="icon">icon</a>라인 색상 변경 설정</td></tr><tr><td><img src="https://2124792335-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSGiM6UdbWlqrZA6kPT9b%2Fuploads%2FgrAo0xi7GMxqCAt9DbRj%2Fimage.png?alt=media&#x26;token=b46e6bf9-d756-4d84-b164-7027f452c5c0" alt="" data-size="line"></td><td>캡션 색상</td><td><a data-mention href="caption">caption</a>색상 변경 설정</td></tr></tbody></table>

{% hint style="warning" %}
아이콘은 라인 아이콘인 경우에만 색상 변경 옵션이 나타납니다.
{% endhint %}

## 따라하기

화면 속 \[시작하기]버튼을 눌러 데모를 확인하실 수 있습니다.

{% @storylane/embed subdomain="app" linkValue="bjksoxdnuuwf" url="<https://app.storylane.io/share/bjksoxdnuuwf>" %}
