ProUtils

Tailwind 색상 스케일 생성기

기준 색상에서 Tailwind 스타일의 색상 스케일을 만듭니다.

이 도구에 대해

하나의 기준 색상에서 50-950 단계의 실용적인 색상 스케일을 만들고 CSS 변수를 복사합니다.

프로토타입, 내부 도구, 브랜드 실험, 디자인 토큰 초안을 빠르게 만들 때 적합합니다.

brand-50
#F4F7FE
brand-100
#E5ECFD
brand-200
#C2D3F9
brand-300
#96B4F5
brand-400
#628FF1
brand-500
#2563EB
brand-600
#2157CF
brand-700
#1B49AE
brand-800
#153988
brand-900
#102A63
brand-950
#0A1A3D
CSS 변수

사용 방법

  1. 1

    필요한 값을 입력하거나 텍스트를 붙여넣습니다.

  2. 2

    옵션이나 단위를 원하는 방식으로 조정합니다.

  3. 3

    표시된 결과를 확인하고 필요한 곳에 복사해 사용합니다.

기능

즉시 결과

값을 입력하면 결과가 브라우저에서 바로 업데이트됩니다.

브라우저 처리

입력값은 서버로 업로드하지 않고 기기 안에서 처리됩니다.

간단한 입력

반복 사용에 맞춘 명확한 입력 필드와 출력값을 제공합니다.

무료 사용

가입이나 설치 없이 바로 사용할 수 있습니다.

주요 사용 사례

  • Tailwind 스타일 브랜드 팔레트 초안을 만듭니다.
  • 테마 파일에 붙여넣을 CSS 커스텀 속성을 복사합니다.
  • 브랜드 색상이 충분한 밝고 어두운 범위를 갖는지 확인합니다.

관련 도구

개발자 도구