디자인 / 색상

Tailwind 색상 스케일 생성기

하나의 브랜드 색상으로 50부터 950까지 전체 Tailwind CSS 팔레트를 생성합니다. Tailwind의 자체 색상처럼 OKLCH를 사용하며, Tailwind 4 테마 CSS, Tailwind 3 설정 또는 CSS 변수로 복사할 수 있습니다.

Tailwind 색상 스케일 생성기: 각 음영은 OKLCH 색상 공간에서 측정한 Tailwind 자체 팔레트의 단계별 밝기, 채도 및 미세한 색상 이동을 적용한 뒤, 입력한 색상이 해당 음영에 정확히 맞도록 조정합니다. 회색은 대신 Tailwind의 회색 계열을 따릅니다. sRGB 색 영역에서 표시할 수 없는 색상은 브라우저와 동일하게 CSS Color 4 색 영역 매핑 방식으로 변환합니다. Tailwind 4 출력은 OKLCH 값을 유지하며, 다른 형식은 hex를 사용합니다. 서버에 파일을 전혀 업로드하지 않고 브라우저에서 100% 로컬로 실행됩니다.

카테고리: 일상 도구
실행 횟수: 브라우저에서
비용: 무료 · 가입 불필요
사용 가능 여부: 사용 가능

Tailwind 색상 단계 생성기로컬 처리

브라우저에서 전부 실행됩니다

색상16진수이름입력한 색상은 shade입니다

50#f2f8ffoklch(97.6% 0.012 250.3)

100#dfecffoklch(93.9% 0.029 258.1)

200#bcd9ffoklch(87.6% 0.061 255.8)

300#8fbeffoklch(79.3% 0.106 256.6)

400#5e9cffoklch(69.6% 0.16 259.5)

500#3b82f6oklch(62.3% 0.188 259.8)

600#2668daoklch(54.2% 0.187 260.6)

700#1f57b6oklch(47.7% 0.163 260.6)

800#1f4997oklch(42.3% 0.137 261.4)

900#20417coklch(38.4% 0.109 261.4)

950#15274coklch(27.9% 0.073 263.2)

CSS (@theme)

@theme {
  --color-brand-50: oklch(97.6% 0.012 250.3);
  --color-brand-100: oklch(93.9% 0.029 258.1);
  --color-brand-200: oklch(87.6% 0.061 255.8);
  --color-brand-300: oklch(79.3% 0.106 256.6);
  --color-brand-400: oklch(69.6% 0.16 259.5);
  --color-brand-500: oklch(62.3% 0.188 259.8);
  --color-brand-600: oklch(54.2% 0.187 260.6);
  --color-brand-700: oklch(47.7% 0.163 260.6);
  --color-brand-800: oklch(42.3% 0.137 261.4);
  --color-brand-900: oklch(38.4% 0.109 261.4);
  --color-brand-950: oklch(27.9% 0.073 263.2);
}

색상 단계는 OKLCH로 측정한 Tailwind 자체 팔레트의 밝기, 채도, 색상 변화량을 따릅니다. 따라서 Tailwind의 blue-500으로 만든 단계는 Tailwind의 blue와 지각 가능한 색상 차이가 몇 단계 이내입니다. sRGB 범위를 벗어나는 색상은 CSS Color 4 색역 매핑 방식으로 범위 안에 맞춥니다.

스케일 사용

일반적으로 페이지와 카드 배경에는 50–100, 테두리에는 200–300, 버튼과 링크에는 500–600, 호버 상태에는 700, 밝은 배경의 텍스트에는 800–950을 사용합니다. 색상 대비 검사 도구로 텍스트와 배경 조합을 확인하십시오.

단일 색상을 hex, RGB, HSL, OKLCH 사이에서 변환하려면 색상 변환기를 사용하고, 사진에서 시작하려면 색상 팔레트 추출기를 사용하십시오.

Tailwind 4와 OKLCH

Tailwind CSS 4는 색상을 OKLCH로 정의하며, OKLCH는 넓은 색 영역을 지원하는 화면에서 sRGB를 넘어서는 색상도 표현할 수 있습니다. 여기서 출력되는 Tailwind 4 결과는 sRGB 범위 안에 있으므로 모든 화면에서 색상이 동일하게 보입니다.

사용 방법

색상을 선택하거나 hex 코드를 붙여넣습니다.
색상을 적용할 음영을 선택합니다. 일반적으로 500을 사용하거나 생성기가 자동으로 배치하도록 설정합니다.
Tailwind 4, Tailwind 3 또는 일반 CSS 변수용 코드를 복사합니다.

개인정보 보호 및 제한사항

모든 결과는 브라우저에서 생성됩니다.

자주 묻는 질문

왜 OKLCH를 사용하나요?

OKLCH의 밝기 단계는 모든 색상에서 눈에 동일한 단계처럼 보입니다. 따라서 같은 방식으로 만든 노란색과 파란색 스케일의 대비가 서로 맞지만, HSL에서는 그렇게 만들기 어렵습니다.

브랜드 색상에는 어떤 음영을 사용해야 하나요?

Tailwind가 가장 선명한 색상을 배치하는 500 또는 600을 일반적으로 사용합니다. 파스텔처럼 매우 밝은 색상은 200 또는 300이 더 잘 맞습니다. 색상의 밝기에 따라 자동으로 배치하려면 자동을 선택하십시오.

이 음영 위에서 텍스트를 읽기 쉽나요?

일반적으로 흰색 텍스트는 600 이상 어두운 음영에서, 어두운 텍스트는 400 이하 밝은 음영에서 사용해야 합니다. 단, 각 조합을 대비 검사 도구로 확인하십시오.

무료 도구 · 브라우저에서회 실행 · 계정 불필요