Utilore

색상 팔레트 생성기

기준 색을 고르면 나머지는 색상환을 따라 계산됩니다. 색을 누르면 코드가 복사되고, 사진을 넣으면 그 사진에서 바로 팔레트를 뽑습니다.

배색

색을 누르면 코드가 복사됩니다

    사진에서 색상 뽑기

    사진은 기기를 떠나지 않고 브라우저에서 바로 읽습니다.

      사용 방법

      1. 색상 코드를 입력하거나 선택기를 엽니다. 고르는 대로 팔레트가 다시 그려집니다.
      2. 배색을 바꿉니다. 보색은 색상환 반대편, 삼색은 원을 셋으로 나눈 자리입니다.
      3. 색을 눌러 코드를 복사하거나, 전체를 CSS 변수로 복사합니다.
      4. 사진에서 색을 뽑으려면 이미지를 고르세요. 읽기는 기기 안에서만 이뤄집니다.

      알아두면 좋은 점

      각도의 근거

      배색은 취향이 아니라 색상환 위의 기하입니다. 보색은 정확히 반대편 180°에, 삼색은 원을 120°씩 셋으로 나눈 자리에, 유사색은 삼십 도 이내의 이웃에 있습니다. 이 도구는 채도와 명도를 그대로 두고 색상만 돌리므로, 짝이 되는 색도 기준 색만큼 선명하고 깊게 나옵니다.

      사진에서 탁한 색이 나오지 않는 이유

      사진에서는 가장 흔한 픽셀을 세는 방식이 통하지 않습니다. 하늘 하나에도 미세하게 다른 파랑이 백만 가지 있고 저마다 한 번씩만 나오기 때문입니다. 이 도구는 색 공간을 가장 폭이 넓은 채널 기준으로 반으로 가르고, 필요한 상자 수가 될 때까지 반복합니다. 그래서 결과에는 하늘과 얼굴과 그림자가 따로 남고, 평균 낸 갈색 하나가 되지 않습니다.

      자주 묻는 질문

      웹사이트에는 어떤 배색이 좋나요?

      단색과 유사색이 안전합니다. 페이지가 차분해지고 요소끼리 주목을 다투지 않습니다. 보색은 반드시 눈에 띄어야 하는 단 하나 — 버튼, 배지, 경고 — 를 위해 남겨 두세요.

      팔레트를 코드에서 어떻게 쓰나요?

      색 견본 아래의 CSS 변수 묶음을 복사해 스타일시트에 붙여넣으세요. 이름이 --color-1 … --color-6로 나와서, 남의 프로젝트에서 16진수 나열보다 읽기 쉽습니다.

      제 사진이 어딘가로 올라가나요?

      아니요. 이미지는 페이지에서 디코딩되고 색을 세기 전에 160픽셀로 줄입니다. 기기 밖으로 나가는 것이 없어 결과도 즉시 나옵니다.

      어두운 음영 줄이 왜 검정으로 끝나지 않나요?

      순수한 검정과 흰색은 정보를 담지 않습니다. 누구나 아는 색이고 팔레트에서는 자리만 차지합니다. 줄이 가장자리 직전에서 멈추므로 모든 견본이 실제로 쓸 수 있는 색으로 남습니다.

      관련 도구