ColorBox를 활용해 컬러 팔레트 만들기

colorbox.io 를 활용해 디자인 시스템의 컬러 팔레트를 구성해보자.

lyft의 디자이너였던 Kevyn Arnott가 새로운 ColorBox를 만들었다.

간단하게 특징을 요약해보자.

1. 멀티 컬러 생성
   한 워크스페이스에서 여러 개의 색상 팔레트를 추가할 수 있다
   

   

   ColorBox로 멀티 컬러 팔레트 생성

2. 접근성 표시 내장
   색상을 알고리즘 접근 방식으로 풀어나간 이유는 모든 사람이 접근성에 최적화된 색상 시스템을 제작할 수 있도록 돕고싶었기 때문이라고 한다.
   ColorBox에서 접근성과 관련하여 디테일하게 라벨까지 선택이 가능하다. 오른쪽 패널에서 색상 대비 레벨도 껐다 켤 수 있다.
   Constast Colors에는 작성한 컬러 팔레트가 텍스트로 들어갈 배경 색상을 정의해준다고 생각하면 좋다.
   

   

   ColorBox 우측 색상 대비 등 설정 화면

3. 다크 모드
   컬러를 선택한 뒤, 옵션 탭에서 다크모드를 활성화하면, 다크모드에 적합한 색을 자동으로 생성해준다.
   

   

   ColorBox에 다크 모드 팔레트 자동 추가

   
   매뉴얼하게 다크모드를 추가도 가능하다.
4. 기타 알고리즘
   1. 색조(Hue) 회전
      1. 색조(Hue) 회전(Rotation)이 Clockwise, Couter 두 종류 적용 가능하다
   2. 사용자 정의 곡선
      1. 같은 명도(Brightness)를 적용해도 색조(Hue)에 따라 눈으로 볼 때 어떤 색은 다른 색보다 더 밝아보인다. 색조별로 각각 S와 B 값을 조정해줄 수 있다.
   3. 기타
      1. easeOut: 빠르게 다음 값으로 이동하며 마지막에 자연스럽게 변화가 느려진다
      2. easeIn: 느리게 이동하다가 빠르게 끝난다