모던 플랫 톤: 20가지 팔레트 조합 + Hex

플랫 컬러는 현대적이고 가독성이 뛰어나며 화면 전반에 걸쳐 쉽게 확장할 수 있습니다. UI, 브랜딩, 포스터 및 인쇄물에 완벽합니다. 톤이 깨끗할 때(그라데이션 없음) 레이아웃, 타이포그래피 및 계층 구조가 이야기를 전달합니다.

다음은 HEX 코드, 분위기 및 실용적인 사용 팁과 함께 20가지 플랫 컬러 팔레트 아이디어입니다. 또한 일치하는 비주얼을 생성하는 데 재사용할 수 있는 AI 프롬프트 예제도 제공됩니다.

플랫 팔레트가 효과적인 이유

플랫 팔레트는 시각적 노이즈를 제거합니다. 그라데이션과 무거운 텍스처가 없으면 사용자가 더 빠르게 스캔하고, UI 상태가 더 명확하게 느껴지며, 타이포그래피가 기기 전반에 걸쳐 선명하게 유지됩니다.

또한 제작 시 예측 가능합니다. 단색 채우기는 웹, 앱 및 인쇄 워크플로우에서 더 일관되게 재현되며 디자인 시스템에서 표준화하기가 더 쉽습니다.

가장 중요한 것은 플랫 컬러가 계층 구조를 명확하게 만든다는 것입니다. 역할(표면, 기본, 강조, 텍스트)을 할당하고 인터페이스나 레이아웃이 성장함에 따라 일관성을 유지할 수 있습니다.

20가지 이상의 플랫 컬러 팔레트 아이디어 (HEX 코드 포함)

1) 차분한 클레이 뉴트럴

HEX: #f2e9e4 #c9ada7 #9a8c98 #4a4e69 #22223b

분위기: 안정적, 차분한, 세련된

최적 용도: 편집 브랜드 가이드라인

안정적이고 갤러리 같은 이 클레이 뉴트럴은 린넨 종이, 부드러운 그림자, 조용한 자신감처럼 느껴집니다. 브랜드 가이드라인 페이지, 룩북 및 타이포그래피에 여백이 필요한 프리미엄 덱에 아름답게 작동합니다. 따뜻한 오프화이트 배경과 제목용 짙은 잉크 강조색을 조합하세요. 사용 팁: 본문 텍스트는 가장 어두운 네이비로 유지하고 모브는 콜아웃용으로 예약하여 거칠지 않게 대비를 유지하세요.

media.io를 사용하여 생성된 차분한 클레이 뉴트럴의 이미지 예

Media.io

Media.io는 브라우저에서 비디오, 이미지 및 오디오를 생성하고 편집하는 온라인 AI 스튜디오입니다.

지금 무료로 시도하기

2) 민티 팝

HEX: #e8f9fd #79dae8 #0aa1dd #2155cd #092a5e

분위기: 신선한, 선명한, 활기찬

최적 용도: 2D 대시보드 UI 목업

선명하고 기술적인 이 민트에서 네이비로 이어지는 톤은 맑은 물, 깨끗한 데이터, 빠른 피드백을 연상시킵니다. 계층 구조가 중요한 대시보드, 분석 패널 및 SaaS 위젯에서 빛을 발합니다. 밝은 시안을 짙은 네이비 사이드바와 균형을 맞추고 가독성을 위해 표면을 밝게 유지하세요. 사용 팁: 기본 버튼에는 선명한 파란색을 사용하고 호버 또는 보조 상태에는 부드러운 아쿠아를 사용하세요.

media.io를 사용하여 생성된 민티 팝의 이미지 예

3) 피치 소다

HEX: #fff1e6 #ffd7ba #ffb085 #ff7a59 #2d3047

분위기: 재미있는, 따뜻한, 현대적인

최적 용도: 소셜 미디어 프로모션 포스터

재미있고 스낵처럼 가벼운 이 믹스는 피치 탄산음료, 부드러운 크림, 펀치감 있는 선셋 강조색처럼 읽힙니다. 이 플랫 컬러 조합은 소셜 프로모션, 크리에이터 공지 및 펀치감 있는 인용 그래픽에 적합합니다. 코랄을 딥 인디고와 짝지어 강한 타입 대비를 만들고 연한 피치가 배경을 담당하도록 하세요. 사용 팁: 그라데이션을 제거하고 대담한 형태에 의존하여 깨끗하고 현대적인 느낌을 유지하세요.

media.io를 사용하여 생성된 피치 소다의 이미지 예

4) 포레스트 필드 노트

HEX: #f6f4d2 #c8d5b9 #8fc0a9 #68b0ab #4a7c59

분위기: 자연적인, 차분한, 아웃도어

최적 용도: 에코 패키징 컨셉

자연적이고 회복력 있는 이 그린은 눌린 나뭇잎, 재생 종이, 아침 하이킹처럼 느껴집니다. 에코 패키징, 지속 가능한 제품 라벨 및 자연 웰니스 브랜딩에 적합합니다. 크라프트 텍스처나 깨끗한 크림 배경과 짝지어 솔직하고 통기성 있는 모습을 유지하세요. 사용 팁: 규제 텍스트에는 가장 어두운 그린을 사용하고 아이콘그래피에는 미드 그린을 사용하여 밝은 재고에서 가독성을 유지하세요.

media.io를 사용하여 생성된 포레스트 필드 노트의 이미지 예

5) 나이트 아케이드

HEX: #f7b801 #f18701 #f35b04 #3d348b #0e0b16

분위기: 대담한, 전기적인, 드라마틱한

최적 용도: 이벤트 전단 디자인

전기적이고 대비가 높은 이 톤은 아케이드 조명, 야식, 대담한 헤드라인을 연상시킵니다. 즉각적인 에너지가 필요한 이벤트 전단, 클럽 포스터 및 캠페인 그래픽에 가장 적합합니다. 따뜻한 오렌지를 딥 바이올렛과 짝지어 펀치감을 주고 시각적 노이즈를 피하기 위해 검은색을 네거티브 공간으로 유지하세요. 사용 팁: 텍스트를 두 가지 두께로 제한하여 색상이 무거운 작업을 수행하도록 하세요.

media.io를 사용하여 생성된 나이트 아케이드의 이미지 예

6) 소프트 스카이 오피스

HEX: #f3f8ff #deecff #b1d4e0 #3e7cb1 #1f2f56

분위기: 경쾌한, 신뢰할 수 있는, 차분한

최적 용도: SaaS 랜딩 페이지 UI

경쾌하고 신뢰할 수 있는 이 스카이 블루는 명확한 온보딩 단계와 차분한 받은 편지함처럼 느껴집니다. 신뢰가 주요 스토리인 SaaS 랜딩 페이지, 기능 섹션 및 가격 표에 이러한 플랫 컬러 팔레트가 적합합니다. 충분한 여백과 내비게이션용 단일 네이비를 짝지어 경험을 고정된 상태로 유지하세요. 사용 팁: 미드 블루를 기본 CTA로 만들고 섹션 배경에 페일 틴트를 사용하여 스크롤을 안내하세요.

media.io를 사용하여 생성된 소프트 스카이 오피스의 이미지 예

7) 데저트 애프리콧

HEX: #fff4e0 #f2c6a0 #e07a5f #3d405b #81b29a

분위기: 따뜻한, 장인정신의, 균형잡힌

최적 용도: 모던 웨딩 초대장

따뜻하고 장인정신이 느껴지는 이 톤은 햇볕에 구운 돌, 애프리콧 블러시, 시원한 세이지 잎을 떠올리게 합니다. 모던 웨딩 초대장, 사전 안내 및 미니멀 문구 세트에 이상적입니다. 깔끔한 타이포그래피를 위해 딥 슬레이트를 크림과 짝지은 다음 애프리콧을 부드러운 하이라이트로 사용하세요. 사용 팁: 얇은 선이나 작은 아이콘과 같은 장식을 단순하게 유지하여 팔레트가 소박하기보다는 우아하게 유지되도록 하세요.

media.io를 사용하여 생성된 데저트 애프리콧의 이미지 예

8) 시트러스 라이브러리

HEX: #fff3b0 #ffcf56 #f29e4c #1b998b #2d3047

분위기: 똑똑한, 밝은, 자신감 있는

최적 용도: 책 표지 디자인

똑똑하고 밝은 이 세트는 형광펜으로 강조한 페이지, 감귤 껍질, 조용한 틸 밑줄처럼 느껴집니다. 논픽션 책 표지, 코스 워크북, 대담한 타이포그래피 재킷에 잘 작동합니다. 선명한 가독성을 위해 잉크빛 인디고를 노란색과 짝지고 틸을 현대적인 대위법으로 사용하세요. 사용 팁: 이미지를 최소화하고 색상이 선명하게 유지되도록 큰 타입이 디자인을 담당하도록 하세요.

media.io를 사용하여 생성된 시트러스 라이브러리의 이미지 예

9) 라일락 버블티

HEX: #f8e8ee #fcd5ce #d8e2dc #bee1e6 #a0c4ff

분위기: 부드러운, 귀여운, 진정시키는

최적 용도: 스킨케어 제품 광고

부드럽고 편안한 이 파스텔은 버블티 거품, 라일락 설탕, 경쾌한 패키징을 연상시킵니다. 차분한 톤이 필요한 스킨케어 광고, 부드러운 제품 출시 및 웰니스 배너에 적합합니다. 깨끗한 흰색 또는 매우 연한 블러시 배경과 짝지고 타입을 밝게 유지하되 대비를 높이세요. 사용 팁: 히어로 제품에는 하나의 지배적인 파스텔을 선택하고 나머지는 보조 블록으로 사용하여 흐릿한 모습을 피하세요.

media.io를 사용하여 생성된 라일락 버블티의 이미지 예

10) 모노크롬 스프린트

HEX:#f8f9fa #e9ecef #adb5bd #495057 #212529

분위기:미니멀, 빠른, 집중

최적 용도:아이콘 세트 및 UI 구성 요소

미니멀하고 집중적인 이 회색은 깨끗한 스프린트 보드와 방해 없는 작업 공간처럼 느껴집니다. 일관성이 우수한 아이콘 세트, UI 구성 요소 및 문서에 완벽합니다. 시스템의 다른 곳에 단일 브랜드 악센트 색상과 페어링하고 구조를 위해 이러한 중립 색상을 유지하세요. 사용 팁: 텍스트와 테두리에는 가장 어두운 색조를 예약하고, 표면에는 가장 밝은 색조를 사용하여 접근 가능한 대비를 유지하세요.

media.io를 사용하여 생성된 monochrome sprint의 이미지 예

11) 해양 운송

HEX:#e0fbfc #98c1d9 #3d5a80 #293241 #ee6c4d

분위기:해상, 대담한, 전문적인

최적 용도:프레젠테이션 슬라이드 덱

해상적이고 전문적인 이 색상은 선박 차트, 시원한 공기, 자신감 있는 산호 신호를 불러일으킵니다. 이 평평한 색상 구성표를 사용하여 약간의 개성이 있는 명확성이 필요한 슬라이드 데크, 보고서 및 기조연설 템플릿을 사용하세요. 섹션 구분자는 pale aqua와 deep navy를 페어링하고 주요 번호 또는 CTA에만 coral을 유지하세요. 사용 팁: 일관된 리듬을 만들기 위해 슬라이드에 걸쳐 산호 악센트를 소량 반복합니다.

media.io를 사용하여 생성된 해상 화물 이미지 예

12) 사쿠라나이트

HEX:#ffe5ec #ffb3c6 #ff8fab #a4133c #590d22

분위기:로맨틱, 극적인, 럭셔리

최적 용도:음악 앨범 표지

로맨틱하고 극적인 느낌이 나는 이 팔레트는 무대 조명 아래 벚꽃처럼 느껴집니다. 대담한 마음이 필요한 팝 및 R&B 앨범 커버, 싱글 아트, 아티스트 머치 그래픽에 적합합니다. 강력한 초점 대비를 위해 옅은 분홍색과 깊은 와인 셰이드를 매치하고 타이포그래피를 단순하게 유지하세요. 사용 팁: 가장 어두운 톤을 비네트나 프레임으로 사용하여 밝은 분홍색을 설탕이 아닌 의도적으로 보이게 하세요.

media.io를 사용하여 생성된 사쿠라나이트의 이미지 예제

13) 알파인 모닝

HEX:#f1faee #a8dadc #457b9d #1d3557 #e63946

분위기:선명하고, 모험심이 풍부하고, 맑음

최적 용도:여행 블로그 히어로 헤더

산뜻하고 모험적인 이 톤은 차가운 공기, 빙하 호수, 밝은 빨간색 트레일 마커를 연상시킵니다. 여행 블로그 헤더, 목적지 가이드, 편집 영웅 섹션에 잘 작동합니다. 네이비와 페일 민트를 결합하여 깔끔한 가독성을 유지한 다음 빨간색을 아끼게 사용하여 주요 동작을 가리킵니다. 사용 팁: 영웅 일러스트레이션을 간단하고 기하학적으로 유지하여 색상이 넓은 종횡비로 즉시 읽을 수 있습니다.

media.io를 사용하여 생성된 alpine morning의 이미지 예제

14) 테라코타 카페

HEX:#f7ede2 #f5cac3 #f28482 #84a59d #2a9d8f

분위기:아늑하고, 친절하고, 수제

최적 용도:카페 메뉴 디자인

아늑하고 친근한 이 색상은 찐 우유, 블러셔 세라믹, 카운터 위의 민트 식물처럼 느껴집니다. 카페 메뉴, 소규모 사업체 간판 및 식품 포장 인서트에 적합합니다. 따뜻한 분홍색과 시원한 녹색을 매치하여 레이아웃의 균형을 유지하고 크림을 숨쉬는 공간으로 사용하세요. 사용 팁: 가격을 가장 짙은 녹색으로 설정하여 부드러운 배경 톤에서 읽을 수 있도록 하세요.

media.io를 이용하여 생성된 테라코타 카페의 이미지 예제

15) 레트로 콘솔

HEX:#eae2b7 #fcbf49 #f77f00 #d62828 #003049

분위기:레트로, 펀치, 향수

최적 용도:앱 온보딩 화면

복고풍이고 강렬한 이 톤은 빈티지 콘솔, 아케이드 토큰, 대담한 화면 프롬프트를 떠올리게 합니다. 이러한 평평한 색상 조합은 빠른 이해와 장난스러운 모멘텀을 원하는 온보딩 화면에 적합합니다. 선명한 복사본을 위해 네이비와 크림을 사용한 다음 진행 상황과 하이라이트를 위해 주황색이나 빨간색을 사용하세요. 사용 팁: 일러스트레이션을 간단하게 유지하고 일관된 모서리 반경을 사용하여 모든 단계에서 모습이 일관성을 유지합니다.

media.io를 사용하여 생성된 retro console의 이미지 예제

16) 차가운 콘크리트

HEX:#f4f4f4 #d9d9d9 #b0bec5 #546e7a #263238

분위기:산업적, 현대적, 절제된

최적 용도:아키텍처 포트폴리오 레이아웃

산업적이고 절제된 이 세트는 콘크리트, 강철, 부드러운 흐린 빛처럼 느껴집니다. 작업이 중심에 남아야 하는 아키텍처 포트폴리오, 사례 연구 및 스튜디오 프레젠테이션에 적합합니다. 가장 어두운 숯과 밝은 회색 여백을 많이 맞추고 파란색 회색을 미묘한 섹션 큐로 유지하세요. 사용 팁: 무거운 블록 대신 얇은 규칙과 넉넉한 간격을 사용하여 고급스럽고 통풍이 잘되는 구조를 유지하세요.

media.io를 사용하여 생성된 쿨 콘크리트의 이미지 예

17) 가을장터

HEX:#fff1c1 #f4d35e #ee964b #f95738 #0d3b66

분위기:축제, 따뜻함, 자신감

최적 용도:시즌 세일 배너

축제적이고 따뜻한 이 색조는 시장 노점, 황금빛, 선명한 네이비 재킷을 연상시킵니다. 친절한 긴급성이 필요한 계절 세일 배너, 이메일 헤더 및 소매 프로모션에 적합합니다. 네이비와 노란색을 맞추어 대비를 높이고 배지나 할인 태그에는 주황색을 유지하세요. 사용 팁: 넓은 지역에서 모든 따뜻한 톤을 한 번에 사용하지 마십시오. 한 가지 따뜻한 색상을 지배하고 다른 색상을 악센트로 사용하세요.

media.io를 이용하여 생성된 가을장터 이미지 예제

18) 아이스크림 가게

HEX:#fde2e4 #fad2e1 #c5dedc #dbe7e4 #f0efeb

분위기:달콤하고, 가볍고, 통풍이 잘되는

최적 용도:베이비 샤워 초대장

달콤하고 통풍이 잘되는 이 파스텔 크림과 민트는 차가운 유리 케이스에 담긴 스쿱처럼 느껴집니다. 베이비 샤워 초대장, 부드러운 발표 사항, 부드러운 파티 문구류에 적합합니다. 간단한 세리프 또는 둥근 sans 유형과 짝을 이루고 가독성을 위해 배경을 대부분 크림색으로 유지하세요. 사용 팁: 숯과 같이 어두운 텍스트 색상을 하나만 추가하면 섬세한 톤이 가독성을 감소시키지 않습니다.

media.io를 사용하여 생성된 아이스크림 가게의 이미지 예제

19) 갤럭시 컷아웃

HEX:#f0f3bd #02c39a #00a896 #028090 #05668d

분위기:미래적이고, 깨끗하고, 바다적입니다.

최적 용도:핀테크 모바일 UI

미래적이고 바다적인 이 청록색은 어두운 방에서 빛나는 대시보드처럼 느껴집니다. 명확성이 신뢰를 구축하는 핀테크 모바일 UI, 지갑 화면 및 보안 흐름에 매우 적합합니다. 하이라이트 색상으로 옅은 라임을 사용하고 탐색과 차트를 위해 더 짙은 청록색을 유지하세요. 사용 팁: 피드백을 즉시 인식할 수 있도록 성공 상태에 대해서만 가장 밝은 녹색-청록색을 사용하세요.

media.io를 사용하여 생성된 galaxy cutout의 이미지 예

20) 햇빛이 드는 스튜디오

HEX:#fff8e7 #수수료440 #00bbf9 #00f5d4 #9b5de5

분위기:창의적, 낙관적, 현대적

최적 용도:크리에이터 포트폴리오 홈페이지

긍정적이고 창의적인 이 색상은 근처에 밝은 마커가 있는 책상 위의 햇빛처럼 보입니다. 크리에이터 포트폴리오, 에이전시 홈페이지, 장난스러운 개인 브랜드에 잘 작동합니다. 따뜻한 노란색과 크림을 많이 섞어 압도되지 않도록 하고, 버튼이나 키 링크에는 보라색을 사용하세요. 사용 팁: 섹션당 두 가지 지배적인 색상을 선택하고 나머지는 작은 악센트로 유지하여 시끄러운 페이지를 방지합니다.

media.io를 사용하여 생성된 sunlit studio의 이미지 예

플랫과 잘 어울리는 색상은?

플랫 컬러 팔레트는 깨끗하고 그래픽적인 모습을 유지하고 대비를 예측 가능하게 유지하기 때문에 투명한 중립색(흰색, 따뜻한 오프화이트, 밝은 회색, 차콜)과 가장 잘 어울립니다.

"한 영웅 + 한 악센트" 접근 방식을 시도해 보세요. 큰 표면의 경우 지배적인 평평한 톤을 선택한 다음 CTA, 배지 또는 키 숫자의 경우 단일 고에너지 악센트를 선택하세요. 이렇게 하면 시스템이 시끄러운 대신 현대적입니다.

그라데이션 없이 더 깊이가 필요한 경우 같은 색조의 계단식 램프(밝음, 중간, 어두움)와 대조적인 악센트(코랄과 네이비, 청록색과 오렌지색)를 사용하세요.

실제 디자인에서 플랫 컬러 팔레트를 사용하는 방법

디자인하기 전에 각 색상에 역할을 할당합니다. 배경/표면, 기본 동작, 보조 동작, 텍스트 및 테두리. 모든 톤에 일이 있을 때 평평한 색상은 의도적인 느낌이 듭니다.

UI의 경우 표면을 가장 밝은 톤으로 유지하고 텍스트와 구분자에 가장 어두운 색상을 예약하여 접근성을 보호합니다. 인쇄와 포스터의 경우 크고 평평한 모양과 더 적은 타입 스타일을 사용하여 팔레트가 선명하게 유지됩니다.

"장난감 같은" 모습을 피하려면 채도 색상을 작은 영역으로 제한하고 부드러운 색상이 캔버스의 대부분을 처리하도록 하세요. 특히 현대 브랜딩과 웹사이트 레이아웃에서는 더욱 그렇습니다.

AI로 플랫 팔레트 비주얼 만들기

플랫 디자인 팔레트에 맞는 빠른 모형이 필요하신가요? 프롬프트 스타일을 재사용하고 색상 신호만 바꾸어 일관된 비주얼(포스터, UI 화면, 표지, 포장)을 생성합니다.

Media.io를 사용하면 매번 처음부터 시작하지 않고도 위의 프롬프트를 붙여넣고, 종횡비를 조정하고, 브랜드 시스템과 일치하는 일련의 응집력 있는 이미지를 만들 수 있습니다.

결과가 마음에 들면 프롬프트를 템플릿으로 저장하여 향후 자산이 캠페인, 페이지 및 플랫폼 전반에 걸쳐 일관성을 유지합니다.

다음: 민들레 컬러 팔레트