🎨 컬러무드
감성 한 번에 어울리는 색조합을 추천받으세요. 무드·색이론·이미지로 5색 팔레트를 만들고, 사진 색 추출·퍼스널 컬러 진단·대비검사·공유까지 한 화면에서.
♿ 명암 대비 검사 (WCAG)
CSS 변수
:root {
--color-1: #1B2430;
--color-2: #31403D;
--color-3: #6D8B74;
--color-4: #D0C9C0;
--color-5: #EFEAD8;
}Tailwind config
colors: {
brand1: "#1B2430",
brand2: "#31403D",
brand3: "#6D8B74",
brand4: "#D0C9C0",
brand5: "#EFEAD8",
}🛍️ 창작자 추천 아이템
제휴이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받을 수 있습니다.
✨ 인기 색조합 갤러리
디자이너가 고른 검증된 배색. 색을 탭하면 코드를 복사할 수 있어요.
🧭 이렇게 써보세요
무드로 시작
차분한·노을·네온 등 감성을 고르면 어울리는 색이 즉시 생성돼요.
마음에 드는 색 잠그기
좋은 색은 자물쇠로 고정하고 나머지만 새로 굴려보세요. (Space)
코드로 바로 쓰기
CSS·Tailwind 복사, PNG 카드 저장, 링크 공유까지 한 번에.
❓ 자주 묻는 질문
색조합은 어떻게 추천되나요?
색상환(HSL) 이론을 기반으로 보색·유사색·3색조화 등 규칙에 맞춰 어울리는 5색을 생성합니다. 무드를 고르면 해당 감성에 맞는 색상·채도·명도 범위에서 조화로운 팔레트를 만들어요.
이미지에서 색을 뽑을 때 사진이 서버로 올라가나요?
아니요. 이미지 색 추출과 퍼스널 컬러 진단은 전부 브라우저(기기) 안에서 처리되며 서버로 전송되거나 저장되지 않습니다.
퍼스널 컬러(봄웜·여름쿨·가을웜·겨울쿨)는 어떻게 진단하나요?
얼굴 사진을 올리면 중앙 피부 영역의 평균 톤을 분석해 웜/쿨 언더톤과 밝기를 계산하고 4계절 타입으로 분류합니다. 어울리는 컬러와 피하면 좋은 컬러를 함께 추천해요. 조명·화질에 따라 달라질 수 있어 참고용 가이드로 활용하세요.
명암 대비 검사는 무엇인가요?
글자색과 배경색의 WCAG 명암비를 계산해 가독성(AA·AAA 기준) 통과 여부를 알려줍니다. 접근성 있는 웹·앱 디자인에 유용합니다.
팔레트를 코드로 바로 쓸 수 있나요?
네. CSS 변수와 Tailwind config 스니펫을 한 번에 복사하거나, PNG 팔레트 카드로 내보낼 수 있어 디자인·개발에 바로 활용할 수 있습니다.