> For the complete documentation index, see [llms.txt](https://yamoo9.gitbook.io/scss-mixins/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://yamoo9.gitbook.io/scss-mixins/utilities/colors/get-color-name.md).

# get-color-name()

색 구성표(Color Scheme)에 등록된 컬러 이름 반환 유틸리티 함수

## 용도 <a href="#use" id="use"></a>

[get-color()](/scss-mixins/utilities/colors/get-color.md) 유틸리티 함수와 유사하지만, 색 구성표에 등록된 컬러 이름을 반환하는 점이 다릅니다. 등록된 컬러 이름이 생각나지 않을 경우 디자인 시안에서 복사한 16진수 값을 전달해 컬러 이름 값을 확인할 때 사용합니다.

#### 사용 예 <a href="#examples" id="examples"></a>

* 배경, 전경, 테두리, 그림자 등 색을 일관적으로 관리해야 하는 경우
* 컬러 값을 통해 연결된 이름을 확인할 경우 (`#787878` → `gray`)

{% hint style="info" %}
[환경 구성 변수 $colors](/scss-mixins/getting-started/configure.md#undefined)에 사용자가 임의로 컬러 이름에 매칭되는 값을 등록할 수 있습니다.
{% endhint %}

## 사용법 <a href="#usage" id="usage"></a>

`get-color-name()` 함수에 등록된 컬러 값을 전달합니다. (값과 매칭되는 컬러 이름 반환)

> get-color-name($value:**color**) → **string**

```javascript
@debug get-color-name(#010101); // black 반환

// 매칭되는 컬러 값이 없을 경우 오류 출력
// Error: "#323232 컬러 값과 매칭되는 컬러 이름이 존재하지 않습니다."
@debug get-color-name(#323232);
```

| 매개변수(parameter) | 유형(type) | 필수(required) | 기본 값(default) |
| :-------------: | :------: | :----------: | :-----------: |
|      $value     |   color  |      ✔︎      |      null     |

## 로직 <a href="#logic" id="logic"></a>

`get-color-name()` 유틸리티는 다음의 로직에 의해 작성되었습니다.&#x20;

```javascript
@function get-color-name($value: null) {
  $color-keys: map-keys($colors);     // map → list
  $color-values: map-values($colors); // map → list
  $color-value-index: index($color-values, $value); // list → number
  @if $color-value-index {
    @return nth($color-keys, $color-value-index); // list → string
  } @else {
    @error '#{$value} 컬러 값과 매칭되는 컬러 이름이 존재하지 않습니다.';
  }
}
```

1. 전달 받은 컬러 값(`$value`)이 [ $colors 구성 변수](/scss-mixins/getting-started/configure.md#undefined)에 등록된 값인지 검사
2. 등록된 컬러 값과 일치한 경우, 컬러 이름 반환
3. 등록된 컬러 값과 일치하지 않을 경우, 오류 출력

## 참고 <a href="#reference" id="reference"></a>

유틸리티 함수 로직에 사용된 Sass 빌트인 모듈은 다음과 같습니다.

* [map-keys()](https://sass-lang.com/documentation/modules/map#keys)
* [map-values()](https://sass-lang.com/documentation/modules/map#values)
* [index()](https://sass-lang.com/documentation/modules/list#index)
* [nth()](https://sass-lang.com/documentation/modules/list#nth)

{% hint style="info" %}
Sass의 Map 자료형(Data Type)은 JavaScript의 Object와 유사합니다.
{% endhint %}

{% embed url="<https://sass-lang.com/documentation/modules/map>" %}

{% embed url="<https://sass-lang.com/documentation/modules/list>" %}