컬러 크래프트란?
디자이너와 개발자를 위한 다목적 색상 도구입니다. HEX/RGB/HSL 자유 변환, 보색·유사색·삼각배색 자동 생성, 이미지에서 색상 추출, 대비 검사(WCAG 기준)까지 한 곳에서 처리할 수 있습니다.
주요 기능
- 색상 변환 — HEX ↔ RGB ↔ HSL 양방향 즉시 변환
- 팔레트 생성 — 보색·유사색·삼각배색·사각배색
- 이미지 색상 추출 — 업로드한 이미지의 주요 색상 추출
- WCAG 대비 검사 — AAA/AA 등급 자동 판정
- 폰트 페어링 — 선택한 색상에 어울리는 글꼴 조합 추천
사용 방법
- 색상 선택 도구로 기준 색을 정하거나 HEX/RGB 값을 직접 입력하세요
- 팔레트 모드(보색·유사색 등)를 선택하면 자동 생성됩니다
- 이미지에서 색을 뽑고 싶다면 이미지를 업로드하세요
- 원하는 색상 코드를 클릭하면 클립보드에 복사됩니다
HEX, RGB, HSL: 같은 색, 다른 표기
화면의 색은 빨강(R)·초록(G)·파랑(B) 빛의 세기를 각각 0~255로 표현하는 RGB 방식으로 만들어집니다. HEX 코드는 이 세 값을 16진수 두 자리씩 이어 붙인 것으로, #FF0000은 빨강 255, 초록 0, 파랑 0을 뜻합니다. CSS의 rgb(255, 0, 0)과 #FF0000은 완전히 같은 색이며, RGBA는 여기에 투명도(0~1)를 더한 표기입니다.
HSL은 같은 색을 사람이 이해하기 쉬운 세 축으로 바꿔 표현합니다. 색상(Hue)은 색상환 위의 각도(0~360도)로 0도가 빨강, 120도가 초록, 240도가 파랑입니다. 채도(Saturation)는 색의 선명함(0%는 회색, 100%는 순색), 명도(Lightness)는 밝기(0%는 검정, 100%는 흰색)입니다. 조금 더 어둡게, 덜 튀게 같은 조정은 HSL에서 L이나 S 값만 바꾸면 되어 직관적입니다.
이 도구의 색상 변환 기능은 HEX 값을 입력하거나 색상 선택기로 색을 고르면 RGB, HSL, RGBA 표기를 동시에 보여 줍니다. 디자인 도구는 HEX를, CSS 테마 시스템은 HSL을, 투명도가 필요한 오버레이는 RGBA를 쓰는 경우가 많으므로 상황에 맞는 표기를 복사해 사용하시면 됩니다.
색상환과 배색 조화
색상환에서 서로의 위치 관계로 어울리는 색을 찾는 것이 배색 이론의 기본입니다. 유사색은 색상환에서 30도 안팎으로 이웃한 색들의 조합으로, 자연스럽고 안정적인 느낌을 주어 배경이나 그라데이션에 적합합니다. 이 도구의 유사색 모드는 기준 색상에서 ±30도, ±60도 떨어진 색을 함께 만듭니다.
보색은 색상환에서 180도 반대편의 색으로, 대비가 가장 강해 버튼이나 강조 요소에 효과적이지만 넓은 면적에 함께 쓰면 눈이 피로해집니다. 삼원색 배색은 120도 간격의 세 색을, 분할보색은 보색 대신 보색 양옆 30도의 두 색을 쓰는 방식으로, 보색의 긴장감을 유지하면서 좀 더 부드러운 균형을 만듭니다.
이 도구는 색상 각도만 이론대로 배치하고 채도(50~90%)와 명도(30~70%)는 매번 조금씩 다르게 섞어 실제 쓸 수 있는 팔레트를 만듭니다. 마음에 드는 색은 잠금 버튼으로 고정한 채 나머지만 다시 생성할 수 있고, 완성된 다섯 색은 CSS 변수 형태로 한 번에 복사됩니다.
색 대비와 접근성: WCAG 대비율의 원리
글자색과 배경색의 대비가 낮으면 저시력 사용자뿐 아니라 밝은 야외에서 화면을 보는 누구에게나 읽기 어렵습니다. 웹 접근성 지침(WCAG)은 이를 대비율이라는 숫자로 정의합니다. 대비율은 두 색의 상대 휘도를 구해 (밝은 쪽 + 0.05) ÷ (어두운 쪽 + 0.05)로 계산하며, 1:1(같은 색)에서 21:1(검정과 흰색)까지의 값을 가집니다.
상대 휘도는 단순한 RGB 평균이 아닙니다. 사람 눈이 초록에 가장 민감하고 파랑에 가장 둔감하기 때문에, 각 채널을 감마 보정으로 선형화한 뒤 빨강 0.2126, 초록 0.7152, 파랑 0.0722의 가중치로 합산합니다. 그래서 비슷한 밝기처럼 보이는 노랑과 파랑도 계산상 휘도는 크게 다르며, 파란 배경에 검은 글씨가 생각보다 읽기 어려운 이유가 여기에 있습니다.
WCAG는 일반 본문 텍스트에 AA 등급 4.5:1 이상, AAA 등급 7:1 이상을 요구하고, 큰 글씨(약 18pt 이상 또는 14pt 굵은 글씨)는 AA 기준을 3:1로 완화합니다. 이 도구의 대비율 체커는 두 색을 입력하면 대비율과 함께 세 기준의 통과 여부를 표시하며, 색상 반전 버튼으로 글자색과 배경색을 맞바꿔 다크 모드 조합도 바로 확인할 수 있습니다.
이미지에서 색 추출하기: 양자화의 원리
사진이나 로고에서 팔레트를 뽑는 기능은 이미지의 픽셀 색을 세어 가장 많이 등장하는 색을 고르는 방식입니다. 그런데 사진에는 미세하게 다른 수십만 가지 색이 섞여 있어 그대로 세면 의미 있는 대표색이 나오지 않습니다. 그래서 비슷한 색을 하나로 묶는 양자화 과정이 필요합니다.
이 도구는 업로드한 이미지를 100×100 픽셀로 축소한 뒤, 각 채널 값을 32 단위로 반올림해 색 공간을 단순화합니다. 그런 다음 등장 빈도가 높은 색 여섯 개를 골라 팔레트로 보여 줍니다. 처리는 모두 브라우저 안의 캔버스에서 이루어지며 이미지는 어디에도 업로드되지 않습니다.
빈도 기반 추출은 면적이 넓은 배경색이 상위에 오고, 면적은 작지만 인상적인 포인트 색은 빠질 수 있다는 한계가 있습니다. 브랜드 로고처럼 색이 분명한 이미지는 잘 맞지만, 사진에서는 추출된 색을 출발점으로 삼아 HSL로 채도·명도를 다듬어 쓰는 것이 좋습니다.
실무 팔레트 구성: 비율과 명도 단계
조화로운 색을 골랐다면 다음은 비율입니다. 인테리어와 UI 디자인에서 널리 쓰이는 60-30-10 규칙은 주조색 60%, 보조색 30%, 강조색 10%로 화면을 나누는 원칙입니다. 강조색은 보색이나 분할보색에서 고르되 버튼·링크·알림처럼 사용자의 행동을 유도하는 요소에만 아껴 쓰면 시선이 자연스럽게 모입니다.
실제 제품에서는 한 색상을 명도 단계별로 펼친 스케일이 필요합니다. HSL에서 색상과 채도를 고정하고 명도만 단계적으로 바꾸면 통일감 있는 스케일을 만들 수 있으며, 다크 모드는 이 스케일을 뒤집어 사용하는 것이 기본 전략입니다. 각 단계에서 글자색과의 대비율을 체커로 확인해 두면 접근성 문제를 미리 막을 수 있습니다.
색은 문화와 맥락에 따라 다르게 읽힙니다. 한국의 주식·금융 화면에서는 빨강이 상승, 파랑이 하락을 뜻하지만 서구권은 반대입니다. 경고·성공·정보 같은 상태 색은 색만으로 전달하지 말고 아이콘이나 텍스트를 함께 두어 색각 이상 사용자도 구분할 수 있게 하는 것이 접근성의 기본입니다.
아홉 가지 기능을 하나의 흐름으로
이 도구는 팔레트, 그라데이션, 박스 그림자, 색상 변환, 대비율 체커, 버튼 생성기, 폰트 조합, 색상 추출, 슬라이드 팔레트의 아홉 가지 기능으로 구성됩니다. 팔레트에서 기본 색을 정하고, 변환기로 표기를 맞추고, 대비율 체커로 검증한 뒤, 버튼 생성기와 그라데이션으로 실제 요소의 CSS를 만들어 내는 순서로 쓰면 하나의 작업이 이어집니다.
모든 결과는 CSS 코드로 복사할 수 있습니다. 팔레트와 추출 색은 :root 아래 CSS 변수로, 버튼·그림자·그라데이션은 바로 붙여 넣을 수 있는 속성 묶음으로 제공됩니다. 색상 값을 클릭하면 클립보드에 복사되며, 복사 표시가 잠시 나타나 동작을 확인할 수 있습니다.
슬라이드 팔레트는 기준 색 하나를 입력하면 어두운 배경, 밝은 강조, 차분한 보조, 대비되는 포인트 색 등 발표 자료에서 역할이 정해진 여섯 색을 HSL 규칙으로 파생해 주는 기능입니다. 폰트 조합은 제목용과 본문용 Google Fonts 페어링 여덟 가지를 미리 보기와 함께 넘겨 보며 @import 코드까지 복사할 수 있어, 색과 글꼴을 한 화면에서 결정하고 싶을 때 함께 사용하시기 바랍니다.
활용 팁
- 웹 접근성을 위해 본문은 대비 비율 4.5:1 이상 권장합니다
- 보색은 강한 강조에, 유사색은 부드러운 그라데이션에 어울립니다
- 추출된 팔레트는 CSS 변수로 바로 사용 가능한 형태로 복사됩니다
자주 묻는 질문
Q. 추출한 이미지 데이터가 저장되나요?
아닙니다. 모든 처리는 브라우저에서 이루어지며 이미지는 어디에도 업로드되지 않습니다.
Q. 색상 값은 어떤 형식으로 복사되나요?
각 색상은 #RRGGBB 형태의 HEX 코드로 표시되며, 클릭 한 번으로 클립보드에 복사해 CSS나 디자인 도구에 바로 붙여 넣을 수 있습니다.
Q. 대형 이미지도 처리 가능한가요?
성능을 위해 자동으로 리사이즈하여 분석하므로 큰 이미지도 빠르게 처리됩니다.
Q. 보색을 쓰면 왜 눈이 피로한가요?
보색은 색상환에서 정반대에 있어 대비가 가장 크고, 넓은 면적에 같은 채도로 나란히 두면 경계에서 진동하는 듯한 잔상이 생기기 때문입니다. 한쪽의 채도나 명도를 낮추거나, 보색 대신 분할보색을 쓰고 강조 요소에만 소량 사용하면 긴장감은 살리면서 피로를 줄일 수 있습니다.
Q. 대비율 4.5:1은 어떤 기준인가요?
웹 접근성 지침 WCAG의 AA 등급에서 일반 크기 본문 텍스트에 요구하는 최소 대비율입니다. 큰 글씨는 3:1, 더 엄격한 AAA 등급은 7:1을 요구합니다. 공공기관 웹사이트나 접근성 인증을 준비한다면 AA 기준을 필수로 맞추시기 바랍니다.
Q. 색상 추출 결과에 사진의 포인트 색이 빠져 있습니다.
이 도구는 등장 빈도가 높은 색을 고르기 때문에 면적이 넓은 배경색이 우선되고, 면적이 작은 포인트 색은 순위에서 밀릴 수 있습니다. 포인트 색이 필요하면 해당 부분만 잘라낸 이미지를 다시 업로드하거나, 색상 변환기에서 직접 값을 확인하시기 바랍니다.
작성·검수: FunAppBox 편집팀 · 내용 오류나 개선 제안은 문의 페이지로 알려주세요.