Softonic

트라이어드 배색 생성기

단계 1 / 2
다음

트라이어드(삼색) 배색은 색상환에서 서로 120°씩 떨어진 세 가지 색을 사용합니다. 빨강, 노랑, 파랑이 학교에서 배우는 대표적인 예죠. 결과는 혼란스럽지 않으면서 자연스럽게 균형 잡히고 활기찹니다. 색상 선택기로 기본 색을 고르면 이 생성기가 색을 HSL로 변환해 색상만 정확히 +120°와 +240° 회전시키고, 채도와 명도는 그대로 유지한 채 세 개의 스와치를 HEX 코드와 함께 보여줍니다. 스와치를 클릭하면 코드가 복사됩니다.

팔레트가 만들어지는 방식

  1. 1

    기본 색 선택

    색상 선택기로 팔레트의 중심이 될 색상을 고릅니다.

  2. 2

    두 짝꿍 색 계산

    도구가 HSL 공간에서 색상을 +120°와 +240° 회전시킵니다. 채도와 명도는 동일하게 유지되어 응집력 있는 트라이어드가 됩니다.

  3. 3

    HEX 코드 확인

    Base, Triadic +120°, Triadic +240°가 나란히 표시되며 각각 6자리 HEX 값 라벨이 붙습니다.

  4. 4

    클릭해서 복사

    스와치를 클릭하면 HEX 코드가 클립보드에 복사되어 CSS, Tailwind 설정, 디자인 툴에 바로 붙여 넣을 수 있습니다.

트라이어드 배색이 균형 있게 느껴지는 이유

색상환 둘레에 같은 간격으로 놓인 세 색은 색상의 이웃 영역을 전혀 공유하지 않습니다. 강하게 대비되면서도 120° 간격 덕분에 직접 보색(180° 차이)에서 일어나는 정면충돌은 피합니다. 눈에는 뚜렷이 다르면서도 조화로운 색으로 읽힙니다.

스와치 뒤의 수학

생성기는 HEX 색을 HSL로 변환하고 색상에 120°와 240°를 더한 뒤 다시 변환합니다. 움직이는 것은 색상뿐이므로 세 색은 항상 같은 채도와 명도를 공유합니다. 재미있는 부수 효과로, 정확히 120° 회전은 빨강, 초록, 파랑 채널 값을 순환 교대시키는 것과 같습니다. 기본값 #6366F1의 짝꿍이 #F16366과 #66F163, 즉 같은 세 바이트 쌍의 순서만 바뀐 값이 되는 이유입니다.

이 도구가 만들어내는 트라이어드 예시:

기본 색 Triadic +120° Triadic +240°
#FF0000 (빨강) #00FF00 #0000FF
#6366F1 (인디고) #F16366 #66F163
#E67E22 (주황) #22E67E #7E22E6
#0EA5E9 (하늘색) #E90EA5 #A5E90E
#2ECC71 (에메랄드그린) #712ECC #CC712E

과하지 않게 트라이어드 쓰기

선명한 세 색을 최대 채도로 쓰면 부담스럽습니다. 정석은 이렇습니다.

  • 주조색 하나(60%): 메인 UI에.
  • 보조색 하나(30%): 강조와 섹션에.
  • 포인트색 하나(10%): 핵심 인터랙션 요소에.

또 하나의 방법은 차분한 기본 색에서 시작하는 것입니다. 두 짝꿍 색이 기본 색의 채도를 물려받으므로, 부드러운 기본 색은 부드러운 트라이어드를 만듭니다.

트라이어드와 다른 배색 비교

배색 구조 느낌
보색 2색, 180° 차이 높은 대비, 강렬함
유사색 3색, 인접 차분함, 응집력
트라이어드 3색, 120° 차이 균형과 활기
테트라드 4색, 직사각형 풍부하지만 균형이 어려움
분할 보색 기본 + 준보색 2개 충돌 없이 강함

UI 디자인 팁

  • 쌍마다 대비를 확인하세요. 트라이어드 배색이 텍스트 오버레이의 WCAG AA 대비를 보장하지는 않습니다. 조합별로 검증하세요.
  • CTA에는 한 가지 색만 쓰고 유지하세요. 버튼 색이 트라이어드 안에서 바뀌면 사용자가 혼란스러워합니다.
  • 틴트와 셰이드를 활용하세요. 네 번째 색상을 더하지 않고도 팔레트를 확장할 수 있습니다.
  • 다크 모드에서 테스트하세요. 흰 배경에서 잘 어울리던 트라이어드도 어두운 배경에서는 구별이 어려워질 수 있습니다. 명도를 조정하세요.

자주 묻는 질문

360° 색상환을 세 등분하면 어느 색도 지배하지 않으면서 색상 사이 거리가 최대가 됩니다. 간격이 더 좁으면 유사색 배색이 되고, 더 넓으면 등간격이 깨져 대개 분할 보색 배색으로 넘어갑니다.

예, 다만 보통 부드럽게 다듬어 씁니다. 많은 브랜드가 트라이어드를 기본으로 삼되 셋 중 두 색의 채도를 낮추거나 톤을 눌러 성숙한 인상을 만듭니다. 최대 채도의 트라이어드는 발랄하거나 활기차게 읽히니 브랜드 개성에 맞추세요.

예. 생성기는 기본 색의 채도와 명도를 두 짝꿍 색에 그대로 적용하므로, 채도가 낮은 기본 색이면 똑같이 부드러운 트라이어드가 나옵니다. 전문적인 디자인이나 에디토리얼에서 흔히 쓰는 전략입니다.

순수한 회색은 채도가 0이라 회전시킬 색상이 없어서 세 스와치가 동일하게 나옵니다. 기본 색을 아무 색상 쪽으로 조금만 움직이면 세 스와치가 바로 갈라집니다.

가입이 필요 없고 아무것도 저장되지 않습니다. 색은 팔레트를 계산하고 표시하는 데만 쓰이며, 단계별 보기에서는 페이지 URL에도 포함되어 팔레트를 북마크하거나 공유하기 쉽습니다.

관련 도구

Material Design 색상 선택기

Material Design 색상 팔레트를 둘러보세요. 어떤 음영(50부터 A700까지)이든 HEX, RGB, HSL로 한 번에 복사합니다.

십자수 도안 만들기

JPEG, PNG, WebP를 10–150칸, 2–40가지 전용 색상, 기호, 정확한 스티치 수와 원단 크기가 포함된 인쇄용 십자수 도안으로 변환하세요.

이미지 포맷 변환기

브라우저에서 바로 이미지를 JPG, PNG, WebP로 변환하세요. 손실 형식의 품질을 조절하고 PNG와 WebP의 투명도는 그대로 유지됩니다.

Pantone to HEX 변환기

화면과 인쇄 매칭을 위해 Pantone PMS 색상을 가장 가까운 HEX, RGB, CMYK 값으로 변환하고 견본 미리보기를 제공합니다.

이미지 색상 반전

이미지의 모든 RGB 채널을 반전시켜 네거티브를 생성합니다. 창의적인 편집이나 필름 스캔본을 확인하는 데 유용합니다.

모눈종이 생성기

인쇄용 모눈종이를 온라인으로 만드세요: 사각 또는 점 격자를 선택하고 간격을 mm로 설정하며 A4 또는 Letter와 원하는 선 색을 지정한 뒤, 인쇄하거나 선명한 SVG로 내려받으세요.

이 도구는 다른 언어로도 제공됩니다