Tailwind를 쓰다 보면 bg-blue-500이 정확히 어떤 색인지 궁금할 때가 있습니다. 자주 쓰는 Tailwind 색상의 실제 HEX 값을 정리했습니다.
Gray 계열
gray-100(#F3F4F6), gray-200(#E5E7EB), gray-300(#D1D5DB), gray-400(#9CA3AF), gray-500(#6B7280), gray-600(#4B5563), gray-700(#374151), gray-800(#1F2937), gray-900(#111827). 숫자가 클수록 어둡습니다.
Blue 계열
blue-500(#3B82F6)이 기본입니다. blue-600(#2563EB)은 호버 상태에 자주 씁니다. 색상 변환기에서 이 값들을 RGB나 HSL로 변환해보세요.
커스텀 색상 추가
tailwind.config.js의 theme.extend.colors에 직접 색상을 추가할 수 있습니다. 브랜드 색상을 등록해두면 bg-brand-primary처럼 사용 가능합니다.
JIT 모드
bg-[#1da1f2]처럼 임의 값을 직접 쓸 수도 있습니다. 하지만 재사용성을 위해 config에 등록하는 것을 권장합니다.
D3.js 색상 보간
D3의 interpolateRgb, interpolateHsl 함수로 두 색상 사이의 중간 색을 계산할 수 있습니다. HSL 보간이 RGB보다 자연스러운 결과를 주는 경우가 많습니다. 색상 변환기와 함께 활용하면 색상 작업이 수월해집니다.
캔버스 그라데이션
Canvas API의 createLinearGradient, createRadialGradient로 코드로 그라데이션을 그릴 수 있습니다. addColorStop(position, color)로 색상 정지점을 추가합니다. 동적으로 색상을 변경하는 인터랙티브 그래픽에 유용합니다.
Tailwind 설정 팁
tailwind.config.js에서 theme.extend.colors에 브랜드 색상을 추가하면 bg-brand, text-brand-dark처럼 사용할 수 있습니다. 기존 색상 팔레트와 함께 자연스럽게 사용됩니다.
지속적인 학습
색상 이론은 깊이가 있는 분야입니다. 기본적인 변환 방법을 익힌 후 점점 더 깊은 내용을 학습하세요. 색상 변환기를 활용하면서 실습하면 이해가 빨라집니다.