Go Toolstack

Tailwind 색상 팔레트 생성기 (50-950)

단일 브랜드 색상에서 Tailwind CSS와 완벽 호환되는 50~950 음영 스케일을 자동 생성.

Tailwind 색상 팔레트 생성기 (50-950)

단일 브랜드 색상에서 Tailwind CSS와 완벽 호환되는 50~950 음영 스케일을 자동 생성.

사용 방법

1
Set Criteria & Options
Select length, format, or generation parameters for your output.
2
Generate Instantly
Generate secure, random, or custom data entirely in your browser.
3
Copy or Export
Copy the generated output to your clipboard or download the file.

이 카테고리의 다른 클라이언트 사이드 유틸리티를 살펴보세요

이미지 & 디자인 허브 • 워크플로 및 기능 비교

모든 이미지 & 디자인 도구, 브라우저 제한 사항 및 선택 가이드를 살펴보세요.

허브 살펴보기 →
JSON 포맷터 및 유효성 검사기

64비트 정수 왜곡 없이 JSON을 포맷 및 압축하고 JSON Schema(Draft-07 / 2020-12) 규칙으로 검증합니다.
Base64 인코더 및 디코더

텍스트 및 파일을 Base64 형식으로 인코딩하거나 원본 텍스트로 디코딩.
SQL 포맷터 및 코드 압축기

브라우저에서 직접 SQL 쿼리를 들여쓰기하고, 예약어를 대문자화하며 미니파이.

관련 블로그 가이드

기술 가이드, 문제 해결 및 모범 사례 안내서

개념 및 지식 허브

Tailwind CSS 색상 팔레트 생성기: 50부터 950까지 11단계 음영 자동 추출

Tailwind CSS 색상 팔레트 생성기는 단 하나의 기준 브랜드 대표 색상(HEX, RGB, HSL)을 입력하면 테일윈드 CSS 표준 사양에 완벽히 부합하는 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950의 11단계 음영 팔레트를 지능적으로 자동 산출해 주는 프론트엔드 디자인 시스템 도구입니다. 부드러운 파스텔 톤의 배경색부터 짙은 텍스트 및 다크 테마 배경에 이르기까지 완벽한 명도 스펙트럼을 제공하여 UI 일관성을 확보합니다.

실제 신규 프로덕트의 브랜드 키 컬러 #3B82F6(로열 블루)를 입력창에 기입하면, 색상 보간 엔진이 단 0.005초 만에 가장 밝은 50(#eff6ff)부터 메인 500(#3b82f6)을 거쳐 가장 짙은 950(#172554)까지 11단계 HEX 코드를 계산해 내며, tailwind.config.js에 즉시 붙여넣을 수 있는 theme.extend.colors 객체 코드를 원클릭 복사 가능한 상태로 제공하여 프론트엔드 구축 속도를 비약적으로 높여줍니다.

모든 HSL 명도/채도 보간 및 RGB 색상 변환 수학 공식은 브라우저 내부 자바스크립트 엔진 안에서 실시간으로 처리됩니다. 사내 신규 브랜드의 독점 컬러 값이나 미출시 웹사이트의 디자인 파라미터가 외부로 유출될 염려 없이 안전하게 테일윈드 설정 파일을 제작하고 관리할 수 있습니다.

핵심 아키텍처 및 수학 공식

Shade(L) = ColorInterpolate(BaseColor, L_target) ; { 50: 95%, 500: Base, 950: 10% }

기준 색상의 HSL 색조(Hue)와 채도(Saturation)를 고정한 후 명도(Lightness) 곡선을 인간 시각 인지 특성에 맞춰 비선형 스케일로 감마 보간합니다.

모범 사례 및 필수 지침

  • 메인 브랜드 색상을 500번 음영으로 고정: 버튼 배경, 링크 하이라이트 등 주력 브랜드 컬러는 500 또는 600 단계에 위치시키는 것이 UI 컴포넌트 계층을 일관되게 설계하는 지름길입니다.
  • 다크 모드와 라이트 모드 대칭 활용: 라이트 모드의 카드 배경으로 50~100번을 사용했다면, 다크 모드에서는 반대로 900~950번 음영을 배경으로 매핑하여 자연스러운 테마 전환을 구현하세요.
  • WCAG 명도 대비율 병행 점검: 생성된 500번 버튼 배경 위에 흰색 텍스트를 얹을 때 웹 접근성 명도 대비(4.5:1 이상)를 충족하는지 색상 대비 도구와 연계하여 확인하세요.
  • tailwind.config.js 확장(extend)에 배치: 기본 색상을 덮어쓰지 않고 추가하고자 할 때는 config 파일의 theme.colors가 아닌 theme.extend.colors 객체 내부에 등록해야 기본 유틸리티 클래스가 유지됩니다.

자주 묻는 질문 (FAQ)

입력한 기준 색상이 500번 단계에 정확히 일치하여 출력되나요?
네, 입력하신 기준 색상은 표준 중심점인 500번 음영으로 정확히 매핑되며, 이를 기준으로 위아래 50~400번과 600~950번이 자연스러운 색조 연속성을 유지하며 조화롭게 자동 파생됩니다.
HEX 외에 RGB나 HSL 색상 형식도 입력할 수 있나요?
지원됩니다. 입력 필드에 #3B82F6 같은 16진수 코드뿐만 아니라 rgb(59, 130, 246) 또는 hsl(217, 91%, 60%) 형식도 자유롭게 입력하여 팔레트를 추출할 수 있습니다.
생성된 팔레트 코드를 Tailwind v3 및 v4 프로젝트에 바로 적용할 수 있나요?
제공되는 설정 객체 코드는 Tailwind CSS v3의 tailwind.config.js 및 v4의 CSS 테마 변수(@theme) 양식 모두에 완벽하게 호환되어 즉시 복사해 적용할 수 있습니다.
색상 생성 기록이 외부 데이터베이스에 수집되나요?
전혀 수집되지 않습니다. 모든 색상 변환과 코드 생성은 100% 사용자의 브라우저 내부 스크립트에서만 구동되므로 브랜드 고유 컬러 자산의 기밀성이 유지됩니다.