알아두면 좋은 라이브러리

[color] 색상 변환하기 :: 마이구미

mygumi 2022. 10. 9. 15:29
반응형
이 글은 color 이라는 라이브러리를 다룬다.
색상의 투명도, 밝기, raw data 등 색상을 활용하는 로직에 큰 도움을 줄 수 있다.
조금이나마 도움을 줄 수 있는 라이브러리들을 소개하는 카테고리로 분류된 글이다.
알아두면 좋은 라이브러리

 

color 라이브러리는 색상을 변환하고 조작할 수 있게 도와준다.

2가지 키워드(변환, 조작)를 이해하기 위해서는 색상 모델에 대해 이해하고 있어야한다.

색상 모델을 표현하는 RGB, HEX, HSL, HSB(HSV) 를 간략히 설명한다.

 

RGB 는 빛의 삼원색(빨강,녹색,파랑)으로 0~255 의 값으로 표현하고, 컴퓨터에게 직관적인 모델이다.
CSS 를 사용한다면, 다음과 같다.

 

color: rgb(255,0,0); // 빨강
color: rgb(0,255,0); // 녹색
color: rgb(0,0,255); // 파랑

 

Hex 코드는 RGB 를 16진수로 표기하여 6자리로 축약한 것이 Hex 코드이다.

CSS 를 사용한다면, 다음과 같다.

 

color: #FF0000; // 빨강
color: #00FF00; // 녹색
color: #0000FF; // 파랑

 

 

HSL, HSV 는 인간에게 더 직관적인 RGB 을 대체하는 표현법이다.

HSL 는 색상(Hue), 채도(Satuation), 명도(Ligntness), HSV 는 색상(Hue), 채도(Satuation), 명도(Brigntness) 를 나타낸다.

(HSL, HSV 의 차이에 대한 자세한 내용들은 다른 글들을 참고하길 바란다.)

CSS 를 사용한다면, 다음과 같다.

 

color: hsl(0, 100%, 50%); // 빨강
color: hsl(120, 100%, 50%); // 녹색
color: hsl(240, 100%, 50%); // 파랑

 

HSL 은 제공하고 있고, HSB 는 제공하지 않는다.

HSB 를 기반으로 색상을 제어해야한다면, rgb, hex, hsl 형태로 변환하여 사용하면 된다. (하단에서 실제 사례 언급 예정)

 

 

 

다시 2가지 키워드인 "변환"과 "조작"으로 살펴보자.

우선 "변환"이 의미하는 것은 위에서 언급된 색상 모델들을 변환하는 것이다.

HEX 코드를 HSL 로 변환하거나 RGB 를 HSL 코드로 변환하는 것을 의미한다.

 

// HEX -> RGB, HSL, HSV
const blueHex = Color("#1890ff");
console.log("rgb =", blueHex.rgb().red(), blueHex.rgb().green(), blueHex.rgb().blue());
console.log("hsl =", blueHex.hue(), blueHex.saturationl(), blueHex.lightness());
console.log("hsv =", blueHex.hue(), blueHex.saturationv(), blueHex.value());


// RGB -> HEX, HSL, HSV
const blueRGB = Color.rgb(24, 144, 255);
console.log("hex =", blueRGB.hex());
console.log("hsl =", blueRGB.hue(), blueRGB.saturationl(), blueRGB.lightness());
console.log("hsv =", blueRGB.hue(), blueRGB.saturationv(), blueRGB.value());

// HSL -> HEX, RGB, HSV
const blueHSL = Color.hsl(208.8, 100, 54.7);
console.log("hex =", blueHSL.hex());
console.log(
  "rgb =",
  blueHSL.rgb().red(),
  blueHSL.rgb().green(),
  blueHSL.rgb().blue()
);
console.log("hsv =", blueHSL.hue(), blueHSL.saturationv(), blueHSL.value());

 

조작이 의미하는 것은 단순히 값을 조작하는 것이다.

 

color.lighten(0.5) // hsl(100, 50%, 50%) -> hsl(100, 50%, 75%)
color.fade(0.5) // rgba(10, 10, 10, 0.8) -> rgba(10, 10, 10, 0.4)
color.lightness(70).toString() // hsl(212, 100, 50) -> hsl(212, 100, 70)

 

제공하는 대부분의 API 는 HSL 로 변환하여 값을 조작한다.

코드가 어렵지 않으니, 내부 코드를 한번 슥 훑어보면 좋다.

 

휘도, WCAG 적합 명암비 기준, WCAG Level, 상반되는 색상을 위한 밝기 기준 판단 등 많은 기능을 제공해주니 참고하면 도움이 될 것이다. (실제 사용 예제는 하단 언급)

 

 

실제 color 라이브러리를 사용하는 유용한 사례를 확인해보자.

디자인 시스템의 색상 시스템은 HSL 를 기반으로 제작된다고 가정한다.

그리고 시스템의 색상 단계를 구분하는 규칙을 Lightness 값으로만 조작하여 구분한다고 생각해보자.

 

 

각 컬러는 색상(Hue)과 채도(Saturation)는 모두 동일한 값을 가지고, 명도(Lightness)만 다른 값을 가지고 있다.

이것이 의미하는 것이 바로 "시스템의 색상 단계를 구분하는 규칙이 Lightness 값으로 분류한다." 이다.

 

우리는 이러한 구조를 color 라이브러리를 사용해서 규칙을 조금 더 직관적으로 표현할 수 있다.

 

const blueBase = Color.hsl(212, 100, 50);
const blue = {
  ...
  70: blueBase.lightness(70).toString(),
  60: blueBase.lightness(60).toString(),
  50: blueBase.lightness(50).toString(),
  40: blueBase.lightness(40).toString(),
  ...
}

 

 

 

 

추가로 색상 단계를 구분하는 다른 예를 들어보자면, antd 경우에는 HSB 를 기반으로 단계를 구분하고 있다.

언급된 예제에서는 L 값만을 통해 단계를 구분하는 규칙을 가졌다면, antd 는 H, S, B 모두 조작하는 그들만의 규칙을 가지고 있다.

(이러한 경우에는 color 라이브러리를 사용하는 것보다 직접 구현하는 것이 더 나을 수도 있다.)

 

추가로 AAA, 8.86 같은 값들은 관련 글을 참고하길 바란다.

꼭 함께 읽어보길 추천한다.

반응형