HEX 틴트 셰이드

틴트 / 셰이드 생성기입니다. HEX 하나로 흰색 쪽, 검정 쪽 색 단계를 만듭니다.

클릭하면 복사됩니다

예제 — 스와치를 클릭

여러 색을 한 번에 변환합니다. 줄마다 하나, 또는 #3B82F6, #FF573380처럼 쉼표. 「예시 넣기」를 누르면 세 줄이 들어가고 아래에 표가 나옵니다.

HEX 틴트와 셰이드

틴트 / 셰이드 생성기입니다. HEX를 흰 쪽, 검정 쪽으로 섞어 호버·테두리용 단계를 만듭니다.

사용 방법

  1. HEX, rgb(), hsl()을 붙이거나 색 칩·무작위·예시(#3B82F6, #171B45, #0074D9, #0F766E)를 누르고, 되는 브라우저에서는 화면에서 집습니다.
  2. 축 기본값은 혼합(흰 / 검)입니다. 명도·채도·색상은 HSL의 나머지 둘을 고정합니다. 간격은 5%, 10%, 20%, 25%이고 직접은 2–20등분입니다.
  3. 전체 단계는 왼쪽이 셰이드, 가운데가 기준색, 오른쪽이 틴트입니다. HEX는 색 아래입니다. 클릭하면 그 HEX를 복사하고 칩을 고칩니다.
  4. 토큰 이름 기본값은 brand이며 --brand-tint-10 같은 CSS 변수와 Tailwind 조각이 나옵니다. 결과 복사는 CSS를 복사합니다. 예시 표시는 #3B82F6을 10% 혼합으로 다시 넣습니다.
  5. 일괄은 HEX 여러 개를 받습니다. 예시 채우기는 #3B82F6, #171B45, #0074D9입니다. 각 줄은 기준색, 중간 틴트, 중간 셰이드입니다.

주의 사항

혼합은 sRGB에서 #FFFFFF 또는 #000000으로 직선입니다. #3B82F6의 50% 틴트는 흰 위에 50% 올린 색과 같습니다. 명도 / 채도 / 색상은 HSL이고 OKLCH가 아닙니다. 잘못된 HEX는 오류입니다. 모두 지우면 단계가 비습니다. 관련: HEX to Tailwind, 투명도 겹침, HEX to RGBA.

어디에 쓰나요

  • 브랜드 HEX로 호버, 누름, 테두리.
  • 10% 간격을 100–900 토큰에 맞출 때.
  • 명도는 두고 채도만 낮춘 약한 면.
  • 색상을 돌려 같은 무게의 짝 색.

자주 묻는 질문

50% 틴트가 흰 위 50% 투명과 같나요?

혼합 축에서는 같습니다. #FFFFFF 위에 50% 올린 색입니다.

10%가 Tailwind 50–950인가요?

양쪽 아홉 칸과 기준색이라 개수는 가깝습니다. 숫자는 혼합 비율이지 OKLCH 50–950이 아닙니다. 기본 클래스명은 HEX to Tailwind를 쓰세요.

색을 여러 개 붙여도 되나요?

됩니다. 한 줄에 하나, 또는 괄호 밖의 쉼표입니다. rgb(22, 163, 74)는 한 항목입니다.