AZ Tools

Tailwind 색상 팔레트

색상

전체 기본 Tailwind 팔레트의 시각적 참조(v3.4·v4 동일). 각 스와치에 음영 번호·HEX 표시, 복사 모드 토글로 코드베이스가 원하는 형태로 값 가져오기: `bg-slate-700`·`#334155`·`rgb(51, 65, 85)`. 색상 이름이나 HEX 부분 문자열로 검색.

복사:

slate

gray

zinc

neutral

stone

red

orange

amber

yellow

lime

green

emerald

teal

cyan

sky

blue

indigo

violet

purple

fuchsia

pink

rose

Tailwind CSS v3.4 / v4의 기본 테마 값.

사용법

  1. 복사 형식 선택 — Tailwind 유틸리티는 Class, 디자인 도구는 HEX, CSS 변수는 rgb().
  2. 스와치 클릭으로 값 복사. 체크 마크가 잠깐 확인 표시.
  3. 색상(`emerald`) 또는 HEX 일부(`fde0`) 입력으로 필터링.

자주 묻는 질문

Tailwind v4와 일치?
예 — v4 기본 테마가 v3.4와 동일한 색상·음영 값 유지로 팔레트 동일. 설정에서 `theme.colors` 커스터마이즈했다면 프로젝트 팔레트가 다를 수 있음.
왜 5가지 회색 계열?
Tailwind는 slate·gray·zinc·neutral·stone 5가지 중성 색상 — 약간 다른 underton: slate는 차가운 청색 기울임·gray는 중성·zinc는 더 차갑고 강철 같음·neutral은 순수 중성·stone은 따뜻한 토프. 액센트와 가장 잘 어울리는 것 선택.
음영 950 의미?
Tailwind가 v3.3에서 기존 50~900 사다리에 더 어두운 950 단계 추가. 색상의 희미한 힌트가 있는 거의 검정 — 깊은 다크 모드 배경·매우 미묘한 테두리에 유용.

관련 도구