Colord: 가볍고 빠른 색상 조작 라이브러리
Colord는 자바스크립트 환경에서 색상 데이터를 효율적으로 다루기 위해 설계된 미니멀한 라이브러리입니다. 압축 후 단 1.7KB의 용량임에도 불구하고, RGB, HSL, HSV, HEX, 투명도 채널(alpha) 등을 포함한 다양한 색상 모델을 지원하며, 기존의 유사 라이브러리보다 최대 3배 이상 빠른 성능을 제공합니다. 함수형 스타일의 메서드 체이닝과 불변성(immutable) 기반 API로 안정적인 색상 변환 작업이 가능합니다.
시작하기
프로젝트에 Colord를 설치하려면 npm 또는 yarn을 사용하세요:
npm install colord
# 또는
yarn add colord설치 후, 다음과 같이 모듈을 불러와 색상 객체를 생성하고 변환할 수 있습니다:
import colord from 'colord';
// 다양한 형식으로 색상 정의
const baseColor = colord('rgb(0, 128, 255)');
console.log(baseColor.toHex()); // "#0080ff"
console.log(baseColor.toHsl()); // { h: 210, s: 100, l: 50, a: 1 }
// 알파 채널 포함 처리
const translucent = colord('hsla(120, 60%, 50%, 0.3)');
console.log(translucent.rgba.a); // 0.3주요 기능 및 사용 사례
색상 믹싱 및 그래디언트 생성
두 색상을 지정된 비율로 혼합하여 중간 색상을 계산할 수 있습니다. 이는 UI 요소의 호버 효과나 그라데이션 생성에 유용합니다.
import { colord } from 'colord';
const start = colord('#a00');
const end = colord('#00a');
const midpoint = colord.mix(start, end, 0.4).toRgbString();
console.log(midpoint); // "rgb(102, 0, 153)"조명 효과 생성: 창백화, 어둡게, 중성화
기준 색상에서 창백한 버전(tint), 어두운 버전(shade), 중성 색조(version)를 배열 형태로 생성할 수 있습니다.
const blue = colord('#00f');
// 밝기를 높인 색상들 (흰색과 혼합)
console.log(blue.tints(4).map(c => c.toHex()));
// ["#0000ff", "#4040ff", "#8080ff", "#bfbfff", "#ffffff"]
// 어두운 버전 (검은색과 혼합)
console.log(blue.shades(4).map(c => c.toHex()));
// ["#0000ff", "#00007f", "#000040", "#000010", "#000000"]색상 이름 플러그인 사용
HEX 값을 CSS 표준 색상 이름으로 변환하거나, 반대로 이름을 코드 값으로 해석하려면 names 플러그인을 확장해야 합니다.
import { colord, extend } from 'colord';
import names from 'colord/plugins/names';
extend([names]);
console.log(colord('lime').toHex()); // "#00ff00"
console.log(colord('#f0f').toName()); // "magenta"
console.log(colord('rgba(255, 255, 255, 0)').toName()); // "transparent"생태계 통합
Colord는 단순한 유틸리티를 넘어서 여러 프론트엔드 도구체인과 연동될 수 있습니다:
- Webpack / Vite: 번들 최적화 시 트리쉐이킹(tree-shaking)을 지원하여 불필요한 코드 제거.
- TypeScript: 타입 정의 내장, IDE 자동 완성 및 정적 검사 제공.
- Tailwind CSS 커스터마이징: 동적 색상 팔레트 생성 시 Colord로 기본 색상 조정 가능.