유사색 배색

Free

이미지

브라우저에서 바로 어떤 기본 색상으로든 조화로운 유사 색상 팔레트를 생성합니다.

기본 색상

색상 개수 각도 단계

최근 활동

모든 사람에게 공개됩니다. 모든 방문자의 최근 20회 사용 내역, 최신순으로 표시됩니다.

아직 활동이 없습니다. 첫 번째가 되어보세요.

이 도구가 유용했나요? 댓글을 남기거나 팁을 공유하거나 개선할 점을 알려주세요.

아직 댓글이 없습니다. 첫 번째로 의견을 남겨보세요!

이 도구는 브라우저에서 바로 기본 색상으로부터 유사색 배색을 생성합니다. 색상을 선택하거나 입력하고, 몇 가지 색상과 각도 단계의 너비를 정하면, 각 색상의 HEX, RGB, HSL 값이 포함된 조화로운 팔레트를 얻을 수 있습니다.

›유사색 배색이란 무엇인가요?

유사색 배색은 색상환에서 서로 가까이 있는 색상을 사용하며, 보통 기본 색조에서 30도에서 60도 이내입니다. 색조가 서로 가깝기 때문에 이러한 팔레트는 고대비가 아니라 조화롭고 통일감 있게 느껴집니다.

›팔레트는 어떻게 생성되나요?

기본 색상은 HSL로 변환되고, 선택한 각도 단계만큼 색조를 위아래로 이동하여 새 색상을 생성하며, 기본 색상과 동일한 채도와 명도를 유지하므로 팔레트의 모든 색상이 같은 계열의 일부처럼 느껴집니다.

›어떤 각도 단계를 사용해야 하나요?

30도는 유사색 배색의 전통적인 선택이며 대부분의 디자인에 잘 작동합니다. 더 은은하고 촘촘하게 모인 팔레트를 원하면 15도를, 대비가 더 커지기 시작하는 더 넓은 확산을 원하면 45도를 사용하세요.

›팔레트를 CSS에서 직접 사용할 수 있나요?

네, "CSS 변수로 복사"를 사용하면 각 색상이 사용자 지정 속성으로 포함된 바로 붙여넣기 가능한 :root 블록을 복사할 수 있고, "HEX 목록으로 복사"를 사용하면 한 줄에 하나씩 16진수 코드만 복사할 수 있습니다.

›이것이 보색이나 삼색 배색과 어떻게 다른가요?

보색 배색은 높은 대비를 위해 색상환에서 반대편에 있는 색(180도 간격)을 짝지으며, 삼색 배색은 120도씩 균등하게 떨어진 세 가지 색을 사용합니다. 유사색 배색은 대신 모든 색을 가까이 유지하여 대비보다 조화를 우선시합니다.