Tailwind 컬러 생성
1색의 Hex 코드에서 Tailwind CSS의 50~950의 11단계 팔레트와 설정 코드 생성
특징
1색에서 11단계 자동 생성
입력한 색을 500에 두고 50~950의 명암 계산
v3과 v4 양쪽 형식 지원
config와 @theme의 표기 방식을 탭으로 전환
단계별로 Hex 복사
색 견본별 버튼으로 컬러 코드를 1색씩 복사
입력과 동시에 팔레트 업데이트
실행 버튼 불필요로 색을 시도하면서 비교
사용 방법
기준색의 Hex 입력
Hex 코드를 입력하거나 왼쪽 끝의 색 견본을 클릭하여 컬러 피커로 선택
필요에 따라 색 이름 입력
코드 내에서 사용할 색 이름을 영소문자로 입력. 빈칸이면 primary 사용
11단계 색 견본 확인
50~950의 색 견본과 Hex 코드를 확인하고, 견본의 복사 버튼으로 1색씩 복사
출력 형식을 선택하여 복사
v3 또는 v4를 선택하고 "코드 복사"로 tailwind.config.js나 CSS 파일에 붙여넣기
유스케이스
브랜드 컬러의 명암 작성
버튼의 호버나 배경에 사용하는 명암을 브랜드 컬러 1색에서 통일
표준 팔레트에 없는 색 추가
Tailwind 표준색에 없는 프로젝트 고유의 색을 11단계로 설정 파일에 추가
v4의 @theme 설정 작성
사이트의 메인 컬러에서 Tailwind v4의 CSS 변수를 한 번에 작성
디자인 컴프의 구현 준비
컴프의 지정 색에서 구현용 11단계 코드를 준비하고, 디자인 도구에도 전사
기초 지식
Tailwind의 50~950이 나타내는 것
Tailwind CSS의 색은 50이 가장 밝고 950이 가장 어두운 11단계의 숫자로 밝기를 나타내며, 500이 그 색의 기준이 됩니다. 숫자는 "bg-primary-500"이나 "text-primary-700" 같이 클래스 이름 끝에 붙여 사용합니다.
- 50~300의 단계：50~300의 단계는 배경색이나 옅은 칠하기에 자주 사용되는 밝은 색으로, 위에 어두운 글자를 겹쳐도 읽기 쉬운 색입니다.
- 600~950의 단계：600~950의 단계는 버튼 호버 시나 제목의 글자색에 자주 사용되는 어두운 색으로, 흰색 배경 위에서도 명확히 보이는 색입니다.
v3과 v4의 색 정의 방법 차이
Tailwind CSS의 v3에서는 색을 tailwind.config.js의 JavaScript로 정의하고, v4에서는 CSS 파일의 @theme 내에 CSS 변수로 정의합니다. 어느 쪽 방식이든 정의한 색은 "bg-primary-500" 같은 동일한 클래스 이름으로 사용할 수 있습니다.
- v3의 표기 방식：v3의 표기 방식은 theme.extend.colors 내에 "primary: { 500: '#3B82F6' }" 같이 색 이름과 단계를 중첩하여 쓰는 형식입니다.
- v4의 표기 방식：v4의 표기 방식은 @theme 내에 "--color-primary-500: #3B82F6;" 같이 색 이름과 단계를 하이픈으로 연결한 변수 이름으로 쓰는 형식입니다.
안전성과 개인정보 보호
브라우저 내 처리
입력 데이터는 사용 중인 브라우저 내에서만 처리되며 외부로 전송되지 않습니다.
브라우저 내에서만 처리
팔레트 계산 및 코드 생성는 모두 사용 중인 브라우저 내에서 처리되며, 입력 데이터는 서버로 전송되지 않습니다.
통신은 HTTPS로 암호화
페이지 로드도 TLS로 암호화되어 제3자가 내용을 읽을 수 없습니다.
제3자로의 전송 없음
광고 네트워크나 트래커 등 외부 서비스로 입력 내용을 전송하지 않습니다.
결과 자동 저장 없음
입력한 색 및 색 이름나 입력 제안을 서버에 저장하지 않습니다.
Google 검색에서 RAKKOTOOLS 팔로우하기
187개의 편리한 도구를 Google 검색·AI 검색에서 더 쉽게 찾을 수 있습니다!
- 검색에서 발견
- AI 검색에서도 표시
- 새 도구도 발견
업데이트 정보
- update #318
Tailwind 색상 생성 추가, 1색에서 11단계 색상과 설정 코드 생성