[컬러] https://swatchy.twosix.studio/

dingo2님 질문 주셔서 감사합니다.

요즘은 컬러팔레트나 웹사이트가 워낙 많아서 한번 찾아보시면 원하시는 것을 쉽게 찾을 수 있으실 것입니다. 개인적으로 아래 웹사이트가 정말 도움이 많이 되었는데요.

그 이유는 이 웹사이트는 tailwindcss를 기반으로 색 단계를 정합니다.

1. 익숙한 컬러 단계

보통 개발자분들이 tailwindcss를 많이 사용하시고 구글 머티리얼 2때문에 보통 색을 50~950 단계로 정하기에 굉장히 색의 형태를 제공합니다.

2. 회사 브랜드 컬러 기반으로 적용

회사 브랜드의 컬러를 입력하면 색이 400~600 사이에 어디에 들어갈 것인지 정해주고 다른 색도 자연스럽게 적용해줍니다.

3. 다양한 예시와 툴

    

   밑에 바로 보시면 UI 예시가 나와 있고 피그마 플러그인도 있으며, 색도 내보낼 수 있습니다.

https://uicolors.app/create

https://www.figma.com/community/plugin/1242548152689430610/tailwind-css-color-generator

한번 사용해보시고 안 맞으시면 말씀 해주세요. 필요하신 니즈에 맞게 다른 걸로 또 알려드릴게요.

안녕하세요, 인프런 AI 인턴입니다. dingo2님, 좋은 강의에 대한 피드백과 질문 해주셔서 감사드립니다.

swatchy.twosix.studio 에서 베이스 색상을 입력했을 때 예상과 달리 나머지 색상이 구성되는 이슈는 특정 플랫폼이나 툴에서 색상 범위를 자동으로 생성할 때 발생할 수 있는 일반적인 현상입니다. 피그마에서 .json 파일을 불러올 때, 입력한 베이스 컬러가 예상한 위치가 아닌 다른 위치에 할당되거나, 원하는 컬러 변화가 아닌 결과를 얻게 되었다면, 자동 생성된 컬러 팔레트가 기대한 결과와 다르게 설정된 것일 수 있습니다.

원하는 컬러 변화를 얻기 위해, 직접 컬러 팔레트를 조정하거나 다른 방법을 시도해볼 수 있습니다. 피그마내에서는 다른 플러그인을 사용해 보거나, 다른 외부 도구를 이용해 컬러 팔레트를 생성하는 방법이 있는데요. 아쉽게도 제공된 정보 내에서 직접적인 다른 플러그인이나 사이트 추천 정보는 없으나, UX/UI 디자인 과정에서 자주 사용되는 컬러 스키마 생성 툴을 살펴보시는 것을 추천드립니다. 예를 들어 Adobe Color, Coolors.co 등이 있으멀로 해당 사이트를 방문해 보시면 도움이 될 수 있습니다.

또한, 궁금증이 해결되지 않았다면, 해당 플랫폼의 문의 기능을 활용하거나 UX/UI 디자인 커뮤니티에 질문을 올려 도움을 받는 것도 좋은 방법입니다.

더 자세한 도움이 필요하시면 인프런 내 “1:1 문의하기”를 통해 질문해 주시기 바랍니다. 감사합니다.