16진수 코드가 포함된 상위 20개 블랙 블루 그레이 컬러 팔레트

검정, 파랑, 회색 색상 팔레트는 권위(검정), 신뢰(파랑), 다양성(회색)의 균형을 이루기 때문에 현대적인 인터페이스, 프리미엄 브랜딩, 차분한 인테리어에 많이 사용됩니다.

아래는 HEX 코드가 포함된 20가지 무드 있는 검정 파랑 회색 색상 조합과 함께 재사용할 수 있는 실용적인 팁 및 AI 프롬프트입니다.

검정 파랑 회색 팔레트가 효과적인 이유

검정, 파랑, 회색은 자연스럽게 명확한 계층 구조를 만듭니다: 어두운 색은 구조를 정의하고, 회색은 가독성을 지원하며, 파랑은 행동과 신뢰를 나타냅니다. 이는 상태, 강조, 탐색이 즉시 이해되어야 하는 UI에 특히 효과적입니다.

이러한 톤은 또한 "완성된" 느낌과 프리미엄 느낌을 줍니다. 검정과 차콜은 권위를 전달하고, 파랑은 강한 채도 없이도 현대적이고 기술적인 느낌을 더합니다.

마지막으로, 검정 파랑 회색 색상 구성은 미디어 전반에 걸쳐 유연합니다. 다크 모드, 라이트 레이아웃, 인쇄물 또는 인테리어에서 사용할 수 있으며, 필요할 때 따뜻한 중성색(크림색 등)을 추가하여 분위기를 부드럽게 할 수 있습니다.

20가지 이상의 검정 파랑 회색 색상 팔레트 아이디어 (HEX 코드 포함)

1) 미드나잇 하버

HEX: #0b1320 #0f2438 #1b4f72 #6b7785 #d7dee6

분위기: 무드 있는, 세련된, 해안가의

최적 용도: 핀테크 랜딩 페이지 UI

무드 있는 항구의 불빛과 깊은 물의 반사는 세련되고 자신감 있는 톤을 설정합니다. 이 검정 파랑 회색 색상 팔레트는 핀테크와 SaaS에 신뢰감을 줍니다. 특히 배경을 어둡게 유지하고 밝은 회색으로 가독성을 높일 때 효과적입니다. 깔끔한 여백과 버튼이나 주요 통계에 크림색 같은 따뜻한 강조색을 추가하세요. 팁: 시각적 노이즈를 피하기 위해 밝은 파랑을 하나의 주요 CTA에만 사용하세요.

media.io를 사용하여 생성한 미드나잇 하버의 이미지 예시

Media.io

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

지금 무료로 사용해보기

2) 그라파이트 애저

HEX: #0a0d10 #1d2a3a #2b6cb0 #8a97a6 #eef2f6

분위기: 세련된, 기술적인, 고대비의

최적 용도: 앱 대시보드 UI

깔끔한 애저 포인트가 있는 세련된 그라파이트 그림자는 날카롭고 현대적인 느낌을 만듭니다. 계층 구조가 중요한 대시보드에 잘 작동하며, 구조를 위한 어두운 패널과 여백을 위한 옅은 회색을 사용합니다. 인터페이스를 깔끔하게 유지하기 위해 간단한 아이콘과 얇은 구분선을 함께 사용하세요. 팁: 차트와 활성 상태에 대해 애저를 유일한 채도 요소로 사용하세요.

media.io를 사용하여 생성한 그라파이트 애저의 이미지 예시

3) 스틸웨이브 미니멀

HEX: #111418 #223042 #3a86c8 #9aa6b2 #cfd6de

분위기: 미니멀한, 차분한, 현대적인

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

부드러운 파랑 흐름이 있는 차분한 스틸 톤은 과하지 않으면서 현대적입니다. 이 조합은 차트를 읽기 쉽고 전문적으로 만들고 싶은 슬라이드 덱에 이상적입니다. 사진보다는 넉넉한 여백과 기하학적 도형과 함께 사용하세요. 팁: 제목을 거의 검정색에 가깝게 유지하고 본문 텍스트에 중간 회색을 사용하여 프로젝터의 눈부심을 줄이세요.

media.io를 사용하여 생성한 스틸웨이브 미니멀의 이미지 예시

4) 스톰클라우드 오피스

HEX: #0f1115 #202a34 #2f4a63 #7d8b99 #f3f5f7

분위기: 전문적인, 안정적인, 절제된

최적 용도: 기업 웹사이트 히어로 배너

안정적인 스톰클라우드 중성색은 꾸준하고 신뢰할 수 있는 존재감을 가져옵니다. 타입과 메시지가 주도해야 하는 기업 히어로 섹션에 이 세트를 사용하고, 미묘한 파랑 깊이로 지원하세요. 모노크롬 사진과 부드러운 오프화이트 배경과 함께 사용하여 친근하게 유지하세요. 팁: 카피를 압도하지 않으면서 시선을 유도하기 위해 얇은 파랑 밑줄이나 선을 추가하세요.

media.io를 사용하여 생성한 스톰클라우드 오피스의 이미지 예시

5) 아틱 나이트 UI

HEX: #0b0e13 #1a2330 #1f6feb #a8b3bf #e6ebf0

분위기: 선명한, 야간의, 고명료의

최적 용도: 다크 모드 모바일 앱 UI

밤처럼 어두운 패널에 대비되는 선명한 북극 하이라이트는 깔끔하고 빠른 느낌을 줍니다. 강한 파랑은 상호작용으로 읽혀 다크 모드 내비게이션, 토글 및 링크에 훌륭합니다. 흐릿함을 피하기 위해 간단한 라인 아이콘과 절제된 그림자와 함께 사용하세요. 팁: 눈의 피로를 줄이기 위해 순수한 흰색 대신 연한 회색을 텍스트에 사용하세요.

media.io를 사용하여 생성한 아틱 나이트 ui의 이미지 예시

6) 데님 콘크리트

HEX: #121212 #2a2f35 #2b4c7e #88939f #d9dee3

분위기: 도시적인, 실용적인, 균형 잡힌

최적 용도: 스트리트웨어 룩북 레이아웃

데님 깊이가 있는 도시적인 콘크리트 그레이는 실용적이고 스타일리시합니다. 이 조합은 제품 사진을 위한 쿨하고 현대적인 배경을 원하는 룩북과 카탈로그에 적합합니다. 중간 회색이 레이아웃을 담당하고 파랑을 아껴서 사용할 때 인쇄물에서도 잘 읽힙니다. 팁: 캡션을 밝은 회색으로 유지하고 섹션 헤더에만 파랑을 사용하세요.

media.io를 사용하여 생성한 데님 콘크리트의 이미지 예시

7) 코발트 스모크

HEX: #0c0f14 #243447 #2f81f7 #5f6b76 #b9c2cc

분위기: 활기찬, 스모키한, 현대적인

최적 용도: e스포츠 스트림 오버레이

코발트 포인트가 있는 스모키 다크는 활기차고 경쟁적입니다. 대비가 즉각적이어야 하는 오버레이, 스코어보드 및 로어 서드에 사용하세요. 더 날카로운 느낌을 위해 굵은 압축 서체와 각진 구분선과 함께 사용하세요. 팁: 밝은 파랑을 레이아웃의 10~15%로 유지하여 여전히 특별하게 느껴지도록 하세요.

media.io를 사용하여 생성한 코발트 스모크의 이미지 예시

8) 슬레이트 블루프린트

HEX: #0e1013 #1c2836 #274c77 #98a4b3 #f0f2f4

분위기: 구조적인, 지적인, 차분한

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

구조적인 슬레이트와 블루프린트 블루는 정밀함과 계획을 연상시킵니다. 레이아웃이 깔끔하고 측정되고 쉽게 스캔되어야 하는 건축 및 엔지니어링 포트폴리오에 적합합니다. 블루프린트 분위기를 강화하기 위해 얇은 그리드 라인과 넉넉한 여백과 함께 사용하세요. 팁: 가장 밝은 톤을 페이지 배경으로 사용하고 가장 어두운 톤을 내비게이션에 사용하여 우아한 프레임을 만드세요.

media.io를 사용하여 생성한 슬레이트 블루프린트의 이미지 예시

9) 포기 피어

HEX: #0d1014 #2b3a42 #1d5c8a #aab4bf #e9edf2

분위기: 안개 낀, 조용한, 친근한

최적 용도: 블로그 헤더 및 타이포그래피 시스템

부드러워진 오션 블루가 있는 안개 낀 부두 그레이는 조용하고 읽기 쉽습니다. 이 세트는 드라마보다 편안함이 더 중요한 블로그와 긴 형식 페이지에 강력합니다. 더 부드러운 에디토리얼 느낌을 위해 따뜻한 종이 같은 배경과 미묘한 라인 아트와 함께 사용하세요. 팁: 보조 텍스트에 중간 회색을 사용하고 일관된 내비게이션 단서를 위해 링크를 파랑으로 유지하세요.

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

10) 디지털 스틸

HEX: #0a0c10 #202737 #345995 #707b86 #d5dbe2

분위기: 깔끔한, 기술적인, 현대적인

최적 용도: SaaS 제품 기능 페이지

깨끗하고 기술적인 톤은 브러시 처리된 금속과 광택이 나는 유리처럼 느껴집니다. 아이콘, 다이어그램 및 스크린샷에 차분한 프레임이 필요한 기능 페이지에서 사용하세요. 차분한 크림색 배지와 같은 따뜻한 단일 액센트와 짝을 이루어 레이아웃을 인간적으로 만드세요. 팁: 배경을 밝게 유지하고 가장 어두운 색조는 제목과 주요 레이블에만 사용하세요.

media.io를 사용하여 생성된 디지털 스틸의 이미지 예시

11) 뮤지엄 이브닝

HEX: #0f1216 #252c35 #2a5d9f #7a8694 #f5f6f7

분위기: 교양 있는, 우아한, 절제된

최적 용도: 이벤트 초대 전단지

교양 있는 저녁 톤은 조명이 비치는 디테일이 있는 조용한 갤러리처럼 느껴집니다. 이 팔레트는 타이포그래피가 프리미엄하고 차분하게 느껴져야 하는 초대장에 아름답게 어울립니다. 얇은 규칙, 작은 대문자, 그리고 많은 여백과 짝을 이루어 박물관 같은 레이아웃을 만드세요. 팁: 배경을 오프화이트로 설정하고 파란색은 날짜와 위치 강조에만 사용하세요.

media.io를 사용하여 생성된 뮤지엄 이브닝의 이미지 예시

12) 윈터 트랜짓

HEX: #101318 #1f2a35 #1b6aa5 #94a0ad #dfe5eb

분위기: 차가운, 시간 엄수의, 대도시의

최적 용도: 길찾기 포스터 디자인

차가운 대중교통 톤은 겨울 통근길의 표지판처럼 시간을 엄수하고 대도시적으로 느껴집니다. 대비와 명료성이 타협할 수 없는 길찾기 포스터와 정보 그래픽에 적합합니다. 기하학적 화살표와 엄격한 그리드와 짝을 이루어 멀리서도 모든 것을 읽기 쉽게 유지하세요. 팁: 방향 요소에는 파란색을, 카피와 배경 블록에는 회색 범위를 사용하세요.

media.io를 사용하여 생성된 윈터 트랜짓의 이미지 예시

13) 잉크스톤 스튜디오

HEX: #0b0b0d #242933 #3c5a80 #6e7885 #c9d0d8

분위기: 창의적인, 안정적인, 현대-클래식

최적 용도: 사진 포트폴리오 레이아웃

차분한 파란색 음영이 있는 잉크스톤 그림자는 창의적이고 안정적으로 느껴집니다. 프레임이 어둡고 미니멀하며 주의를 분산시키지 않아야 하는 사진 포트폴리오에 사용하세요. 그레이스케일 사진 및 미묘한 호버 상태와 짝을 이루어 이미지에 초점을 유지하세요. 팁: 여백을 넉넉하게 유지하고 캡션과 메타데이터에는 밝은 회색을 사용하세요.

media.io를 사용하여 생성된 잉크스톤 스튜디오의 이미지 예시

14) 하버라인 브랜딩

HEX: #0c1016 #1a2b3d #215e9a #808c9a #f1f4f7

분위기: 신뢰할 수 있는, 세련된, 프리미엄

최적 용도: 브랜드 아이덴티티 보드

세련된 항구 톤은 신뢰, 안정성 및 조용한 자신감을 전달합니다. 이 검정 파랑 회색 컬러 팔레트는 디지털과 인쇄 모두에서 유지되기 때문에 로고에서 문구류까지 브랜드 아이덴티티 시스템에 강력하게 적합합니다. 크림이나 샌드와 같은 따뜻한 단일 중성색과 짝을 이루어 친근함을 더하세요. 팁: 코팅되지 않은 종이에서 회색을 테스트하여 너무 차갑게 변하지 않도록 하세요.

media.io를 사용하여 생성된 하버라인 브랜딩의 이미지 예시

15) 조용한 모노크롬

HEX: #0f1113 #2a2e33 #3a4a5a #9aa3ad #f6f7f8

분위기: 조용한, 미니멀리스트, 균형 잡힌

최적 용도: 이력서 및 커버레터 템플릿

조용한 모노크롬 레이어는 잘 편집된 문서처럼 차분하고 집중적으로 느껴집니다. 타이포그래피, 간격 및 계층이 매우 명확해야 하는 이력서에 이상적입니다. 섹션 구분을 위해 미묘한 파란색-회색 규칙 하나와 짝을 이루고 나머지는 모두 중성으로 유지하세요. 팁: 무거운 채우기를 피하고 무게, 크기 및 간격에 의존하여 작업을 수행하세요.

media.io를 사용하여 생성된 조용한 모노크롬의 이미지 예시

16) 블루프린트 포스터

HEX: #0b0f15 #1f2d3a #0f5fa6 #8b98a6 #e7edf3

분위기: 대담한, 그래픽적인, 구조화된

최적 용도: 컨퍼런스 포스터

구조화된 어두운 중성색 위의 대담한 블루프린트 블루는 똑똑하고 방향성이 있게 느껴집니다. 이 세트는 강력한 섹션 구분과 즉각적인 가독성이 필요한 컨퍼런스 포스터에 탁월합니다. 산세리프 타이포그래피와 단순한 아이콘과 짝을 이루어 현대적으로 유지하세요. 팁: 가장 밝은 색조를 배경으로 사용하고 파란색을 트랙이나 연사를 위한 스포트라이트로 처리하세요.

media.io를 사용하여 생성된 블루프린트 포스터의 이미지 예시

17) 노티컬 터미널

HEX: #0a0d11 #17212b #234a7a #6f7c89 #cfd7df

분위기: 항해의, 기술 선도적인, 안정적인

최적 용도: 개발자 문서 사이트

터미널과 같은 어두운 색이 있는 항해 깊이는 안정적이고 기술적으로 느껴집니다. 코드 블록, 내비게이션 및 제목이 명확한 구분이 필요한 문서 사이트에 사용하세요. 코드에 모노스페이스 액센트와 짝을 이루고 파란색은 링크, 탭 및 포커스 상태에만 사용하세요. 팁: 코드 배경을 페이지보다 약간 밝게 하여 블록이 거친 대비 없이 돋보이도록 하세요.

media.io를 사용하여 생성된 노티컬 터미널의 이미지 예시

18) 스모키 코발트 패키징

HEX: #0e0f12 #2a3038 #1f5fbf #a3adba #f2f4f6

분위기: 프리미엄, 대담한, 현대적인

최적 용도: 그루밍 제품 패키징

코발트 에너지가 있는 프리미엄 스모키 중성색은 거칠지 않으면서 현대적이고 남성적으로 느껴집니다. 이러한 톤은 매트한 어두운 색이 품질을 나타내고 파란색이 신선한 엣지를 더하는 그루밍 패키징에 잘 어울립니다. 최소한의 타이포그래피와 소프트 터치 마감과 짝을 이루어 촉각적인 외관을 만드세요. 팁: 통제되고 고급스러운 하이라이트를 위해 코발트를 스팟 컬러 또는 포일 액센트로 인쇄하세요.

media.io를 사용하여 생성된 스모키 코발트 패키징의 이미지 예시

19) 레이니 데이 에디토리얼

HEX: #101217 #2d3640 #2a5674 #9aa7b4 #f7f8fa

분위기: 부드러운, 사려 깊은, 에디토리얼

최적 용도: 매거진 기사 레이아웃

부드러운 비 오는 날의 중성색은 사려 깊고 조용히 스타일리시하게 느껴집니다. 긴 읽기 자료가 부드러운 대비와 차분한 리듬이 필요한 매거진 레이아웃에 이상적입니다. 세리프 헤드라인과 밝은 파란색 부제목 규칙과 짝을 이루어 에디토리얼 리듬을 만드세요. 팁: 페이지가 통풍이 잘되고 일관되게 유지되도록 이미지 캡션을 중간 회색으로 유지하세요.

media.io를 사용하여 생성된 레이니 데이 에디토리얼의 이미지 예시

20) 나이트쉬프트 대시보드

HEX: #070a0f #1b2430 #2d6cdf #65707d #d8dee6

분위기: 집중된, 현대적인, 데이터 중심의

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

집중된 나이트쉬프트 톤은 결정을 위해 구축된 제어실처럼 느껴집니다. 검정 파랑 회색 색상 조합 중에서 이것은 차트를 읽기 쉽게 유지하면서 눈을 편안하게 하기 때문에 분석에서 빛을 발합니다. 중성 데이터 시각화와 짝을 이루고 선택된 필터, 활성 탭 및 주요 추세선에 파란색을 사용하세요. 팁: 비교를 명확하게 유지하기 위해 차트당 하나의 시리즈로 밝은 파란색을 제한하세요.

media.io를 사용하여 생성된 나이트쉬프트 대시보드의 이미지 예시

검정 파랑 회색과 잘 어울리는 색상은?

따뜻한 중성색은 가장 쉬운 업그레이드입니다: 크림, 아이보리, 샌드 및 따뜻한 베이지는 "기술적인" 느낌을 부드럽게 하고 어두운 레이아웃을 더 매력적으로 만듭니다. 버튼, 배지 및 배경 패널에 탁월합니다.

더 선명한 대비를 위해 밝은 흰색을 조금만 추가하고(특히 유형 및 하이라이트용) 눈부심을 줄이기 위해 대부분의 본문 텍스트를 밝은 회색으로 유지하세요. 두 번째 액센트가 필요한 경우 차분한 메탈(실버, 퓨터) 및 채도가 낮은 녹색이 파란색과 경쟁하지 않고 차가운 베이스를 보완할 수 있습니다.

의심스러울 때는 채도를 제한하세요: 하나의 기본 파란색 액센트, 하나의 따뜻한 중성색, 나머지는 검정/회색으로 통제되고 프리미엄한 외관을 유지하세요.

실제 디자인에서 검정 파랑 회색 색상 팔레트를 사용하는 방법

백분율 대신 역할로 시작하세요: 내비게이션과 헤더에 거의 검은색을, 표면/카드에 어두운 슬레이트를, 보조 텍스트에 중간 회색을, 배경에 밝은 회색/오프화이트를 할당하세요. 그런 다음 하나의 파란색을 상호 작용 색상(링크, 활성 탭, 선택된 상태)으로 지정하세요.

브랜딩에서는 디지털 및 인쇄 컨텍스트 모두에서 팔레트를 테스트하세요. 회색은 다른 조명 및 용지 재고에서 변할 수 있으므로 문구류 또는 패키징을 최종 확정하기 전에 차콜과 중간 회색을 검증하세요.

인테리어의 경우 파란색을 "깊이" 색상(액센트 벽, 캐비닛, 직물)으로 처리하고 회색과 검은색은 하드웨어와 고정 장치를 고정합니다. 방이 차갑게 느껴지는 것을 방지하기 위해 크림 조명 또는 우드 톤을 추가하세요.

AI로 검정 파랑 회색 팔레트 비주얼 만들기

이미 HEX 코드가 있는 경우 AI를 사용하여 일관된 UI 목업, 포스터, 브랜드 보드 및 패키징 컨셉으로 빠르게 전환할 수 있습니다. 핵심은 레이아웃을 명확하게 설명하고 프롬프트에 색상 값을 명시적으로 포함하는 것입니다.

한 번에 하나의 팔레트를 사용하고 파란색이 나타날 위치(CTA, 링크, 차트, 테두리)를 지정하세요. 이렇게 하면 출력이 깨끗하게 유지되고 우발적인 추가 색상을 피할 수 있습니다.

다음: 크림 색상 팔레트