색상환

색상환 사용하기

색상환은 색들이 서로 어떻게 관계되는지 시각적으로 이해하는 방법입니다. 색상을 원형으로 배치해 기준 색상을 고르고, 가까운 색을 비교하며, 예측 가능한 관계로 균형 잡힌 팔레트를 만들기 쉽게 합니다.

색상환이란?

색상환은 빨강, 주황, 노랑, 초록, 파랑, 보라를 원형 스펙트럼에 배치합니다. 가까운 색은 보통 서로 관련되고 부드럽게 느껴지며, 반대쪽 색은 더 강한 대비와 에너지를 만듭니다.

이 색상환 사용법

색상환을 드래그해 색상을 선택한 다음 선택기 안에서 채도와 밝기를 조정하세요. 현재 색상은 Hex, RGB, HSL, HSV, OKLCH 값, 상단 팔레트, 조화 스와치, 내보내기 패널을 업데이트합니다.

원색

원색은 많은 색상 체계의 출발점입니다. 전통 미술 이론에서는 빨강, 노랑, 파랑입니다. 화면에서는 RGB가 빨강, 초록, 파랑 빛으로 웹사이트, 앱, 디지털 디자인 도구의 색을 만듭니다.

2차색

2차색은 두 원색을 섞어 만듭니다. 전통 색상환에서는 주황, 초록, 보라가 원색 사이에 위치하며 따뜻한 팔레트, 차가운 팔레트, 중립적인 팔레트를 연결합니다.

3차색

3차색은 원색과 2차색 사이에 있습니다. 노랑-주황, 빨강-주황, 빨강-보라, 파랑-보라, 파랑-초록, 노랑-초록 등이 포함되어 기본 6색 색상환보다 더 많은 뉘앙스를 줍니다.

따뜻한 색과 차가운 색

빨강, 주황, 노랑 같은 따뜻한 색은 보통 활발하고 밝으며 눈길을 끕니다. 파랑, 초록, 보라 같은 차가운 색은 더 차분하고 넓게 느껴질 수 있습니다. 강한 팔레트는 한 온도를 기반으로, 다른 온도를 강조로 쓰는 경우가 많습니다.

보색

보색은 색상환에서 서로 마주 보는 색입니다. 높은 대비를 만들며 버튼, 강조, 배지, 주변 인터페이스에서 돋보여야 하는 요소에 유용합니다.

유사색

유사색 팔레트는 색상환의 이웃 색을 사용합니다. 색상이 가까워 결과가 보통 부드럽고 자연스러우며 배경, 카드, 차트, 일러스트 세부 요소에서 제어하기 쉽습니다.

삼색 배색

삼색 팔레트는 색상환에서 균등하게 떨어진 세 가지 색상을 사용합니다. 한 색이 주도하고 나머지 두 색을 절제된 강조로 쓰면 생생하면서도 균형 잡힌 구성이 됩니다.

분할 보색

분할 보색 팔레트는 하나의 기준 색에서 시작해 직접 보색 양옆의 두 색을 사용합니다. 보색처럼 강한 대비를 주면서도 더 부드럽고 유연한 범위를 제공합니다.

사색 및 정사각형 배색

사색과 정사각형 팔레트는 색상환의 네 색을 사용합니다. 여러 강조색이 필요할 때 유용하지만, 한 색이 주도하고 나머지는 밝은 틴트나 어두운 음영으로 균형을 맞출 때 가장 잘 작동합니다.

음영, 틴트, 톤

색상 관계를 선택한 뒤 음영, 틴트, 톤으로 팔레트를 실용적으로 만드세요. 밝은 틴트는 배경, 어두운 음영은 텍스트나 테두리, 부드러운 톤은 보조 UI 상태에 적합합니다.

색 구성 만들기

주요 색에서 시작해 조화 유형을 선택하고 실제 인터페이스 요구에 맞춰 테스트하세요. 완성된 구성에는 보통 기본색, 한두 가지 강조색, 중립 표면, 읽기 쉬운 텍스트 색, 대비가 안전한 상태가 포함됩니다.

색상환 색상 내보내기

팔레트가 적절하면 CSS 변수, Tailwind 값, Figma 친화 객체, 접두사 함수 또는 일반 코드 목록으로 내보내세요. 보이는 스와치의 현재 색상도 직접 복사할 수 있습니다.

접근성과 대비

색상 조화가 가독성을 보장하지는 않습니다. 텍스트와 중요한 컨트롤의 대비를 확인하고 색상만으로 정보를 전달하지 않도록 하며, 시뮬레이터로 흔한 색각 조건에서 팔레트가 어떻게 달라지는지 확인하세요.