무료 색상 도구
색상을 추출, 분석, 변환하고 공유하세요. 12개의 전문 도구가 모두 100% 무료이며 가입이 필요 없습니다.
색상 선택기｜이미지에서 HEX·RGB·HSL 값을 바로 추출
이미지의 원하는 지점에서 색상을 직접 선택해 HEX·RGB·HSL 값을 즉시 확인하고 라이브 미리보기로 코드를 복사할 수 있습니다.
이미지 색상 추출｜주요 색상을 HEX·RGB로 자동 추출
사진에서 주요 색상을 자동으로 추출해 HEX·RGB 코드가 담긴 깔끔한 팔레트를 만들고 디자인 작업에 바로 복사하거나 내보낼 수 있습니다.
팔레트 생성기｜이미지에서 조화로운 HEX 배색 생성
어떤 이미지에서든 완전하고 조화로운 색상 팔레트를 생성하고 편집 가능한 HEX·RGB 코드로 웹과 UI에 바로 내보낼 수 있습니다.
지배적인 색상｜이미지의 주요 톤을 HEX·RGB로 추출
이미지를 분석해 지배적인 색상을 점유율과 함께 파악하고 정확한 HEX·RGB 코드를 얻어 디자인에 그대로 재사용할 수 있습니다.
유사 색상 검색｜기준 색과 가까운 톤과 근접색 탐색
HEX나 RGB 기준 색에서 가까운 색조와 유사한 톤을 다수 찾아 즉시 미리보기와 코드로 조화로운 배색을 손쉽게 구성할 수 있습니다.
색상 변환｜HEX·RGB·HSL·HSV·CMYK·OKLCH·LAB 상호 변환
색상을 HEX·RGB·HSL·HSV·CMYK·OKLCH·LAB 형식 간에 즉시 상호 변환하고 정확한 값과 라이브 미리보기로 코드를 복사할 수 있습니다.
명암비 검사｜텍스트와 배경의 WCAG AA·AAA 판정
두 색상 간의 명암비를 측정해 텍스트와 UI의 WCAG AA·AAA 준수 여부를 즉시 판정하고 접근성 개선 제안을 함께 보여줍니다.
팔레트 내보내기｜CSS·SCSS·JSON·ASE 형식 지원
완성한 팔레트를 CSS·SCSS·JSON·ASE 형식으로 한 번에 내보내 웹 작업과 Figma에 색상 코드를 바로 가져올 수 있습니다.
색상 미리보기｜실제 UI 디자인에서 배색 표현 확인
HEX와 RGB 색상이 실제 UI에서 어떻게 보이는지 미리보기로 확인하고 텍스트·배경·컴포넌트를 적용 전에 점검할 수 있습니다.
색상 다운로드｜색상 팔레트를 PNG 이미지로 저장
팔레트를 읽기 쉬운 HEX 코드가 담긴 PNG 이미지로 저장해 배색과 무드보드를 팀과 손쉽게 공유하기에 좋습니다.
색상 공유｜고유 링크로 색상 팔레트를 전송하고 공유
모든 HEX·RGB 코드를 유지하는 고유 링크로 팔레트를 공유해 동료와 클라이언트가 같은 배색을 즉시 열어볼 수 있습니다.
색상 조화｜보색·삼색·유사·사색 배색 조화 탐색
기준 색에서 보색·삼색·유사·사색 배색 조화를 탐색하고 색상환 미리보기와 배색별 HEX 코드를 함께 제공합니다.
CSS 그라디언트 생성｜선형·방사형·원뿔형 지원
위치와 각도를 조정해 선형·방사형·원뿔형 CSS 그라디언트를 만들고 라이브 미리보기와 복사용 CSS 코드를 제공합니다.
메시 그라디언트｜다색의 부드러운 배경을 CSS로 생성
조정 가능한 포인트와 부드러운 전환으로 아름다운 다색 메시 그라디언트를 만들고 라이브 미리보기와 CSS 코드를 제공합니다.
애니메이션 그라디언트｜움직이는 CSS 배경 생성
색상·속도·방향을 조정해 순수 CSS로 움직이는 애니메이션 그라디언트 배경을 생성하고 라이브 미리보기와 붙여넣기 코드를 제공합니다.
색맹 시뮬레이터｜적색맹·녹색맹·청색맹 색상 확인
팔레트가 적색맹·녹색맹·청색맹 사용자에게 어떻게 보이는지 시뮬레이션하고 문제 색상을 보정해 누구에게나 접근 가능한 배색을 만듭니다.
텍스트 가독성｜글자색과 배경색을 WCAG로 검증
글자색과 배경색 조합으로 가독성을 테스트하고 WCAG 명암비를 측정해 어떤 화면에서도 선명한 표시를 보장합니다.
WCAG 분석기｜색상 팔레트의 준수 여부 일괄 분석
팔레트 전체의 WCAG AA·AAA 준수 여부를 분석해 명암비가 부족한 색상 조합을 찾아내고 접근 가능한 수정안을 제안합니다.
글래스모피즘 생성｜간유리 효과 CSS 코드 출력
조정 가능한 흐림으로 간유리 느낌의 글래스모피즘 효과를 생성하고 카드와 메뉴용 라이브 미리보기와 CSS 코드를 제공합니다.
뉴모피즘｜부드러운 소프트 UI 효과를 CSS로 생성
밝고 어두운 그림자를 조정한 소프트 UI 느낌의 부드러운 뉴모픽 효과를 만들고 버튼과 카드용 CSS 코드를 제공합니다.
컬러 그림자｜선명한 컬러 box-shadow 효과 생성
색상·흐림·오프셋을 조정한 선명한 컬러 그림자를 CSS로 생성하고 UI에 입체감을 더하는 box-shadow 코드를 제공합니다.
듀오톤 효과｜이미지에 두 색상을 적용하고 미리보기
그림자와 하이라이트 색상을 골라 이미지에 두 색상의 듀오톤 효과를 적용하고 라이브 미리보기와 다운로드를 지원합니다.
이미지 색상 필터｜색조·색상·채도 보정을 즉시 적용
이미지에 색상 필터와 색조, 채도 보정을 라이브 미리보기와 함께 적용해 통일된 분위기로 완성한 뒤 내보낼 수 있습니다.
컬러 무드보드｜색상 팔레트로 시각적 영감 보드 제작
팔레트와 색상 조합을 배치해 시각적 무드보드를 만들고 영감을 모아 팀에 일관된 배색을 제시할 수 있습니다.
색상 믹서｜두 색을 혼합해 HEX·RGB 결과 확인
두 색 이상을 비율을 조정해 혼합하고 결과 색상을 HEX·RGB 코드로 얻어 라이브 미리보기로 바로 복사할 수 있습니다.
틴트 & 셰이드｜색상의 밝고 어두운 계조 단계 생성
하나의 색에서 밝은 틴트와 어두운 셰이드 계조를 생성하고 단계별 팔레트와 디자인 시스템용 HEX 코드를 제공합니다.
랜덤 팔레트 생성｜영감을 위한 조화로운 배색 생성
조화로운 팔레트를 클릭 한 번으로 무작위 생성해 창작 영감에 활용하고 마음에 드는 색을 고정해 HEX로 내보낼 수 있습니다.
키워드 팔레트｜테마와 감정 단어에서 배색 자동 생성
테마나 감정을 키워드로 입력하면 그 분위기에 맞는 팔레트를 생성하고 자신의 프로젝트에 쓸 HEX 코드를 제공합니다.
Tailwind 팔레트｜설정용 50~950 색상 스케일 생성
기준 색에서 50에서 950까지 완전한 색상 스케일을 생성해 Tailwind CSS 설정에 바로 붙여넣을 수 있는 코드를 출력합니다.
CSS 변수｜색상을 커스텀 속성 변수로 내보내 관리
팔레트를 붙여넣기 가능한 CSS 커스텀 속성 변수로 내보내 테마와 컴포넌트의 색상을 한곳에서 관리할 수 있습니다.
shadcn/ui 테마｜배색 변수를 생성해 붙여넣기
라이트·다크 모드용 색상 변수를 갖춘 shadcn/ui 테마를 생성하고 CSS에 붙여넣어 일관되고 접근 가능한 UI를 구성합니다.
SCSS 변수｜색상을 Sass 변수로 내보내 관리
팔레트를 재사용 가능한 SCSS·Sass 변수로 내보내 스타일시트에 불러와 색상을 정돈되고 확장성 있게 관리할 수 있습니다.
색온도 분석｜배색의 따뜻한 난색과 차가운 한색 판별
색상의 따뜻하고 차가운 톤을 수치로 분석해 난색과 한색을 구분하고 팔레트 균형을 맞춰 원하는 분위기를 만듭니다.
색상 무드｜색이 전하는 감정과 심리를 탐구한 배색
각 색에 얽힌 감정과 심리를 탐구해 브랜딩과 UI, 창작에서 원하는 인상을 전하는 색을 고르는 데 도움이 됩니다.
브랜드 색상 추출｜로고와 이미지에서 브랜드 배색 확보
카탈로그에서 브랜드를 검색해 등록된 색상을 확인하고 필요한 HEX 코드를 빠르게 복사할 수 있습니다.
색상 트렌드｜요즘 인기 있는 트렌드 배색과 톤 발견
요즘 유행하는 트렌드 색상과 팔레트를 발견해 작업 영감에 활용하고 엄선된 배색과 웹·UI·그래픽용 HEX 코드를 제공합니다.
그라디언트 맵｜이미지 톤을 색상 계조 변환으로 적용
선택한 색상 계조로 이미지의 톤을 다시 매핑하는 그라디언트 맵을 적용하고 라이브 미리보기와 결과 저장을 지원합니다.
색상 오버레이｜이미지에 색조와 불투명도 겹침 적용
색조와 불투명도를 조정한 색상 오버레이를 이미지에 더하고 라이브 미리보기로 작품 전체의 분위기를 통일할 수 있습니다.
모노크롬 배색｜단일 색의 명도·채도로 배색 생성
하나의 색에서 명도와 채도를 달리한 모노크롬 색 구성을 만들고 깔끔하고 세련된 디자인용 HEX 코드를 제공합니다.
보색 구성표｜대비되는 배색 쌍으로 선명한 대조 생성
색상환에서 대비되는 색상 쌍으로 선명하고 균형 잡힌 보색 구성을 생성하고 프로젝트에 바로 쓸 HEX 코드를 제공합니다.
UI 미리보기｜실제 UI 부품 목업에서 배색 확인
버튼·카드·메뉴 등 실제 UI 컴포넌트 목업에서 팔레트를 시험해 적용 전에 색상 조합과 대비를 확인할 수 있습니다.
소셜 미리보기｜SNS 게시물 목업에서 배색 확인
실감 나는 SNS 게시물 목업에서 팔레트를 확인해 색상 조합과 가독성을 게시 전에 점검할 수 있습니다.
디자이너와 개발자를 위한 전문 색상 도구
당사의 색상 도구 모음을 사용하면 이미지에서 팔레트를 추출하고, 형식(HEX, RGB, HSL, CMYK) 간에 변환하고, WCAG 접근성을 확인하고, 색상을 CSS, Sass 또는 Tailwind로 내보낼 수 있습니다. 모든 도구는 브라우저에서 직접 작동하며 가입이 필요 없고 개인정보를 존중합니다.
이미지에서 색상 추출 및 분석
색상 선택기(스포이트)를 사용하여 사진 속 모든 색상을 정확하게 식별하세요. 주요 색상을 자동으로 추출하고 영감을 주는 이미지에서 조화로운 팔레트를 생성하세요. 브랜딩, 웹 디자인 및 그래픽 제작에 완벽합니다.
색상 변환 및 접근성
HEX, RGB, HSL, CMYK 간에 색상을 즉시 변환하세요. WCAG AA 및 AAA 표준에 따라 색상 간 대비를 확인하여 디자인의 접근성을 보장하세요. 색상환을 기반으로 한 색상 조화(보색, 유사색, 삼색 등)를 생성하세요.
100% 무료, 가입 불필요, 개인정보 보호
당사의 모든 색상 도구는 완전히 무료이며 가입이 필요 없습니다. 이미지와 데이터는 브라우저에서 로컬로 처리되며 당사 서버로 전송되지 않습니다. 개인 및 비즈니스 프로젝트에 안심하고 도구를 사용하세요.