Tailwind CSS 11단계 색상 팔레트 생성기와 API

• Tailwind CSS 팔레트 작업을 단일 Hex 값에서 시작해 50~950까지 11단계 색상으로 빠르게 확장할 수 있음
• 기준 스톱은 기본 500이며, 필요하면 50~950 범위의 다른 위치를 기준색으로 지정할 수 있음
• 채도와 Hue를 조정해 단순한 밝기 변화보다 더 자연스러운 팔레트를 만들 수 있음
• Lightness/Luminance 최소·최대값과 모드 전환에 따라 흰색·검정색 쪽 색상 분포가 달라짐
• API는 현재 기본 Hex 값 기반 팔레트 반환에 집중하며, HSL 조정 옵션은 아직 제공하지 않음

---

Tailwind CSS 팔레트 만들기

• Palette Creator는 유효한 16진수 색상값을 초기값으로 받아 Tailwind CSS용 11단계 팔레트를 생성함
• 기본 기준 스톱은 500이지만, 50~950 중 다른 스톱으로 바꿔 원하는 색상을 팔레트의 중심에 둘 수 있음

• 색상 조정 방식

  • 100% Saturation 색상은 Hue Shift를 위아래로 적용해 팔레트에 변화를 줄 수 있음
  • 채도가 낮은 기본 색상은 양끝에서 Saturation을 높이면 더 흥미로운 팔레트가 됨
  • Minimum/Maximum Lightness 또는 Luminance를 조정해 나머지 색상을 흰색·검정색 극단까지 펼칠 수 있음
  • Lightness와 Luminance를 전환하면 극단부 색상 분포가 다르게 생성됨
  • 색상 설계 원칙은 Adam Wathan과 Steve Schoger의 Refactoring UI에서 영감을 받았으며, 해당 책은 자동화 도구 사용을 권장하지 않음
  • 이 도구는 완성된 정답을 대신 만들기보다 새 팔레트 생성을 빠르게 시작하는 데 초점을 둠

API와 출력 사용

• Palette API로 여러 팔레트 세트를 가져올 수 있음
• 단일 Hex 값만으로 50~950 팔레트를 만들어야 하는 디자인 도구에서 활용 가능함
• 현재 API는 기본 Hex 값 기반 팔레트만 반환하며, HSL tweak 옵션은 제공하지 않음
• 생성된 팔레트는 Tailwind 설정용 CSS에 붙여 넣을 수 있는 형태로 제공됨
  • 예시 출력은 @theme 블록 안에 --color-yellow-50부터 --color-yellow-950까지의 OKLCH 색상 변수를 포함함

[GN⁺]

Hacker News 의견들

• 이런 도구에 접근성 개발자 경험이 기본으로 들어가면 좋겠음
  색상 팔레트를 정의할 때 색상 이름만 봐도 조합이 접근 가능한지 알 수 있게 하는 방식임
  예를 들어 USWDS 디자인 시스템에서는 blue-30 on gray-80이 접근 가능(WCAG AA)하다는 걸 알 수 있는데, 두 값의 차이가 50 이상이기 때문임
  이 다소 좁은 개념에 대해 예전에 글을 쓴 적 있음: https://darekkay.com/blog/accessible-color-palette/

  • 좁은 개념이라고 했지만, 웹 디자인에서는 최우선 요소가 되어야 한다고 봄
    누구나 언젠가는 영구적이든 일시적이든 장애를 겪게 되고, Streamlit 같은 훌륭한 도구도 접근성 때문에 못 쓰는 경우가 많음
  • Radix Colors에는 접근성 관련 기능이 많이 내장돼 있음
    https://www.radix-ui.com/colors
    WorkOS에서 일하고 있고, Radix는 우리가 운영하는 오픈소스 프로젝트임
  • Stripe도 자신들의 접근 가능한 색상 시스템에 대해 글을 냈음: https://stripe.com/blog/accessible-color-systems
    다만 그 개념을 활용해 새 팔레트를 생성하는 도구는 아직 잘 모르겠음
  • Google이 쓰는 꽤 큰 사양인 Material 3도 이런 식으로 동작하는 색상 시스템을 갖고 있음

• 색을 가지고 노는 걸 좋아하는데, 이것도 좋은 도구임
  다른 괜찮은 대안으로는 https://adevade.github.io/color-scheme-generator/, https://colorcolor.in은 Tailwind를 직접 생성하진 않지만 완성도가 좋고, http://colormind.io, https://uicolors.app/create가 있음

  • 오래전부터 완벽한 색상 도구를 찾고 있는데 아직 못 찾았음
    이 라이브러리가 보여주는 수준까지 고급으로 다룰 수 있는 도구를 원함: https://colorjs.io/
  • https://github.com/ardov/huetone (https://huetone.ardov.me/)를 추천하고 싶음
    비슷한 도구에서 못 본 독특한 UI가 있고, 그래프를 통해 팔레트 전체 색상의 상대적인 L/C/H를 볼 수 있음
    덕분에 더 일관된 팔레트를 만들기 쉬워짐
  • https://huemint.com/를 좋아함
  • 요즘은 사이트 로딩이 좀 느린 것 같지만, 예전부터 https://www.colourlovers.com를 좋아했음
  • 좋은 목록임
    개인적으로 자주 쓰는 일반적인 색 이론 관련 링크를 더하자면, https://paletton.com/은 색 이론 기반 팔레트를 만들고 전체 배색을 생성할 수 있음
    https://medialab.github.io/iwanthue/는 k-평균을 사용해 색을 분리해 주며, 그래프용 색상과 대비 확보에 좋음

• 최근에 하나 만들었음
  훨씬 단순하고 취향이 강하게 반영돼 있지만 Tailwind 설정을 생성할 수 있음: https://ghola.dev 데스크톱이나 iPad에서 가장 좋음
  웹 컴포넌트로 어떻게 만들었는지 긴 글도 있음: https://www.naildrivin5.com/blog/2024/01/24/web-components-i...

  • 만든 도구가 마음에 듦
    한 번에 색 하나만 다루는 걸 팔레트 생성기라고 부르는 건 맞지 않는 것 같거나, 적어도 내가 찾는 건 아님
    앱용 색상 묶음을 만들어 주는 팔레트 생성기가 필요하고, 이 도구가 그런 쪽에 가까움

• 훌륭함
  로고 하나에서 시작해 1분도 안 걸려 팔레트를 만들었는데, 지난번에 직접 30분 걸려 만들었던 것보다 더 잘 나왔음

• 마음에 듦
  이 색상들을 Figma와 동기화하는 가장 쉬운 방법이 뭘지 궁금함
  전문 디자이너들은 이런 색을 생성하고 Tailwind로 내보내는 플러그인을 쓰는 걸지도 모르겠음

  • 이런 종류의 플러그인을 찾는 건가? https://github.com/croma-app/huehive-figma-plugin
  • Figma Tokens가 괜찮은 접근임
  • Figma의 색상 처리 방식은 너무 답답하고 이상해서 이제 신경 쓰지 않게 됨
    몇 번 제대로 써보려고 했지만 너무 수동적이고 번거로워서 포기하게 됨

• 좋은 도구임
  내가 코드베이스에서 쓰는 다른 접근은 CSS 변수로 색상 팔레트를 정의하고, Tailwind 설정은 그 변수를 가리키게 하는 방식임
  그러면 실행 시점에 서로 다른 색상 테마를 끼워 넣을 수 있음

• 아주 유용한 도구임
  단일 색상에서 색상 팔레트를 생성한 뒤, 결과를 https://palettte.app에 넣어 각 색을 수동으로 조정해서 씀

• 데모에 나온 brand 예시는 보통 설정에서 사람들이 이렇게 쓰는 방식인지 궁금함
  기본 색상을 수정하거나 primary, secondary 같은 새 변수를 만드는 식으로 쓸 줄 알았음

  • tints.dev 만든 사람임
    brand 색상 세트는 내 블로그 simeongriggs.dev에서 쓰는 색이고, 실제로 이 도구에 500 견본값을 넣어 나머지를 생성했음

• 그라디언트에 유용해 보임
  아무도 Paletton을 언급하지 않는 게 이상한데, 색 고를 때 내 주력 도구임: https://paletton.com/
  기본 색에서 시작하면 팔레트 안의 인접 색상으로 이어지는 그라디언트도 얻을 수 있음
  특히 삼색 조화와 사색 조화가 유용함

• 색상 이동을 적용하는 방법을 적극적으로 찾고 있었는데도 알아내는 데 한참 걸렸음