앱에서 색은 무엇을 누를 수 있는지, 무엇이 활성 상태인지, 무엇이 성공하거나 실패했는지 알려 줘요. 앱 유형별 팔레트 12가지에 배경, 서피스, 메인 컬러, 텍스트 색을 담았어요. HEX 코드를 Figma, Flutter, SwiftUI, React Native로 바로 옮기세요.
핀테크 블루와 그린
블루는 신뢰를, 그린은 잔액과 완료된 거래를 나타내요.
배달 오렌지
오렌지가 주문 버튼과 프로모션을 돋보이게 해요.
헬스 앤 웰니스
차분해요. 병원 예약, 습관 관리, 건강 기록 앱에 좋아요.
퍼플 다크 모드
완전한 검정 대신 아주 짙은 회색 배경에 밝은 퍼플 포인트예요.
소셜 핑크와 퍼플
SNS, 데이팅, 크리에이터 앱에 어울려요.
미니멀 생산성
가독성이 아주 좋아요. 할 일 관리와 업무 도구에 좋아요.
교육용 옐로
밝고 명랑해요. 언어 학습이나 교육 앱에 좋아요.
에너지 넘치는 피트니스
어두운 바탕에 라임과 레드예요. 운동 기록과 지표 앱에 어울려요.
명상 라벤더
부드럽고 차분해요. 수면, 명상, 일기 앱에 좋아요.
여행 터쿼이즈와 샌드
해변과 햇살을 떠올리게 해요. 예약과 여행 가이드 앱에 좋아요.
프레시 푸드 그린
장보기, 레시피, 영양 관리 앱에 어울려요.
프리미엄 쇼핑
뉴트럴하고 우아해요. 상품 사진이 주인공이 돼요.
색을 누르면 HEX 코드가 복사돼요. 연필 아이콘을 누르면 편집기에서 팔레트를 열어 수정할 수 있어요.
상태 색은 처음부터 정하세요
모든 앱에는 오류, 성공, 경고, 정보를 나타내는 색이 필요해요. 팔레트와 어울리는 톤을 고르고, 오류 색을 브랜드 버튼 같은 다른 용도로 쓰지 마세요. 색에만 의존하지 않도록 아이콘이나 텍스트를 함께 쓰세요.
다크 모드도 디자인하세요
대부분의 휴대폰이 다크 모드를 지원하고 많은 사용자가 켜 두고 있어요. 색을 반전하는 것만으로는 부족해요. 완전한 검정 대신 아주 짙은 회색을 쓰고, 포인트 컬러의 채도를 조금 낮춰 배경 위에서 번져 보이지 않게 하세요.
대비와 터치 영역을 확인하세요
WCAG 기준으로 텍스트는 배경과 최소 4.5:1의 대비가 필요해요. 버튼은 활성, 눌림, 비활성 상태가 서로 다르게 보여야 해요. 많은 사람이 그렇게 쓰듯이 야외와 낮은 화면 밝기에서도 앱을 테스트하세요.