색상 추출기 & 팔레트 생성기

화면 속 모든 색은 세 가지 방식으로 표현할 수 있고, 이 도구는 세 가지를 항상 동기화해 보여 줍니다. HEX는 CSS와 디자인 도구에서 쓰는 축약 표기, RGB는 빨강·초록·파랑 빛이 얼마나 섞였는지를 나타내는 값, HSL(색조·채도·명도)은 사람이 색을 생각하는 방식, 즉 어떤 색인지, 얼마나 선명한지, 얼마나 밝은지를 나타냅니다. 기본 색상 견본을 끌거나 HEX 코드를 입력하거나 R/G/B 또는 H/S/L 값을 직접 조절하면 나머지 값이 즉시 바뀌므로, 계산 없이 익숙한 방식으로 색을 다룰 수 있습니다.

색상환은 여섯 가지 대표적인 배색 규칙의 바탕이며, 고른 기준 색상에서 모두 자동으로 만들어집니다. 보색은 반대편 색과 짝지어 대비를 극대화하고, 유사색은 색상환에서 이웃한 색을 골라 차분하고 통일감 있는 느낌을 줍니다. 삼각 배색과 사각 배색은 색상환에 세 가지 또는 네 가지 색을 고르게 배치해 활기차면서도 균형 잡힌 팔레트를 만듭니다. 분할 보색은 반대편 색 대신 그 양옆의 두 색을 써서 보색 배색을 부드럽게 만들고, 단색 배색은 하나의 색조에서 명도만 바꿔 가며 사용하므로 브랜드 색 하나를 여러 단계로 쓰는 UI에 가장 무난합니다.

좋은 팔레트가 항상 색채 이론에서 시작하는 것은 아니며, 때로는 무엇이 나오는지 그냥 보고 싶을 때도 있습니다. 랜덤 팔레트 생성기(스페이스바 또는 생성 버튼)는 탁하거나 지나치게 파스텔 같은 결과를 피하도록 색조와 명도를 조정해 색 다섯 개를 한 번에 만들어 줍니다. 마음에 드는 견본의 자물쇠 아이콘을 누르고 다시 생성하면 고정하지 않은 색만 바뀌므로, Coolors 같은 도구처럼 팔레트를 조금씩 완성할 수 있습니다. 견본을 클릭하면 HEX 코드가 복사되고, 팔레트 아래 버튼으로 전체를 CSS 사용자 지정 속성, SCSS 변수, Tailwind 설정 코드, JSON 배열로 복사하거나 Illustrator·Photoshop용 Adobe .ase 스와치 파일로 내보낼 수 있습니다. 이미지에서 팔레트를 추출할 수도 있고(로컬에서 처리되며 업로드되지 않습니다), 마음에 드는 팔레트는 브라우저에 저장해 둘 수 있습니다.

보기 좋은 색을 고르는 것과 쓸 수 있는 색을 고르는 것은 다릅니다. 배경과 명도가 너무 비슷한 색의 글자는 읽기 어렵고, 웹 콘텐츠 접근성 지침(WCAG)은 이에 대한 기준을 정해 두었습니다. 일반 텍스트는 대비 비율 4.5:1 이상이면 AA 등급, 7:1 이상이면 더 엄격한 AAA 등급을 통과합니다. 대비 검사기는 WCAG 규격이 정의한 상대 휘도 공식으로 고른 색상과 흰색·검은색 글자 사이의 정확한 비율을 계산하고 각 조합의 통과 여부를 알려 주므로, 대비가 낮은 버튼이나 제목을 출시 후가 아니라 출시 전에 발견할 수 있습니다.