16진수 코드가 포함된 최고의 도시 색상 팔레트 20선

도시 컬러 팔레트는 현대 도시 생활의 느낌을 담아냅니다: 차분한 뉴트럴 톤, 선명한 그림자, 그리고 화면과 인쇄물 모두에서 멋지게 보이는 따뜻한 액센트.

아래는 HEX 코드가 포함된 20개 이상의 도시 컬러 팔레트 아이디어와 Media.io에 복사하여 빠르게 일치하는 비주얼을 생성할 수 있는 바로 사용 가능한 AI 프롬프트입니다.

도시 팔레트가 잘 작동하는 이유

도시 팔레트는 도시가 자연스럽게 제공하는 색상으로 구성되어 "진짜" 같은 느낌을 줍니다: 콘크리트 그레이, 아스팔트 차콜, 안개 낀 블루, 벽돌 레드, 그리고 따뜻한 실내 조명.

또한 매우 실용적입니다. 차분한 뉴트럴 톤은 타이포그래피, 아이콘, 제품 사진을 배치하기 쉽게 만들며, 단일 액센트 색상은 CTA, 라벨, 하이라이트에 명확한 계층 구조를 만듭니다.

가장 중요한 것은 도시 컬러 스킴이 브랜드 시스템 전반에 걸쳐 잘 확장된다는 점입니다—UI 구성 요소부터 포스터, 패키징, 소셜 템플릿까지 너무 유행을 타지 않으면서 일관되게 작동합니다.

20개 이상의 도시 컬러 팔레트 아이디어 (HEX 코드 포함)

1) Sidewalk Latte

HEX: #F4AFA5 #C9C6C1 #3B2F2F #8E9A93 #F7F3EE

분위기: 아늑한, 차분한, 현대적인

최적 용도: 커피숍 브랜딩 및 메뉴 디자인

아늑하고 도시적으로 따뜻한 이 톤들은 서늘한 아침 보도에서 손에 든 라떼처럼 느껴집니다. 따뜻함이 중요한 메뉴, 로열티 카드, 소형 패키징을 위한 친근한 도시 컬러 팔레트입니다. 연어색 액센트를 에스프레소 텍스트와 대비시키고, 배경은 오프화이트로 통풍감 있게 유지하세요. 사용 팁: 세이지 그레이를 보조 제목에 사용하여 레이아웃이 귀엽지 않고 차분하게 유지되도록 하세요.

media.io를 사용하여 생성된 sidewalk latte 이미지 예시

Media.io

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

지금 무료로 시도하기

2) Steel and Citrus

HEX: #4C5866 #D7DCE2 #F2B441 #23262A #2F7C8A

분위기: 선명한, 활기찬, 자신감 있는

최적 용도: 기술 스타트업 랜딩 페이지 UI 목업

시트러스 포인트가 있는 선명한 스틸 그레이는 유리 타워와 빠른 통근을 연상시킵니다. 이 조합은 명확성과 강력한 콜투액션이 필요한 대시보드와 히어로 섹션에 잘 어울립니다. 차콜은 내비게이션에, 시트러스는 버튼, 배지, 주요 지표에만 사용하세요. 사용 팁: 틸을 차트나 링크로만 제한하여 액센트 계층이 읽기 쉽게 유지되도록 하세요.

media.io를 사용하여 생성된 steel and citrus 이미지 예시

3) Neon Alley Dusk

HEX: #1B1A22 #3B2A4A #E64B7A #F1C84C #B6B8C5

분위기: 대담한, 전기적인, 나이트라이프

최적 용도: 나이트라이프 이벤트 포스터 디자인

깊은 그림자에 대비되는 전기 핑크와 황금빛 조명은 젖은 포장도로에 반사되는 네온처럼 느껴집니다. 큰 타입 블록에는 어두운 베이스를 사용하고 날짜, DJ, 티켓 등급을 강조하는 데 핫 액센트를 사용하세요. 시각적 소음을 피하기 위해 단순한 기하학적 형태와 함께 사용하고, 간격과 가독성을 위해 연한 그레이를 유지하세요. 사용 팁: 헤드라인 뒤에 바이올렛에서 검정에 가까운 색으로 그라데이션을 시도하여 즉각적인 깊이감을 주세요.

media.io를 사용하여 생성된 neon alley dusk 이미지 예시

4) Rooftop Garden

HEX: #2E5D50 #8FB8A6 #E7D7C6 #C46A4A #3C3C3C

분위기: 신선한, 부티크, 편안한

최적 용도: 부티크 호텔 웹사이트 비주얼

신선한 그린과 따뜻한 클레이는 옥상 화분, 테라코타 화분, 조용한 라운지 코너를 연상시킵니다. 이 톤들은 특히 편의시설, 예약 섹션, 사진 캡션이 있는 호스피탤리티 페이지에서 빛을 발합니다. 부드러운 크림을 짙은 그린과 함께 사용하여 차분한 대비를 만들고, 클레이는 버튼이나 하이라이트용으로 남겨두세요. 사용 팁: 본문 텍스트에 차콜을 사용하여 프리미엄스럽고 스캔하기 쉬운 모습을 유지하세요.

media.io를 사용하여 생성된 rooftop garden 이미지 예시

5) Metro Concrete

HEX: #2D2F33 #6C7077 #B8BCC2 #F1F2F4 #A66B5B

분위기: 전문적인, 건축적인, 절제된

최적 용도: 부동산 브로슈어 및 리스팅 시트

부드러운 콘크리트 그레이와 차분한 구리 톤은 러시아워의 신축 로비처럼 느껴집니다. 이 도시 컬러 스킴은 신뢰, 구조, 미묘한 따뜻함이 필요한 부동산 레이아웃에 이상적입니다. 구리 액센트를 강력한 사진과 함께 사용하고, 연한 그레이를 평면도와 사양을 위한 깨끗한 캔버스로 사용하세요. 사용 팁: 제목은 검정에 가깝게 설정하고 본문 텍스트는 연한 그레이에 유지하여 인쇄 친화적인 명확성을 확보하세요.

media.io를 사용하여 생성된 metro concrete 이미지 예시

6) Brick and Fog

HEX: #B55A4A #E6E0D8 #6E7B83 #2C2A28 #F3B48B

분위기: 전통적인, 차분한, 스튜디오 준비 완료

최적 용도: 건축 포트폴리오 웹사이트

벽돌의 따뜻함과 시원한 안개 낀 그레이는 흐린 하늘 아래 오래된 파사드를 암시합니다. 프로젝트 페이지에는 밝은 뉴트럴을 사용하고 벽돌과 피치로 위치, 연도, 수상 같은 주요 세부 사항을 강조하세요. 작품이 주인공으로 남도록 충분한 여백과 얇은 선을 함께 사용하세요. 사용 팁: 캡션과 측정값에 차콜을 유지하여 절제되고 건축적인 느낌을 유지하세요.

media.io를 사용하여 생성된 brick and fog 이미지 예시

7) Crosswalk Minimal

HEX: #0F1012 #FFFFFF #B9BDC5 #E0D6C7 #D66A5E

분위기: 미니멀, 에디토리얼, 고대비

최적 용도: 패션 룩북 에디토리얼 레이아웃

부드러운 따뜻한 뉴트럴 톤과 함께하는 고대비 흑백은 깨끗한 횡단보도 줄무늬와 광택 나는 상점 같은 느낌을 줍니다. 룩북, 타이포그래피 중심 표지, 숨 쉴 공간이 필요한 이미지 캡션에 아름답게 작동합니다. 연어-코랄 액센트를 큰 블록보다는 섹션 구분선이나 페이지 번호와 함께 사용하세요. 사용 팁: 사진을 약간 채도를 낮춰 따뜻한 뉴트럴 종이 톤이 돋보이도록 하세요.

media.io를 사용하여 생성된 crosswalk minimal 이미지 예시

8) Streetcar Teal

HEX: #1F6A78 #86A9B0 #F7E7D3 #D27C5D #1C2024

분위기: 상쾌한, 해안 도시, 초대하는

최적 용도: 여행 블로그 헤더 그래픽

틸과 부드러운 샌드는 햇볕에 따뜻해진 건물들을 지나 물가로 향하는 전차 여행을 연상시킵니다. 제목 표시줄과 내비게이션에는 틸을 사용하고, 크림 톤으로 긴 글을 편안하게 유지하세요. 코랄을 작은 배지, 지도 핀, 카테고리 태그와 함께 사용하여 스캔을 안내하세요. 사용 팁: 순수한 검정의 거친 느낌 없이 가독성을 위해 본문 텍스트를 차콜에 가깝게 유지하세요.

media.io를 사용하여 생성된 streetcar teal 이미지 예시

9) Warehouse Rust

HEX: #7A3E2E #B46A4E #D9C1A7 #4A4F55 #1F1F1F

분위기: 거친, 수제, 산업적인

최적 용도: 크래프트 맥주 캔 패키징

녹슨 갈색과 거친 어두운 톤은 재생 목재, 강철 보, 소규모 양조장을 연상시킵니다. 이러한 톤은 질감과 진정성이 중요한 패키징, 특히 굵은 타이포그래피와 단순한 스탬프와 잘 어울립니다. 모래 베이지를 홉이나 곡물 일러스트와 페어링하여 라벨이 너무 무거워지지 않도록 합니다. 사용 팁: 법적 텍스트에는 미디엄 그레이를 사용하여 주목을 빼앗지 않으면서도 가시성을 유지하세요.

media.io를 사용하여 생성된 창고 녹 이미지 예시

10) 갤러리 그레이지

HEX: #F2EEE8 #D6CEC4 #A39B92 #5A5957 #C98B7A

분위기: 차분한, 세련된, 현대적인

최적 용도: 미니멀리스트 인테리어 디자인 브랜드 키트

부드러운 그레이지 레이어는 따뜻한 스포트라이트와 무광 프레임이 있는 조용한 갤러리 벽을 연상시킵니다. 이 어반 컬러 팔레트는 절제된 세련미가 필요한 브랜드 가이드, 슬라이드 덱, 포트폴리오 커버에 적합합니다. 깊은 그레이를 깔끔한 산세리프 타이포그래피와 페어링한 다음, 음영 처리된 테라코타를 하이라이트와 서명에 사용하세요. 사용 팁: 배경은 가장 밝은 톤으로 유지하고 구조와 계층을 위해 어두운 색조를 남겨두세요.

media.io를 사용하여 생성된 갤러리 그레이지 이미지 예시

11) 아스팔트 블룸

HEX: #24262B #5E6A75 #C7CDD2 #F2AFA5 #8A3B4A

분위기: 세련된, 로맨틱한, 도시의 밤

최적 용도: 스킨케어 제품 광고 크리에이티브

블러시와 베리가 어우러진 어두운 아스팔트 톤은 밤 스카이라인을 배경으로 한 꽃을 연상시킵니다. 지나치게 파스텔톤으로 가지 않으면서 우아함을 원하는 뷰티 광고에 이 조합을 사용하세요. 블러시를 깔끔한 제품 카피와 페어링하고, 베리는 퍼센티지나 효능 같은 작은 콜아웃에 사용하세요. 사용 팁: 블러시가 달콤하지 않고 신선하게 보이도록 쿨 그레이 배경을 선택하세요.

media.io를 사용하여 생성된 아스팔트 블룸 이미지 예시

12) 나이트 트레인

HEX: #0B0E14 #1E2A3A #4F6D7A #C7A27C #EAE2D6

분위기: 무디한, 신뢰할 수 있는, 영화 같은

최적 용도: 앱 온보딩 UI 화면

깊은 네이비와 슬레이트는 도시의 불빛이 흐릿하게 지나가는 기차 창밖을 내다보는 것 같은 느낌입니다. 따뜻한 탄은 핀테크, 여행 또는 멤버십 앱에 잘 어울리는 프리미엄 터치를 더합니다. 크림을 큰 제목과 페어링하고 명확한 시각적 경로를 위해 버튼을 탄 색상으로 유지하세요. 사용 팁: 어두운 배경이 거칠지 않고 편안하게 유지되도록 보조 텍스트에 슬레이트를 사용하세요.

media.io를 사용하여 생성된 나이트 트레인 이미지 예시

13) 사이드 스트리트 파스텔

HEX: #F6C6B4 #F1E6D8 #B7C0C7 #8E9CA6 #5B4B4B

분위기: 부드러운, 친밀한, 모던 클래식

최적 용도: 시티 엘로프먼트 초대장 세트

부드러운 피치와 페이퍼 크림은 골든 아워의 조용한 골목길을 연상시킵니다. 이 톤은 현대적인 감각과 함께 로맨스를 원하는 초대장에 완벽합니다. 쿨 그레이를 깔끔한 세리프 타이포그래피와 페어링하고, 깊은 코코아를 이름과 주요 세부사항에 사용하세요. 사용 팁: 통풍이 잘 되는 분위기를 잃지 않으면서 레이아웃을 구조화하기 위해 얇은 그레이 라인워크를 추가하세요.

media.io를 사용하여 생성된 사이드 스트리트 파스텔 이미지 예시

14) 코너 베이커리 간판

HEX: #F3D1B8 #C06B5A #3A2F2C #A1A9A5 #F7F5F1

분위기: 환영하는, 장인의, 동네의

최적 용도: 상점 간판 및 포스터 그래픽

따뜻한 페이스트리 톤과 코코아 브라운은 동네 빵집 밖의 손글씨 보드를 연상시킵니다. 깔끔한 가독성을 위해 크림 베이스를 사용하고 테라코타 레드가 브랜드 마크를 담당하도록 하세요. 음영 처리된 그레이-그린을 재료 콜아웃이나 보조 라벨과 페어링하여 팔레트가 너무 달콤해지지 않도록 하세요. 사용 팁: 순수한 검정보다 부드러운 룩을 위해 다크 브라운을 메인 텍스트 색상으로 인쇄하세요.

media.io를 사용하여 생성된 코너 베이커리 간판 이미지 예시

15) 스카이라인 블루아워

HEX: #2C3E50 #4B5D67 #95A5A6 #E0C097 #E76F51

분위기: 기업적인, 세련된, 미래지향적인

최적 용도: 연례 보고서 커버 디자인

따뜻한 하이라이트가 있는 블루 아워 톤은 불빛이 완전히 켜지기 직전의 스카이라인처럼 느껴집니다. 차갑게 보이지 않으면서 권위가 필요한 기업 보고서와 피치 덱에 적합합니다. 슬레이트 블루 섹션을 모래색 차트와 페어링한 다음, 주요 성과와 콜아웃에 코랄 액센트를 사용하세요. 사용 팁: 응집력 있고 전문적인 리듬을 유지하기 위해 아이콘 채우기를 라이트 그레이-블루로 유지하세요.

media.io를 사용하여 생성된 스카이라인 블루아워 이미지 예시

16) 트램 티켓

HEX: #F5F0E6 #D1C5B6 #2F3A3D #4F8A8B #E07A5F

분위기: 정돈된, 레트로 모던, 명확한

최적 용도: 지하철 지도 인포그래픽 디자인

크림 페이퍼와 잉키 차콜은 깨끗하고 수집 가능한 스탬프가 찍힌 트램 티켓의 느낌을 되살립니다. 이 어반 컬러 조합은 장식보다 명확성이 중요한 지도, 일정표 및 인포그래픽에 적합합니다. 틸을 노선과 페어링하고 코랄을 하나의 눈에 띄는 노선 또는 중요한 환승 지점에 사용하세요. 사용 팁: 라벨을 차콜로 유지하고 지나치게 얇은 획을 피하여 작은 크기에서도 모든 것이 읽기 쉽게 유지하세요.

media.io를 사용하여 생성된 트램 티켓 이미지 예시

17) 페이브먼트 피치

HEX: #F4AFA5 #F8EDE3 #C9C3BB #6D6A67 #2B2B2B

분위기: 친근한, 현대적인, 소셜 우선

최적 용도: 소셜 미디어 캐러셀 템플릿

따뜻한 뉴트럴 위의 부드러운 피치는 햇빛에 비친 포장도로와 미니멀 상점을 연상시킵니다. 대부분의 슬라이드에 라이트 크림을 사용한 다음, 헤더, 스티커 또는 가격표에 피치를 도입하세요. 캡션이 모바일에서 읽기 쉽도록 다크 차콜을 넉넉한 줄 간격과 페어링하세요. 사용 팁: 그림자를 은은하게 유지하고 깔끔하고 스크롤을 멈추게 하는 룩을 위해 단순한 모양을 고수하세요.

media.io를 사용하여 생성된 페이브먼트 피치 이미지 예시

18) 레이니 플라자

HEX: #3D4A4F #6E7F86 #B4C0C6 #E9E3DA #9C5C4B

분위기: 시원한, 안정적인, 아웃도어

최적 용도: 아웃도어 기어 카탈로그 스프레드

쿨 그레이와 미스티 블루는 천천히 움직이는 우산이 있는 비 오는 광장처럼 느껴집니다. 이 톤은 제품 사진에 안정적이고 실용적인 프레임이 필요한 카탈로그 스프레드에 적합합니다. 클레이 액센트를 가격표나 기능 콜아웃과 페어링하고, 라이트 뉴트럴을 깨끗한 페이퍼 베이스로 유지하세요. 사용 팁: 레이아웃이 바쁘지 않고 정돈되어 유지되도록 구분선과 테이블에 미드 그레이-블루를 사용하세요.

media.io를 사용하여 생성된 레이니 플라자 이미지 예시

19) 디스트릭트 나이트 마켓

HEX: #2A1F2D #5C3D5A #D96C5F #F0B44C #E6E4DF

분위기: 활기찬, 매운, 야경

최적 용도: 스트리트 푸드 페스티벌 전단지

스파이시 코랄과 골든 라이트가 있는 자두 그림자는 붐비는 야시장 위의 등불처럼 느껴집니다. 배경 블록에 깊은 톤을 사용하고 따뜻한 액센트가 라인업, 위치 및 시간으로 시선을 안내하도록 하세요. 굵은 색상에서도 세부사항이 읽기 쉽도록 작은 텍스트 영역에 페일 뉴트럴을 페어링하세요. 사용 팁: 서체를 단순하고 굵게 유지하여 포화된 액센트에도 견딜 수 있도록 하세요.

media.io를 사용하여 생성된 디스트릭트 나이트 마켓 이미지 예시

20) 모던 로프트

HEX: #F1E9DD #C9B9A6 #7C7A73 #2C2C2C #C46D5C

분위기: 따뜻한, 고급스러운, 현대적인

최적 용도: 가구 제품 랜딩 페이지 히어로

클레이 액센트가 있는 따뜻한 플라스터 뉴트럴은 깨끗한 선과 부드러운 오후 빛이 있는 조용한 로프트를 연상시킵니다. 크림 톤을 주요 캔버스로 사용한 다음, 차콜 제목과 구조화된 그리드로 레이아웃을 고정하세요. 클레이 액센트를 버튼이나 제품 라벨과 페어링하여 사진을 압도하지 않으면서 따뜻함을 더하세요. 사용 팁: 페이지가 레이어드되고 프리미엄하게 느껴지도록 보조 패널을 토프로 유지하세요.

media.io를 사용하여 생성된 모던 로프트 이미지 예시

21) 언더패스 잉크

HEX: #111316 #3E4650 #9AA3AD #E6DFD5 #F4A07B

분위기: 거친, 날카로운, 현대적인

최적 용도: 스트리트웨어 드롭 포스터 그래픽

잉키 블랙과 쿨 그레이는 지하도 벽처럼 느껴지며, 살구색 팝은 신선한 페인트에 붙인 스티커처럼 보입니다. 굵은 타이포와 강렬한 사진 처리를 위해 다크 베이스를 사용하세요. 라이트 뉴트럴을 제품 정보 블록과 페어링하고, 날짜나 가격과 같은 하나의 큰 요소에 살구색을 사용하세요. 사용 팁: 무거운 톤이 비좁지 않고 프리미엄하게 느껴지도록 넉넉한 여백을 추가하세요.

media.io를 사용하여 생성된 언더패스 잉크 이미지 예시

도시와 잘 어울리는 색상

어반 팔레트는 구조화된 뉴트럴과 가장 잘 어울립니다: 차콜, 콘크리트 그레이, 오프화이트, 슬레이트 블루. 이러한 색조는 레이아웃을 읽기 쉽게 유지하고 사진이 응집력 있게 느껴지도록 도와줍니다.

액센트의 경우, 주목을 유도하기 위해 따뜻한 색상 하나(샐먼, 클레이, 구리, 시트러스) 또는 쿨 하이라이트 하나(틸, 스틸 블루)를 선택하세요. "하나의 큰 액센트" 접근 방식은 도시 톤 디자인이 지저분하지 않고 현대적으로 보이게 만드는 것입니다.

더 넓은 범위가 필요한 경우, 배경과 텍스트를 뉴트럴 톤에 고정하면서 링크, 차트 라인 또는 태그와 같이 더 작은 규모로 두 번째 액센트를 추가하세요.

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

배경을 위해 뉴트럴 베이스(오프화이트 또는 라이트 그레이)로 시작한 다음, 타이포그래피와 UI 구조를 위해 가장 어두운 색조를 사용하세요. 이것은 어반 디자인으로 알려진 선명한 대비를 만듭니다.

다음으로, 액센트 색상을 한 가지 작업에만 할당하세요—CTA 버튼, 가격표, 이벤트 날짜 또는 주요 지표. 모든 하이라이트가 동일한 색조일 때, 디자인이 의도적이고 "도시적으로 깔끔하게" 느껴집니다.

마지막으로, 채도의 균형을 유지하세요. 어반 팔레트는 사진이 약간 채도가 낮고 인터페이스 색상이 음소거된 상태로 유지되어 액센트가 말하게 할 때 가장 강력하게 보입니다.

AI로 도시 팔레트 비주얼 만들기

위의 어반 컬러 스킴에 맞는 목업, 포스터 및 UI 콘셉트를 원하십니까? 팔레트 아래의 프롬프트를 복사하고 몇 분 안에 일관된 비주얼 스타일을 생성하세요.

Media.io는 반복 작업을 쉽게 만듭니다: 다양한 종횡비를 시도하고, 주제를 바꾸고(포스터에서 랜딩 페이지로), 브랜드 일관성을 위해 동일한 팔레트 분위기를 유지하세요.

마음에 드는 이미지가 있으면 브라우저를 떠나지 않고 캠페인, 썸네일 또는 프레젠테이션 슬라이드용으로 다듬을 수 있습니다.

다음: 라이트 샐몬 컬러 팔레트