Dev · Instrument
Tailwind 색상 생성기
HEX 색상과 가장 가까운 Tailwind 클래스를 찾아드립니다
Tailwind 색상 생성기
임의의 HEX 색상을 입력하면 Tailwind CSS에서 가장 가까운 색상 클래스를 찾아드립니다. 예를 들어 디자인에서 #6366F1을 사용하고 있다면 indigo-500과 같이 대응하는 Tailwind 클래스를 바로 확인할 수 있습니다. 전체 Tailwind 컬러 팔레트도 함께 표시되어 색상 선택에 활용할 수 있습니다.
자주 묻는 질문
Tailwind CSS 색상 클래스란?
bg-blue-500, text-red-300처럼 색상명과 명도(50~950)를 조합한 CSS 클래스입니다. Tailwind CSS 프레임워크에서 기본 제공합니다.
정확히 일치하는 색상이 없을 때는?
Lab 색 공간에서 가장 가까운 Tailwind 색상을 찾아 표시합니다. 색상 거리가 작을수록 원래 색과 유사합니다.
커스텀 색상을 Tailwind에 추가하려면?
tailwind.config.js의 theme.extend.colors에 추가하면 됩니다: colors: { brand: '#6366F1' }
Tailwind 색상 클래스 숫자의 의미는?
50이 가장 밝고 950이 가장 어둡습니다. 500이 기준 색상입니다.
팔레트에서 색상을 클릭하면?
해당 색상의 HEX 값이 클립보드에 복사됩니다.
Tailwind v3 기준인가요?
예. Tailwind CSS v3의 기본 색상 팔레트를 사용합니다.
black과 white 색상은?
Tailwind의 black(#000000)과 white(#ffffff)는 숫자 없이 사용합니다: bg-black, bg-white.
색상을 TailwindCSS에서 사용하는 방법은?
bg-{color}-{shade} (배경), text-{color}-{shade} (텍스트), border-{color}-{shade} (테두리) 형식으로 사용합니다.