색상 팔레트 생성기 (Tailwind CSS용 50~950 단계)
기준색과 이름을 정하면 50부터 950까지 단계별 색과 설정 코드가 만들어져요.
입력한 글과 파일은 서버로 보내지 않고 이 브라우저 안에서만 처리해요.
칸을 누르면 HEX 가 복사돼요. 아래 숫자는 흰 글자·검은 글자 중 더 잘 보이는 쪽의 대비율이에요.
Tailwind v4 (@theme)
Tailwind v3 (tailwind.config.js)
미리 보기
저장했어요. 바뀐 내용은 바로 반영돼요.
시작하기더 알아보기새 기능
사용 방법
- 기준색을 고르거나 HEX 코드를 넣고, 클래스에 쓸 색 이름(예: brand)을 정하세요.
- 50(가장 밝음)~950(가장 어두움) 단계가 OKLCH 밝기 기준으로 만들어져요. 「기준색을 가까운 단계에 그대로 두기」를 켜면 고른 색이 팔레트 안에 그대로 쓰여요.
- v4 는 CSS 의 @theme 블록을, v3 는 tailwind.config.js 의 colors 부분을 복사해 붙여 넣으세요. bg-brand-500 처럼 쓸 수 있어요.
- 아래 미리 보기에서 버튼·배지·알림 상자에 입힌 모습을 확인하세요.
자주 묻는 질문
OKLCH 로 계산하면 뭐가 좋은가요?
OKLCH 는 사람 눈에 느껴지는 밝기를 기준으로 해서 단계 간격이 고르고, 노랑·파랑처럼 색마다 밝기가 들쭉날쭉한 문제가 줄어요. Tailwind v4 기본 색도 oklch() 로 적혀 있어요.
Tailwind 기본 색과 똑같이 나오나요?
아니요. 이 도구만의 밝기·채도 곡선으로 계산해서 공식 색과 값이 달라요. 내 브랜드 색으로 비슷한 쓰임새의 단계를 빠르게 만들 때 쓰세요.
화면에 표시할 수 없는 색은 어떻게 되나요?
밝기와 색상은 그대로 두고 채도만 줄여 sRGB 안으로 맞춰요. 그래서 아주 진한 색은 일부 단계에서 조금 차분해질 수 있어요.
Tailwind CSS 는 Tailwind Labs Inc. 의 상표예요. 이 도구는 Tailwind Labs 와 관계가 없고 보증을 받지도 않았어요.