사진을 고르면 브라우저 안에서 대표 색 5가지를 뽑아 잠기지 않은 칸에 채웁니다. 사진은 업로드되지 않습니다 — 서버로 전송하거나 저장하지 않고, 내 브라우저 안에서만 축소·분석합니다.
고른 두 색의 명도 대비비를 계산합니다. 본문 글씨는 4.5:1, 24px 이상 큰 글씨는 3:1 이상이면 웹 접근성 기준(WCAG AA)을 만족합니다.
눌러서 바로 불러온 뒤 기준 색을 바꿔 가며 나만의 조합으로 다듬어 보세요.
색상환(色相環)에서 두 색이 얼마나 떨어져 있느냐에 따라 느낌이 완전히 달라집니다. 목적에 맞는 규칙 하나만 골라도 아마추어 티가 나는 배색은 대부분 피할 수 있습니다.
색을 몇 대 몇으로 쓸지 정해 두면 화면이 훨씬 안정적입니다. 넓은 면적의 주조색 60%(배경·여백), 그다음 보조색 30%(카드·구분선·부제목), 마지막으로 강조색 10%(버튼·링크·중요 수치) 비율이 오랫동안 쓰여 온 기준입니다. 팔레트 5색 중 밝은 색 하나를 주조색, 중간 톤 둘을 보조색, 가장 진하거나 선명한 색을 강조색으로 배정해 보세요. 강조색은 아껴 쓸수록 강조 효과가 커집니다.
웹 콘텐츠 접근성 지침(WCAG)은 본문 글자와 배경의 명도 대비를 4.5:1 이상으로 권장합니다. 이 수치는 시력이 20/40 정도(교정 전 경도 저시력, 대략 80세 전후의 평균 시력)인 사람이 무리 없이 읽을 수 있는 선에서 나왔습니다. 24px 이상이거나 18.66px 이상 굵은 글씨는 획이 두꺼워 조금 더 관대한 3:1이 적용되고, 더 엄격한 AAA 등급은 7:1을 요구합니다. 회색 글씨가 감성적으로 보인다고 #999를 흰 배경에 쓰면 대비가 2.85:1밖에 되지 않아 밝은 야외에서는 거의 보이지 않습니다. 색은 마음에 드는 것으로 고르되, 본문만큼은 대비 수치를 확인하고 쓰는 편이 안전합니다.
제품 사진, 매장 인테리어, 로고 이미지처럼 이미 정해진 시각 자산이 있다면 거기서 색을 뽑는 것이 가장 빠른 길입니다. 이미지 색 추출은 사진을 작게 줄인 뒤 비슷한 색끼리 묶어 가장 넓은 면적을 차지한 대표 색부터 보여 주므로, 사진의 분위기를 그대로 가져올 수 있습니다. 뽑힌 색이 너무 탁하다면 그 색을 기준 색으로 넣고 '명암'이나 '유사색'으로 한 번 더 다듬으세요. 상세페이지 배경, 인스타그램 피드 톤, 발표 자료 표지를 사진과 같은 색으로 맞추면 브랜드가 한결 정돈돼 보입니다.
설치나 회원가입 없이 브라우저에서 바로 쓰는 무료 색상 팔레트 생성기입니다. 기준 색 하나를 고르면 색상환 규칙에 따라 어울리는 5색 컬러 팔레트를 만들어 주고, HEX·RGB·HSL 코드를 한 번의 탭으로 복사할 수 있습니다. 마음에 드는 색은 자물쇠로 고정한 뒤 나머지만 다시 뽑을 수 있어서, 브랜드 색을 유지하면서 어울리는 색을 찾는 데도 쓸 수 있습니다.
색 조합 추천이 필요할 때는 규칙 하나를 고르고 팔레트 생성 버튼만 누르면 됩니다. 어떤 색으로 시작할지조차 막막하다면 랜덤 버튼(또는 PC에서 스페이스바)을 연달아 눌러 마음에 드는 분위기가 나올 때까지 넘겨 보세요. 괜찮은 색이 하나 걸리면 그 칸을 잠그고 다시 랜덤을 돌리면, 그 색과 어울리는 조합만 계속 제안됩니다. 이 방식이면 색 조합 사이트를 여러 곳 돌아다니지 않아도 원하는 배색 추천을 몇 번 만에 찾을 수 있습니다. 완성한 팔레트는 저장해 두면 이 브라우저에 최대 12개까지 남고, 공유 링크를 만들면 같은 팔레트를 그대로 열 수 있는 주소가 만들어져 팀원이나 디자이너에게 그대로 보내면 됩니다.
특정 색의 짝을 찾는 보색 찾기도 바로 됩니다. 기준 색에 알고 있는 HEX 코드를 넣고 '보색'을 고르면 색상환에서 정확히 180° 반대편 색과 그 명암 단계가 함께 나옵니다. 같은 방식으로 '유사색'을 고르면 기준 색에서 좌우 30° 안쪽의 이웃 색이 밝기 순서대로 정렬돼 자연스러운 그러데이션 배색을 얻을 수 있습니다. 로고 색은 정해져 있는데 배경과 포인트 색을 정해야 하는 상황, 사진 한 장의 분위기에 맞춰 자막 색을 고르는 상황 모두 이 두 규칙으로 해결되는 경우가 많습니다. 결과가 너무 강하면 분열보색으로, 너무 밋밋하면 삼각 조합으로 한 단계씩 옮겨 가며 비교해 보세요.
사진을 올리면 이미지 색상 추출이 실행돼 그림에서 가장 넓은 면적을 차지한 대표 색 5가지를 골라 줍니다. 스포이드 도구를 켜고 한 점씩 찍는 것과 달리, 비슷한 색을 묶어 평균을 내기 때문에 사진 색 추출 결과가 훨씬 안정적입니다. 뽑힌 색은 곧바로 HEX 코드로 표시되므로 이미지 색상 코드 추출이 필요한 상세페이지 작업, 굿즈 인쇄 색 맞추기, 프레젠테이션 표지 만들기에 그대로 쓸 수 있습니다. 사진은 서버로 전송되지 않고 브라우저 안에서만 축소·분석되므로 공개하기 곤란한 시안이나 사적인 사진도 안심하고 넣을 수 있습니다.
팔레트 위쪽 토글로 표시 형식을 바꾸면 같은 색을 HEX 변환, RGB 변환, HSL 세 가지로 볼 수 있고, 복사되는 값도 함께 바뀝니다. 웹 CSS에는 #EC4899 같은 HEX나 rgb(236, 72, 153)을, 포토샵·일러스트레이터에는 RGB 값을, 색을 조금씩 밝게·어둡게 조절할 때는 hsl(330, 81%, 60%) 형식을 쓰면 편합니다. 특히 HSL은 앞의 숫자가 색상, 뒤의 두 숫자가 채도와 밝기라서 색상 코드 변환 없이도 같은 계열의 밝은 색·어두운 색을 손으로 만들기 쉽습니다. CSS 변수 복사를 누르면 :root 블록이 통째로 복사되어 그대로 스타일시트에 붙여 넣을 수 있습니다.
마지막 칸의 색 대비 검사는 고른 두 색으로 실제 문장을 그려 보여 주고 명도 대비비를 소수 둘째 자리까지 계산합니다. 본문 4.5:1, 큰 글씨 3:1, AAA 등급 7:1 세 기준을 통과했는지 배지로 표시하므로, 디자인을 끝낸 뒤가 아니라 색을 고르는 단계에서 바로 확인할 수 있습니다. 팔레트의 다섯 색은 물론 흰색·검정과의 조합도 선택할 수 있어서, 이 배경 위에 흰 글씨를 얹어도 되는지 같은 글자색 배경색 판단이 몇 초 만에 끝납니다. 공공기관 홈페이지나 웹 접근성 인증이 필요한 서비스라면 이 단계를 꼭 거치시길 권합니다.
