어떤 이미지에서든 컬러 팔레트를 뽑아내는 방법
2026-06-25
가장 멋진 컬러 팔레트 중 일부는 이미 존재합니다 — 노을 사진 속에, 영화 스틸 컷 속에, 브랜드 로고 속에, 당신이 좋아하는 디자인의 스크린샷 속에요. 헥스 코드를 추측하는 대신, 이미지에서 곧바로 색을 골라낼 수 있습니다. 그 방법과, 그 색들을 CSS나 디자인 도구에서 바로 쓸 수 있는 값으로 바꾸는 법을 알려드립니다.
이미지에서 색을 뽑는 이유
팔레트를 맨바닥부터 만드는 건 어렵습니다. 이미 잘 작동하는 것을 빌려 오는 건 쉽죠. 사진은 장면의 빛이 색들을 하나로 묶어 주었기 때문에 자연스러운 조화를 지닙니다. 브랜드의 로고는 그 브랜드의 정확한 색을 그대로 건네줍니다. 실제 이미지에서 출발하면 일관되게 느껴지는 팔레트를 얻고, 그 다음 다듬으면 됩니다.
스포이드는 어떻게 작동하나
이미지는 픽셀의 격자이고, 각 픽셀에는 색이 있습니다. 색상 추출기(스포이드)는 당신이 가리키는 픽셀의 정확한 색을 읽어서 코드로 알려줍니다 — 대개 HEX(#f59563)로요. 이는 같은 빨강/초록/파랑 값을 16진수로 적은 것입니다. 마우스를 올려 미리 보고, 마음에 드는 색을 클릭해 저장하면, 팔레트가 완성됩니다.
ToolKoala의 색상 추출기는 이걸 정확히 브라우저에서 해냅니다:
- 아무 이미지나 끌어다 놓으세요 — 사진, 스크린샷, 로고요.
- 마우스를 올려 색을 미리 보고, 클릭해서 저장하세요. 원하는 만큼 많이 쌓아 두세요.
- 저장한 각 색은 코드에 바로 복사할 수 있는 HEX와 RGB 값을 제공합니다.
로컬에서 돌아가므로, 당신이 샘플링하는 이미지는 절대 업로드되지 않습니다.
HEX, RGB, HSL — 어느 것이 필요할까?
같은 색, 다른 표기법입니다:
- HEX(
#f59563) — 웹 기본값이자, CSS에 가장 자주 붙여 넣게 될 형식이에요. - RGB(
245, 149, 99) — 투명도를 위한 알파 채널(rgba(...))이 필요할 때 편리합니다. - HSL(색상, 채도, 명도) — 색을 조정하는 데 디자이너들이 아끼는 형식입니다: 명도를 살짝 높여 틴트를 만들고, 색상을 옮겨 보색을 찾죠.
한 형식의 색을 갖고 있는데 다른 형식이 필요하다면, 색상 변환기가 HEX를 RGB, HSL, HSV, CMYK로 즉시 바꿔 줍니다.
고른 색을 진짜 팔레트로 만들기
고른 팔레트를 쓸 만하게 만드는 몇 가지 습관:
- 거의 똑같은 다섯 가지 색조가 아니라, 폭이 있는 범위를 잡으세요 — 어두운 색 하나, 밝은 색 하나, 중간 톤 두어 개, 그리고 강조색 하나요.
- 텍스트가 올라가는 곳이라면 무엇이든 명암 대비를 확인하세요. 아름다운 저대비 조합은 읽을 수가 없습니다.
- HSL로 변형을 만드세요 — 기본 색이 하나 정해지면, 관련 없는 새 색을 고르는 대신 명도를 조정해서 호버 상태, 테두리, 배경을 만드세요.
자주 묻는 질문
이미지에서 색상 코드를 어떻게 얻나요? 색상 추출기를 쓰세요: 이미지를 불러오고, 마우스를 올려 미리 보고, 원하는 색의 픽셀을 클릭하세요. 그 색을 복사할 수 있는 HEX(그리고 대개 RGB) 코드로 알려줍니다. ToolKoala의 색상 추출기가 브라우저에서 해냅니다.
HEX, RGB, HSL의 차이는 무엇인가요? 같은 색을 적는 세 가지 방법입니다. HEX는 웹 표준이고, RGB는 투명도(rgba)에 유용하며, HSL은 색을 조정하기에 — 명도나 색상을 손으로 바꾸기에 — 가장 쉽습니다.
스크린샷이나 로고에서 색을 고를 수 있나요? 네 — 스크린샷과 로고를 포함해 어떤 이미지든 됩니다. 브랜드의 정확한 색을 맞추는 데 흔히 가장 빠른 방법이죠.
색상 추출기가 제 이미지를 업로드하나요? 아니요. ToolKoala는 브라우저에서 픽셀을 읽으므로, 이미지는 당신의 기기를 절대 떠나지 않습니다.
HEX 색상을 RGB나 HSL로 어떻게 변환하나요? 색상 변환기에 붙여 넣으세요. ToolKoala의 색상 변환기는 어떤 HEX든 RGB, HSL, HSV, CMYK로 한 번에 바꿔 줍니다.
— Milo 🐨