슬레이트 그레이 컬러 팔레트 아이디어 (20가지 선택 + Hex)

슬레이트 그레이는 언제나 잘 어울리는 중립색 중 하나입니다: 차분하고 절제되어 있으며 은은한 배경부터 대담한 타이포그래피까지 쉽게 확장할 수 있습니다.

아래는 UI, 브랜딩 및 인테리어에 사용할 수 있는 HEX 코드가 포함된 20가지 이상의 슬레이트 그레이 컬러 팔레트 아이디어와 함께 빠른 조합 팁 및 비주얼을 빠르게 생성하는 AI 프롬프트를 제공합니다.

슬레이트 그레이 팔레트가 잘 작동하는 이유

슬레이트 그레이는 블루-그레이 톤과 차분한 중립색 사이의 최적 지점에 위치하여 기본적으로 차가운 산업적 느낌이 아니면서도 현대적으로 느껴집니다. 얼마나 어둡게 사용하느냐에 따라 "배경" 또는 "구조" 역할을 할 수 있습니다.

디지털 제품에서 슬레이트 그레이는 강력한 계층 구조를 지원합니다: 내비게이션과 제목에는 진한 톤, 표면에는 밝은 색조, 그리고 액션에는 하나의 액센트 컬러를 사용합니다. 이는 대시보드, 핀테크 및 에디토리얼 레이아웃에 특히 효과적입니다.

물리적 디자인(인테리어, 패키징)에서 슬레이트 그레이는 차분한 무게감을 더합니다. 나무, 모래, 황동, 테라코타와 같은 따뜻한 소재와 자연스럽게 어울려 전체적인 느낌을 안정적이고 프리미엄하게 유지합니다.

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

1) 안개 낀 항구

HEX: #708090 #2F3A44 #AAB2BD #D9D3C7 #C6A15B

분위기: 차분한, 해안의, 현대적인

최적 용도: SaaS 분석 대시보드 UI

시원한 항구 안개와 브러시 처리된 스틸이 안정적이고 집중된 톤을 설정합니다. 대비와 계층 구조가 중요한 데이터 중심 인터페이스에 사용하여 더 어두운 차콜이 내비게이션과 헤더를 고정시키도록 합니다. 따뜻한 모래색과 차분한 골드가 특히 차트, 배지 및 주요 지표에서 무균 상태로 느껴지는 것을 방지합니다. 팁: 골드는 하나의 주요 액션에만 사용하고 나머지는 그레이로 유지하여 더 깔끔한 스캔을 유지하세요.

media.io를 사용하여 생성된 안개 낀 항구의 이미지 예시

Media.io

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

지금 무료로 사용해보기

2) 블루 스틸과 블러쉬

HEX: #708090 #1F2A37 #E8B4B8 #F4F1EC #6BAED6

분위기: 세련된, 친근한, 경쾌한

최적 용도: 뷰티 브랜드 랜딩 페이지 UI

세련된 스틸이 부드러운 블러쉬를 만나 자신감 있으면서도 친근한 느낌을 줍니다. 이러한 슬레이트 그레이 컬러 조합은 깔끔한 구조와 부드럽고 인간적인 터치가 필요한 랜딩 페이지에 잘 작동합니다. 히어로 섹션에는 블러쉬를 오프화이트와 함께 사용하고, 링크와 보조 버튼에는 스카이 블루를 사용하세요. 팁: 본문 텍스트는 오프화이트에 유지하고 접근성을 유지하기 위해 제목에는 가장 진한 네이비를 사용하세요.

media.io를 사용하여 생성된 블루 스틸과 블러쉬의 이미지 예시

3) 재빛 세이지 스튜디오

HEX: #708090 #3E4A3D #C9D2C1 #F2EFE9 #B08A5A

분위기: 유기적인, 조용한, 에디토리얼

최적 용도: 세라믹 제품 패키징

조용한 스튜디오 조명과 흙빛 클레이 노트가 유기적이고 공예적인 분위기를 만듭니다. 세이지와 따뜻한 탠을 사용하여 차가운 베이스를 부드럽게 하세요. 특히 촉감과 차분함이 중요한 패키징에서 효과적입니다. 오프화이트는 타이포그래피에 여유 공간을 제공하고, 더 진한 그린은 아이콘과 성분 설명을 지원합니다. 팁: 슬레이트 톤을 주요 라벨 필드로 인쇄하고 액센트는 하나의 흙빛 하이라이트로 유지하여 프리미엄한 느낌을 주세요.

media.io를 사용하여 생성된 재빛 세이지 스튜디오의 이미지 예시

4) 폭풍 창문 뉴트럴

HEX: #708090 #111827 #9CA3AF #E5E7EB #F59E0B

분위기: 세련된, 고대비, 도시적인

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

폭풍 같은 창문 반사와 도시 그림자가 이 조합에 날카롭고 도시적인 느낌을 줍니다. 이와 같은 슬레이트 그레이 컬러 팔레트는 명확성, 신뢰 및 숫자에 대한 강력한 대비가 필요한 핀테크 플로우에 이상적입니다. 주요 텍스트와 내비게이션에는 거의 검은색을 사용하고, 앰버를 사용하여 상태, 경고 및 주요 CTA를 강조하세요. 팁: 앰버를 인터페이스의 10% 미만으로 유지하여 의미 있게 유지하고 시끄럽지 않게 하세요.

media.io를 사용하여 생성된 폭풍 창문 뉴트럴의 이미지 예시

5) 흑연과 살구

HEX: #708090 #2B2D31 #F4A261 #F7F3E9 #264653

분위기: 따뜻한 대비, 현대적인, 자신감 있는

최적 용도: 스타트업 피치 덱 슬라이드

흑연의 깊이와 살구의 따뜻함이 시끄럽지 않으면서도 활기찬 느낌을 줍니다. 깔끔한 헤드라인, 명확한 차트 및 기억에 남는 액센트가 필요한 피치 덱에 아름답게 작동합니다. 오프화이트를 주요 캔버스로 유지하고, 설명과 주요 숫자에는 살구색을 사용하세요. 팁: 틸을 보조 비주얼과 아이콘에 맞춰 덱이 섹션 전체에서 일관성을 유지하도록 하세요.

media.io를 사용하여 생성된 흑연과 살구의 이미지 예시

6) 비 오는 날 에디토리얼

HEX: #708090 #0B1320 #BFC7D5 #F6F5F2 #7C5CFC

분위기: 무디한, 세련된, 에디토리얼

최적 용도: 매거진 특집 레이아웃

비 오는 날의 고요함과 잉크 같은 대비가 세련되고 인쇄 준비된 느낌을 만듭니다. 연한 스틸 색조는 긴 읽기를 편안하게 유지하고, 거의 검은색은 헤드라인과 인용구에 권위를 더합니다. 바이올렛은 섹션 구분선, 캡션 또는 하나의 눈에 띄는 통계에만 절제되게 사용하세요. 팁: 본문 텍스트는 가장 어두운 톤으로 설정하고 줄 길이를 넉넉하게 유지하여 에디토리얼의 차분함을 유지하세요.

media.io를 사용하여 생성된 비 오는 날 에디토리얼의 이미지 예시

7) 북유럽 콘크리트

HEX: #708090 #3B4A5A #C7CED6 #F3F4F6 #A3B18A

분위기: 미니멀한, 경쾌한, 건축적인

최적 용도: 현대 거실 인테리어 팔레트 가이드

콘크리트 벽에 비치는 북유럽의 빛이 미니멀하고 숨 쉬는 분위기를 가져옵니다. 슬레이트와 스틸 톤을 페인트, 붙박이장 또는 실내 장식에 사용한 다음 연한 그레이-화이트 표면으로 공간을 부드럽게 만드세요. 차분한 올리브는 식물, 세라믹 또는 단일 의자를 위한 절제된 액센트가 됩니다. 팁: 올리브를 하나의 큰 아이템보다는 두 개의 작은 지점에 반복하여 더 균형 잡힌 느낌을 주세요.

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

8) 미드나잇 틸 액센트

HEX: #708090 #0F172A #0EA5A4 #CBD5E1 #F8FAFC

분위기: 하이테크, 선명한, 쿨한

최적 용도: 스마트워치 제품 광고

미드나잇의 깊이와 틸 스파크가 미래적이고 깨끗한 느낌을 줍니다. 연한 그레이는 디자인을 좋은 의미에서 임상적으로 유지하며, 명확성에 의존하는 기술 광고에 완벽합니다. 기능 하이라이트, 글로우 액센트 및 미묘한 모션 큐에 틸을 사용하고, 가장 어두운 톤은 제품 실루엣을 프레임합니다. 팁: 배경을 거의 화이트에 가깝게 유지하고 타이포그래피에 대비를 밀어 넣어 디바이스가 주인공으로 남도록 하세요.

media.io를 사용하여 생성된 미드나잇 틸 액센트의 이미지 예시

9) 더스티 로즈 오피스

HEX: #708090 #374151 #D1A3A4 #F5F2EE #8AB4F8

분위기: 전문적인, 부드러운, 환영하는

최적 용도: 기업 보고서 템플릿

부드러운 사무실 조명과 은은한 로즈 톤은 전문적인 레이아웃을 더욱 환영받는 느낌으로 만듭니다. 제목과 표 선에는 가장 진한 회색을 사용하고, 긴 텍스트 섹션에는 따뜻한 오프화이트를 활용하세요. 더스티 로즈는 섹션 헤더에 잘 어울리며, 연한 파란색은 링크와 참조를 돋보이게 합니다. 팁: 보고서가 빠르게 읽히도록 차트는 두 가지 데이터 색상과 중립색으로 유지하세요.

media.io를 사용하여 생성된 더스티 로즈 오피스 이미지 예시

10) 미네랄 스파 캄

HEX: #708090 #22303C #A7C4C2 #E9EFEF #CBAE82

분위기: 진정시키는, 깨끗한, 회복시키는

최적 용도: 웰니스 브랜드 아이덴티티 키트

미네랄 워터 톤과 부드러운 스팀은 회복적이고 깨끗한 분위기를 만듭니다. 시폼과 안개 같은 화이트는 신선함을 가져오고, 따뜻한 베이지는 인간적이고 자연스러운 대조를 더합니다. 로고 마크와 타이포그래피에는 어두운 톤을 사용하고, 패키징과 소셜 게시물은 밝고 경쾌하게 유지하세요. 팁: 아이덴티티를 광택 있는 것이 아닌 차분하게 유지하기 위해 미묘한 종이 질감과 같은 하나의 텍스처를 선택하세요.

media.io를 사용하여 생성된 미네랄 스파 캄 이미지 예시

11) 구리 하드웨어

HEX: #708090 #2D3748 #B87333 #EFE7DD #6B7280

분위기: 산업적인, 따뜻한, 프리미엄

최적 용도: 주방 가전 패키징

구리 포인트가 있는 산업용 스틸은 프리미엄하고 약간 작업실 같은 멋을 느끼게 합니다. 배지와 모델명에는 따뜻한 메탈릭 톤을 사용하고, 오프화이트는 깨끗한 설명서와 기능 목록을 지원합니다. 중간 회색은 보조 패널과 아이콘을 사라지지 않으면서 은은하게 유지합니다. 팁: 광택을 과도하게 사용하지 않고 상자를 고급스럽게 만들기 위해 구리를 스팟 또는 포일 악센트로 인쇄하세요.

media.io를 사용하여 생성된 구리 하드웨어 이미지 예시

12) 겨울 울

HEX: #708090 #1F2937 #C4CBD4 #F5F5F4 #A16207

분위기: 아늑한, 맞춤형, 시대를 초월한

최적 용도: 패션 룩북 스프레드

맞춤 울과 차가운 공기는 아늑하고 절제된 우아함으로 나타납니다. 배경과 여백에는 부드러운 회색을 사용하고, 강한 헤드라인과 가격에는 깊은 톤을 사용하세요. 따뜻한 갈색-골드는 콜아웃, 페이지 번호 또는 작은 그래픽 규칙에 대한 세련된 하이라이트를 만듭니다. 팁: 악센트 색상이 우연이 아닌 의도적으로 느껴지도록 사진을 온도가 더 차갑게 유지하세요.

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

13) 촛불 비스트로

HEX: #708090 #2B2A2F #E0C097 #F7F1E3 #8C5E3C

분위기: 친밀한, 따뜻한, 고급스러운

최적 용도: 레스토랑 메뉴 디자인

어두운 돌에 비친 촛불의 따뜻함은 친밀하고 고급스럽게 느껴집니다. 메뉴 제목과 섹션 구분선에는 가장 깊은 톤을 사용하고, 읽기 쉽도록 크림색 종이 톤에 본문 카피를 유지하세요. 탄과 코코아 색조는 아이콘, 식단 라벨 및 미묘한 테두리에 잘 어울립니다. 팁: 하이라이트가 바쁘지 않고 큐레이션된 것처럼 보이도록 시그니처 요리에 가장 따뜻한 갈색을 예약하세요.

media.io를 사용하여 생성된 촛불 비스트로 이미지 예시

14) 천상의 밤

HEX: #708090 #0A0F1F #94A3B8 #F8FAFC #F97316

분위기: 극적인, 현대적인, 에너제틱한

최적 용도: 음악 페스티벌 포스터

천상의 밤 분위기는 드라마를 더하며, 깊은 하늘에 네온처럼 느껴지는 밝은 하이라이트를 제공합니다. 포스터 필드에는 거의 검은색을 사용하고, 슬레이트와 옅은 회색이 타입 계층을 구조화하도록 하세요. 선명한 오렌지 펀치는 날짜, 티켓 정보 또는 단일 초점 그래픽에 완벽합니다. 팁: 오렌지를 하나의 타이포그래픽 웨이트로 유지하여 의도적인 신호처럼 읽히도록 하세요.

media.io를 사용하여 생성된 천상의 밤 이미지 예시

15) 미니멀 뮤지엄

HEX: #708090 #20262E #B8C0CC #FFFFFF #9B8C7A

분위기: 조용한, 큐레이션된, 갤러리처럼 깨끗한

최적 용도: 박물관 안내 표지판

조용하고 큐레이션된 톤은 의도적인 간격이 있는 갤러리 벽처럼 느껴집니다. 표지판의 기본 필드로 흰색을 사용하고, 화살표, 방 번호 및 읽기 쉬운 제목에는 어두운 톤을 사용하세요. 따뜻한 스톤 악센트는 작품과 충돌하지 않으면서 특별 전시를 강조하는 데 도움이 됩니다. 팁: 하나의 아이콘 웨이트를 선택하고 원거리 가독성을 위해 대비를 높게 유지하세요.

media.io를 사용하여 생성된 미니멀 뮤지엄 이미지 예시

16) 페블 패스

HEX: #708090 #334155 #CBD5E1 #F1F5F9 #22C55E

분위기: 신선한, 깨끗한, 가볍게 장난스러운

최적 용도: 앱 온보딩 UI

매끄러운 조약돌과 신선한 공기는 깨끗하고 가볍게 장난스러운 에너지로 나타납니다. 넓은 온보딩 화면에는 옅은 톤을 사용하고, 진행 상황, 성공 상태 및 확인에 대한 긍정적인 신호로 녹색을 도입하세요. 어두운 회색은 제목을 안정적으로 유지하고 일러스트레이션을 돋보이게 합니다. 팁: 사용자가 자신이 어디에 있는지 즉시 이해할 수 있도록 활성 단계에서만 진행 표시기를 녹색으로 만드세요.

media.io를 사용하여 생성된 페블 패스 이미지 예시

17) 올리브 드리프트

HEX: #708090 #2A3D3B #7D8F69 #E6E2D8 #D97706

분위기: 모험적인, 안정적인, 자연적인

최적 용도: 아웃도어 장비 이커머스 배너

안정적이고 트레일에 적합한 톤은 지나치게 거칠지 않으면서 모험적으로 느껴집니다. 올리브와 깊은 녹색-회색은 제품 사진과 잘 어울리며, 연한 모래색은 배너를 읽기 쉽고 열린 상태로 유지합니다. 할인이나 한정 드롭을 위한 작은 주목 끌기로 따뜻한 오렌지를 사용하세요. 팁: 제품 샷과 싸우지 않고 제안을 강조하도록 짧은 텍스트 뒤에만 악센트를 유지하세요.

media.io를 사용하여 생성된 올리브 드리프트 이미지 예시

18) 잉크 앤 샌드

HEX: #708090 #0F172A #D6D3CD #F9FAFB #2563EB

분위기: 선명한, 현대적인, 자신감 있는

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

부드러운 모래 위의 잉크 같은 어두운 대비는 잘 설정된 페이지처럼 선명하고 현대적으로 느껴집니다. 이 슬레이트 그레이 컬러 팔레트는 프로젝트가 여유 공간이 필요하고 타이포그래피가 스토리를 이끄는 포트폴리오 사이트에 적합합니다. 링크 및 호버 상태를 위해 중립 섹션과 쿨 블루를 페어링하고, 탐색 및 제목에는 가장 깊은 톤을 유지하세요. 팁: 방문자가 클릭 가능한 것을 즉시 인식할 수 있도록 상호 작용 요소에만 파란색을 사용하세요.

media.io를 사용하여 생성된 잉크 앤 샌드 이미지 예시

19) 흐린 라벤더

HEX: #708090 #2E2A3B #B8B3D6 #F4F3F8 #D4A373

분위기: 로맨틱한, 부드러운, 현대적인

최적 용도: 웨딩 초대장 세트

흐린 라벤더와 부드러운 회색은 현대적이고 깨끗함을 유지하면서 로맨틱하게 느껴집니다. 주요 종이 필드로 옅은 라벤더를 사용하고, 우아한 읽기를 위해 깊은 자두-회색으로 타이포그래피를 설정하세요. 따뜻한 탄은 모노그램, 테두리 또는 작은 모티프에 미묘하고 축하하는 느낌을 더합니다. 팁: 팔레트가 통풍이 잘 되고 지나치게 달콤하지 않도록 장식 요소를 얇고 최소한으로 유지하세요.

media.io를 사용하여 생성된 흐린 라벤더 이미지 예시

20) 하버 미스트 클래스룸

HEX: #708090 #334E68 #BFD7EA #F0F7FF #F6C453

분위기: 밝은, 친근한, 정돈된

최적 용도: 교육용 인포그래픽

밝은 안개 같은 파란색은 차분한 교실 벽처럼 친근하고 정돈되어 느껴집니다. 섹션과 박스에는 옅은 하늘 톤을 사용하고, 제목과 라벨을 읽기 쉽게 유지하기 위해 더 깊은 파란색-회색을 사용하세요. 햇살 같은 노란색은 눈을 안내하는 주요 사실, 아이콘 및 하이라이트에 잘 어울립니다. 팁: 일관된 시각적 신호를 만들기 위해 콜아웃 버블과 같은 하나의 반복 요소에 노란색을 적용하세요.

media.io를 사용하여 생성된 하버 미스트 클래스룸 이미지 예시

21) 스모키 플럼 콘트라스트

HEX: #708090 #2B1B2E #A78BFA #EDE9FE #94A3B8

분위기: 창의적인, 럭셔리한, 약간 무드있는

최적 용도: 책 표지 디자인

스모키 플럼과 부드러운 바이올렛은 질감이 있는 종이 위의 황혼 잉크처럼 창의적이고 약간 럭셔리하게 느껴집니다. 배경이나 제목 블록에는 깊은 자두를 사용하고, 저자 이름과 작은 세부 사항에는 옅은 바이올렛을 도입하세요. 쿨 그레이-블루는 디자인을 지나치게 달콤한 보라색으로 흘러가지 않도록 안정적으로 유지합니다. 팁: 메인 제목을 높은 대비의 세리프로 설정하고 현대적인 마무리를 위해 다른 타입을 최소한으로 유지하세요.

media.io를 사용하여 생성된 스모키 플럼 콘트라스트 이미지 예시

슬레이트 그레이와 잘 어울리는 색상은?

슬레이트 그레이는 더 부드럽고 매력적인 느낌을 원할 때 모래, 크림, 베이지, 밀과 같은 따뜻한 중립색과 쉽게 어울립니다. 이러한 색조는 현대적인 느낌을 잃지 않으면서 파란색-회색 베이스를 "따뜻하게" 합니다.

선명한 디지털 대비를 위해 슬레이트 그레이를 거의 검은색/네이비 및 깨끗한 오프화이트와 결합한 다음, CTA 및 상태를 위해 하나의 높은 가시성 악센트(앰버, 오렌지, 틸 또는 일렉트릭 블루)를 추가하세요.

더 표현적인 팔레트를 원한다면, 슬레이트 그레이는 배색을 차분하게 유지하면서 개성을 더하는 은은한 파스텔(더스티 로즈, 라벤더) 및 자연 녹색(세이지, 올리브)과도 잘 어울립니다.

실제 디자인에서 슬레이트 그레이 컬러 팔레트를 사용하는 방법

역할 할당부터 시작하세요: 기본 텍스트 및 탐색에는 어두운 슬레이트/차콜을 사용하고, 보조 UI 요소에는 중간 슬레이트를 사용하며, 표면 및 간격에는 매우 연한 회색을 사용합니다. 이렇게 하면 페이지 전체에서 레이아웃을 읽기 쉽고 일관되게 유지할 수 있습니다.

그런 다음 하나의 악센트 패밀리를 선택하고 그것을 고수하세요. 따뜻한 악센트(골드, 살구, 구리)는 프리미엄하고 친근하게 느껴지며, 쿨 악센트(틸, 스카이, 바이올렛)는 더 날카롭고 기술적으로 느껴집니다.

마지막으로, 특히 버튼, 작은 라벨 및 데이터 시각화에 대해 대비를 일찍 테스트하세요. 슬레이트 그레이는 미묘하므로 의도적인 계층 구조는 모든 것이 동일한 "좋은 회색" 톤으로 혼합되는 것을 방지합니다.

AI로 슬레이트 그레이 팔레트 비주얼 만들기

무드보드, UI 콘셉트 또는 패키징 목업을 구축하는 경우, 팔레트 기반 비주얼을 생성하면 프로덕션 파일에 커밋하기 전에 분위기를 검증하는 데 도움이 될 수 있습니다.

Media.io의 텍스트-이미지 도구를 사용하면 프롬프트를 붙여넣고(위의 예와 같이), 종횡비를 지정하고, 조명, 재료 및 스타일이 브랜드와 일치할 때까지 빠르게 반복할 수 있습니다.

방향이 마음에 들면 슬레이트 그레이 베이스를 일관되게 유지하고 처음부터 재디자인하지 않고 여러 변형을 탐색하기 위해 악센트 색상만 교체하세요.

다음: 밀색 컬러 팔레트