색상 선택기 사용하기
이 색상 선택기로 색을 시각적으로 고르거나 값을 직접 입력하고, 이미지에서 색을 샘플링하거나 색상환으로 팔레트를 탐색할 수 있습니다. 현재 색상은 Hex, RGB, HSL, HSV, OKLCH로 변환되어 CSS, 디자인 도구, 내보낸 코드에서 바로 사용할 수 있습니다.
Hex 색상 선택기 사용하기
선택 지점을 드래그하거나 채널 값을 편집하거나 Hex 코드를 입력해 색을 선택할 수 있습니다. 색상이 바뀌면 스와치, 조화 색상, 변형, 대비 미리보기, 내보내기 패널이 같은 값에서 함께 업데이트됩니다.
Hex 색상은 몇 가지인가요?
Hex 색상은 #RRGGBB 형식의 여섯 자리 16진수 문자를 사용합니다. 각 두 자리는 빨강, 초록, 파랑을 00부터 FF까지 제어하므로 16,777,216개의 RGB 색상을 표현할 수 있습니다.
이미지 색상 선택기
이미지 선택기는 업로드한 이미지에서 직접 색을 샘플링합니다. 이미지 위의 선택 지점을 움직여 색을 캡처하고 값을 비교한 뒤 페이지를 떠나지 않고 선택한 이미지 색상을 내보낼 수 있습니다.
색상환
색상환은 색상값을 기준으로 작업할 때 유용합니다. 바깥 고리를 드래그해 색상을 바꾸고 내부 영역에서 채도와 밝기를 조정하면 인터페이스 전체가 동기화됩니다.
음영, 틴트, 톤
음영은 선택 색상을 검정과, 틴트는 흰색과 섞고, 톤은 회색에 가깝게 만듭니다. 이런 변형은 hover 상태, 테두리, 배경, 비활성 상태, 계층형 UI 표면에 유용합니다.
색상 조화
조화 팔레트는 색상환의 관계를 기반으로 만들어집니다. 유사색, 보색, 분할 보색, 삼색, 사색, 정사각형 조합은 브랜드 팔레트, UI 강조색, 데이터 색상, 일러스트 시스템의 빠른 출발점이 됩니다.
색 공간
RGB는 빨강, 초록, 파랑 빛으로 화면 색상을 설명합니다. HSL은 색상, 채도, 명도를 분리해 직관적으로 조정하기 쉽습니다. HSV는 시각적 선택기에서 자주 쓰이며 OKLCH는 현대 CSS 팔레트에서 더 균일한 인상을 목표로 합니다.
Hex 코드
Hex 코드는 짧고 복사하기 쉬우며 브라우저와 디자인 도구에서 널리 지원됩니다. Hex와 RGB는 같은 채널을 설명하므로 색상 외형을 바꾸지 않고 변환할 수 있습니다.
색상 코드 내보내기
내보내기 패널은 보이는 팔레트를 Tailwind, Figma, CSS 변수, 접두사 함수, 일반 코드 목록 형식으로 모읍니다. 하나의 색은 스와치를 클릭하고 전체 그룹이 필요할 때는 내보내기를 사용하세요.
WCAG와 접근성
읽기 쉬운 색 조합은 대비에 달려 있습니다. 대비 검사기는 선택 색상을 밝은 배경과 어두운 배경에서 비교해 텍스트, 테두리, 표면 색상을 접근성 관점에서 고를 수 있게 합니다.
색맹 시뮬레이터
시뮬레이터는 흔한 색각 조건에서 현재 색상이 어떻게 달라질 수 있는지 보여줍니다. 색상 차이에만 의존하는 팔레트를 피하고 더 강한 대비, 라벨, 보조 시각 단서를 사용하도록 돕습니다.
다크 및 라이트 테마
음영, 틴트, 톤, 조화 팔레트는 다크 및 라이트 테마의 기반이 될 수 있습니다. 한 가지 색에서 시작해 주변 변형을 확인하고 배경, 전경, 버튼, 강조 상태에 맞는 값을 내보내세요.
색상환 사용하기
색상환은 색들이 서로 어떻게 관계되는지 시각적으로 이해하는 방법입니다. 색상을 원형으로 배치해 기준 색상을 고르고, 가까운 색을 비교하며, 예측 가능한 관계로 균형 잡힌 팔레트를 만들기 쉽게 합니다.
색상환이란?
색상환은 빨강, 주황, 노랑, 초록, 파랑, 보라를 원형 스펙트럼에 배치합니다. 가까운 색은 보통 서로 관련되고 부드럽게 느껴지며, 반대쪽 색은 더 강한 대비와 에너지를 만듭니다.
이 색상환 사용법
색상환을 드래그해 색상을 선택한 다음 선택기 안에서 채도와 밝기를 조정하세요. 현재 색상은 Hex, RGB, HSL, HSV, OKLCH 값, 상단 팔레트, 조화 스와치, 내보내기 패널을 업데이트합니다.
원색
원색은 많은 색상 체계의 출발점입니다. 전통 미술 이론에서는 빨강, 노랑, 파랑입니다. 화면에서는 RGB가 빨강, 초록, 파랑 빛으로 웹사이트, 앱, 디지털 디자인 도구의 색을 만듭니다.
2차색
2차색은 두 원색을 섞어 만듭니다. 전통 색상환에서는 주황, 초록, 보라가 원색 사이에 위치하며 따뜻한 팔레트, 차가운 팔레트, 중립적인 팔레트를 연결합니다.
3차색
3차색은 원색과 2차색 사이에 있습니다. 노랑-주황, 빨강-주황, 빨강-보라, 파랑-보라, 파랑-초록, 노랑-초록 등이 포함되어 기본 6색 색상환보다 더 많은 뉘앙스를 줍니다.
따뜻한 색과 차가운 색
빨강, 주황, 노랑 같은 따뜻한 색은 보통 활발하고 밝으며 눈길을 끕니다. 파랑, 초록, 보라 같은 차가운 색은 더 차분하고 넓게 느껴질 수 있습니다. 강한 팔레트는 한 온도를 기반으로, 다른 온도를 강조로 쓰는 경우가 많습니다.
보색
보색은 색상환에서 서로 마주 보는 색입니다. 높은 대비를 만들며 버튼, 강조, 배지, 주변 인터페이스에서 돋보여야 하는 요소에 유용합니다.
유사색
유사색 팔레트는 색상환의 이웃 색을 사용합니다. 색상이 가까워 결과가 보통 부드럽고 자연스러우며 배경, 카드, 차트, 일러스트 세부 요소에서 제어하기 쉽습니다.
삼색 배색
삼색 팔레트는 색상환에서 균등하게 떨어진 세 가지 색상을 사용합니다. 한 색이 주도하고 나머지 두 색을 절제된 강조로 쓰면 생생하면서도 균형 잡힌 구성이 됩니다.
분할 보색
분할 보색 팔레트는 하나의 기준 색에서 시작해 직접 보색 양옆의 두 색을 사용합니다. 보색처럼 강한 대비를 주면서도 더 부드럽고 유연한 범위를 제공합니다.
사색 및 정사각형 배색
사색과 정사각형 팔레트는 색상환의 네 색을 사용합니다. 여러 강조색이 필요할 때 유용하지만, 한 색이 주도하고 나머지는 밝은 틴트나 어두운 음영으로 균형을 맞출 때 가장 잘 작동합니다.
음영, 틴트, 톤
색상 관계를 선택한 뒤 음영, 틴트, 톤으로 팔레트를 실용적으로 만드세요. 밝은 틴트는 배경, 어두운 음영은 텍스트나 테두리, 부드러운 톤은 보조 UI 상태에 적합합니다.
색 구성 만들기
주요 색에서 시작해 조화 유형을 선택하고 실제 인터페이스 요구에 맞춰 테스트하세요. 완성된 구성에는 보통 기본색, 한두 가지 강조색, 중립 표면, 읽기 쉬운 텍스트 색, 대비가 안전한 상태가 포함됩니다.
색상환 색상 내보내기
팔레트가 적절하면 CSS 변수, Tailwind 값, Figma 친화 객체, 접두사 함수 또는 일반 코드 목록으로 내보내세요. 보이는 스와치의 현재 색상도 직접 복사할 수 있습니다.
접근성과 대비
색상 조화가 가독성을 보장하지는 않습니다. 텍스트와 중요한 컨트롤의 대비를 확인하고 색상만으로 정보를 전달하지 않도록 하며, 시뮬레이터로 흔한 색각 조건에서 팔레트가 어떻게 달라지는지 확인하세요.