Tailwind 색상 찾기

Nearest Tailwind Colour

임의의 색과 가장 가까운 Tailwind 팔레트 값을 찾고 체감 색차를 보여 줍니다.

가지고 있는 색에 가장 가까운 Tailwind 팔레트 값을 찾아 줍니다. RGB 거리가 아니라 OKLab에서의 ΔE로 잽니다. 그리고 그 색이 어느 계열에 속하는지도 알려 주는데, 다른 질문이면서 대개 더 쓸모 있는 질문입니다.

🔒 브라우저 안에서만 처리tailwindcolorlookupcss

내 색

색

무채색 계열 건너뛰기slate, gray, zinc, neutral, stone 같은 것들이 회색에 가까운 질의에서는 늘 이깁니다. 틀린 답은 아니지만 대개 궁금했던 답도 아닙니다.

무엇으로 재는지

거리는 RGB의 유클리드 거리가 아니라 OKLab에서의 ΔE입니다. RGB로 재면 남색과 순수한 파랑이 128만큼 떨어져 있고, 훨씬 눈에 띄게 다른 두 중간 회색은 16만큼 떨어져 네 배 가깝다고 나옵니다. OKLab은 직선 거리가 지각적 차이에 가깝도록 만들어졌고, 여기서 묻는 것이 바로 그것입니다.

≤ 0.001 — 같은 색입니다. 이것이 그 Tailwind 색입니다.
≤ 0.02 — 눈으로 구분되는 한계보다 작은 차이입니다. 그대로 바꿔 써도 됩니다.
≤ 0.05 — 나란히 놓으면 다르지만, 따로 보면 충분히 가깝습니다.
≤ 0.1 — 눈에 띄게 다릅니다. 배경색이라면 괜찮지만 브랜드 색으로는 곤란합니다.
> 0.1 — 다른 색입니다. Tailwind에 가까운 색이 없으니 테마를 확장하세요.

설치된 Tailwind 4.3.3에서 팔레트를 읽었고, 실행할 때마다 테스트로 대조합니다.

가장 가까운 색

indigo-600

#4f39f6

나란히 놓으면 다르지만, 따로 보면 충분히 가깝습니다.

ΔE OKLab

0.0319

Tailwind 값

oklch(51.1% 0.262 276.966)

그다음으로 가까운 색

indigo-700#432dd7ΔE 0.0545
blue-700#1447e6ΔE 0.0580
blue-600#155dfcΔE 0.0698
indigo-500#6260ffΔE 0.0745
violet-700#7008e7ΔE 0.0810
violet-600#7f22feΔE 0.0925
violet-800#5d0ec0ΔE 0.1010

가까운 계열

indigo가장 가까운 단계 600ΔE 0.0319
blue가장 가까운 단계 700ΔE 0.0580
violet가장 가까운 단계 700ΔE 0.0810
purple가장 가까운 단계 700ΔE 0.1132
sky가장 가까운 단계 700ΔE 0.1415

"가장 가까운 색"과는 다른 질문이고, 대개 더 쓸모 있는 질문입니다. 브랜드 색이 어느 계열에 속하는지를 그 계열의 가장 좋은 단계로 점수 매깁니다.

여기에 충분히 가까운 것이 없다면, 가장 가까운 것으로 타협하는 대신 테마를 넓히는 것이 답입니다. 50–950 램프 전체 만들기로 내 색에서 램프를 만들어 @theme에 붙여 넣으세요.

사용 방법

색을 넣습니다
보통은 누가 보내 준 브랜드 16진수 값이겠죠. 가장 가까운 토큰과 그 16진수 값, ΔE가 바로 나옵니다.
색상을 맞추는 중이면 무채색은 건너뜁니다
slate, gray, zinc, neutral, stone은 회색에 가까운 질의에서 늘 이깁니다. 맞는 답이지만 궁금했던 답은 대개 아닙니다.
계열 목록을 봅니다
계열마다 가장 가까운 단계로 점수를 매깁니다. "가장 가까운 견본은 indigo-600"보다 "이 브랜드 색은 indigo 계열"이 더 쓸모 있습니다.