Tailwind 색상값 변환 보조
로컬 처리입력값을 클래스가 아닌 custom color 코드로 정리
사용 방법과 처리 기준
입력값을 클래스가 아닌 custom color 코드로 정리
도구의 계산과 파일 처리는 브라우저 안에서 이루어집니다. 계산기·단위 변환의 공유 링크를 직접 만들면 값이 URL에 포함됩니다. 계정·방문 통계·광고 관련 정보 처리는 개인정보처리방침을 확인하세요.
현재 제한
- 최대 입력 길이 100,000자
이름과 기준 색, 단계 수(3~11)를 정하면 기준 색의 색상·채도는 그대로 두고 명도를 95%에서 10%까지 고르게 나눈 색을 100·200·300… 이름으로 만듭니다.
기준 색이 그대로 단계에 들어가지는 않습니다. 기준 색이 꼭 필요하면 가장 가까운 단계를 그 색으로 바꿔 쓰세요.
이 도구로 할 수 있는 일
- 명도 단계
- 밝은 100부터 어두운 마지막 단계까지 명도를 고르게 나눕니다.
- 설정 코드
- colors: { 'brand': { '100': … } } 형태로 바로 붙입니다.
Tailwind 색상값 변환 보조 사용 방법
- 1이름 정하기brand·primary 같은 색 이름을 적습니다.
- 2색·단계 수 정하기기준 색과 단계 수를 고릅니다.
- 3코드 복사tailwind.config.js의 theme.extend에 붙입니다.
활용 예시
brand, 5단계
입력: brand, #3366cc, 5
결과: '100': '#ebf0fa', '200': '#94afe4', '300': '#3d6ecf', '400': '#204080', '500': '#0a1429'
이럴 때 유용해요
- 브랜드 색 하나로 Tailwind 색 단계를 빠르게 만들 때
- 디자인 시스템의 밝기 단계 초안을 잡을 때
자주 묻는 질문 (FAQ)
Tailwind 기본 팔레트처럼 50~950으로 만들 수 있나요?
단계 이름은 100부터 100씩 늘어납니다. 11단계면 100~1100이 되므로, 필요하면 이름만 50·100…950으로 바꿔 쓰면 됩니다.