[css] 커스텀 팔레트 만들기

YEONSUI 버전 2의 첫 번째 작업은 색상을 정의하는 것이다.

🥵 팔레트 정의하기

버전 1에서는 8가지 팔레트 색상을 정의했는데 버전 2에서는 24가지 색상을 정의했다.

(어떤 색을 좋아할 지 몰라서 이만큼 준비해봤어)

피그마로 정의를 끝내고 개발하는데 현타가 왔다. 색상코드를 변수로 저장하는 건 피그마의 Colors to Variables 플러그인을 사용하면 되는데, 사용자가 테마를 선택하면 해당 테마 색상을 Primary 변수로 다시 지정해야 한다.

    &.red {
      --Primary-Color-1: var(--Red1);
      --Primary-Color-2: var(--Red2);
      --Primary-Color-3: var(--Red3);
      --Primary-Color-4: var(--Red4);
      --Primary-Color-5: var(--Red5);
      --Primary-Color-6: var(--Red6);
      --Primary-Color-7: var(--Red7);
      --Primary-Color-8: var(--Red8);
      --Primary-Color-9: var(--Red9);
      --Primary-Color-10: var(--Red10);
    }

위 코드를 24번이나 반복해야 한다. 🥹

사용자가 원하는 색이 24가지 안에 있다는 보장도 없고 더이상 노가다를 하고 싶지 않아서 도입했다.

😎 커스텀 팔레트

팔레트 하나가 어떻게 구성되어있는지 분석하고 사용자가 최대한 간단히 설정할 수 있도록 하였다.

색상 표기법은 여러 가지가 있는데, 전부 설명하기엔 너무 많고 이번에 사용할 HSL에 대해 간단히 알아보자.

HSL은 Hue, Saturation, Lightness의 약자로 색조, 채도, 명도로 색상을 조절하는 것이다.

색조는 360도 색상 바퀴에 정의된 팔레트에서 고를 수 있고, 채도가 높을 수록 선명하고, 명도는 높을 수록 밝다.

HSL Color Picker 사이트에서 색상을 골라볼 수 있다.

그렇다면 팔레트는 색조와 채도는 동일하고 명도를 달리해 만들 수 있을 것이다.

/* @import './constants/themes'; */
:root {
  --primary-color: 222, 100%; /* 기본 색조 및 채도 */

  .theme-light {
    --Primary-Color-1: hsl(var(--primary-color), 95%);
    --Primary-Color-2: hsl(var(--primary-color), 90%);
    --Primary-Color-3: hsl(var(--primary-color), 80%);
    --Primary-Color-4: hsl(var(--primary-color), 70%);
    --Primary-Color-5: hsl(var(--primary-color), 60%);
    --Primary-Color-6: hsl(var(--primary-color), 50%);
    --Primary-Color-7: hsl(var(--primary-color), 40%);
    --Primary-Color-8: hsl(var(--primary-color), 30%);
    --Primary-Color-9: hsl(var(--primary-color), 20%);
    --Primary-Color-10: hsl(var(--primary-color), 10%);
  }

  .theme-dark {
    --Primary-Color-1: hsl(var(--primary-color), 10%);
    --Primary-Color-2: hsl(var(--primary-color), 20%);
    --Primary-Color-3: hsl(var(--primary-color), 30%);
    --Primary-Color-4: hsl(var(--primary-color), 40%);
    --Primary-Color-5: hsl(var(--primary-color), 50%);
    --Primary-Color-6: hsl(var(--primary-color), 60%);
    --Primary-Color-7: hsl(var(--primary-color), 70%);
    --Primary-Color-8: hsl(var(--primary-color), 80%);
    --Primary-Color-9: hsl(var(--primary-color), 90%);
    --Primary-Color-10: hsl(var(--primary-color), 95%);
  }
}

--primary-color 변수에 기본 색조와 채도 값이 있으므로 별도의 변수 정의 없이 팔레트가 완성된다.

/* index.scss */
@import './constants/themes';

:root {
  --primary-color: 120, 60%;
}

다른 색을 사용하고 싶으면 :root 요소 안에 똑같이 색조와 채도 값을 넣어주면 된다.

이렇게 간단하게 커스텀 팔레트를 구현하였다.

CSS 변수를 사용하면서 발견한 한 가지 단점은 Alpha(투명도) 수정이 어렵다는 것이다.

p {
  color: hsla(var(--Primary-Color-6), 0.5);
}

위와 같이 팔레트 색상에 투명도를 더하면 변수 값이 브라우저에 적용되지 않는다.

하지만 YEONSUI는 팔레트 안에서만 메인 색상을 사용하도록 권장하기 때문에 당장 수정해야 할 요소는 아니다. 필요한 일이 생기면 수정해봐야겠다.