20 Ideias de Paletas de Cores Preto e Cinza com Códigos Hexadecimais

Uma paleta de cores preto e cinza é uma das formas mais fáceis de deixar um design moderno, confiante e limpo. De layouts de UI a materiais impressos, esses tons neutros criam estrutura instantânea sem tirar o foco do conteúdo.

Abaixo você vai encontrar mais de 20 ideias de paletas preto e cinza com códigos HEX, além de dicas práticas para contraste, tipografia e escolha de cores de destaque.

Por que paletas preto e cinza funcionam tão bem

Paletas preto e cinza são naturalmente organizadas: a variação de valores cria hierarquia, espaçamento e destaque sem depender de muitos tons. Isso as torna ideais para layouts onde a clareza é importante—dashboards, páginas editoriais, páginas de detalhes de produto e sistemas de marca.

Elas também transmitem atemporalidade. Como os neutros não saem de moda tão rapidamente quanto esquemas de cores vibrantes, uma paleta monocromática ou baseada em carvão/ardósia permanece relevante por mais tempo e se adapta facilmente entre web, impresso e embalagens.

Por fim, combinações de preto e cinza deixam as cores de destaque ainda mais poderosas. Um único tom de teal, azul cobalto, coral ou limão pode se tornar imediatamente “clicável” em UI ou “especial” em materiais impressos, pois a base é calma.

20+ Ideias de Paletas de Cores Preto e Cinza (com Códigos HEX)

1) Ardósia da Meia-Noite

HEX: #0B0D10 #1A1F26 #2E3640 #7C8794 #E6E9EE

Clima: elegante, noturno, minimalista

Melhor uso para: UI de dashboard SaaS

Tons de meia-noite evocam o contraste de um horizonte urbano e superfícies de vidro limpas. Essa paleta preto e cinza brilha em dashboards, análises e telas administrativas onde a hierarquia é essencial. Combine com branco suave para espaçamento e um único destaque colorido para ações principais. Dica: mantenha os textos no cinza mais claro e reserve o quase preto para títulos e navegação.

Exemplo de imagem de ardósia da meia-noite gerado com media.io

Media.io

O Media.io é um estúdio online de IA para criar e editar vídeo, imagem e áudio no seu navegador.

Experimente Gratuitamente Agora

2) Estúdio Concreto

HEX: #111315 #2A2D30 #4A4F55 #B8BDC3 #F4F5F7

Clima: industrial, silencioso, refinado

Melhor uso para: site de portfólio arquitetônico

O clima de concreto industrial transmite calma, estrutura e um toque premium. Os cinzas intermediários deixam fotografias e renders intencionais, não ásperos. Combine com fundo branco quente e linhas pretas finas para um grid editorial. Dica: use o cinza mais claro para faixas de seção e assim dar respiro ao layout sem perder o visual minimalista.

Exemplo de imagem de estúdio concreto gerado com media.io

3) Sussurro de Grafite

HEX: #0F1114 #23262B #3B4048 #9AA2AD #DADFE6

Clima: suave, moderno, discreto

Melhor uso para: apresentação de manual de marca

Tons de grafite suaves transmitem moderação, clareza e um visual artesanal moderno. Funcionam perfeitamente para um manual de marca onde tipografia, espaçamento e regras de logo devem transmitir confiança. Combine com um tom apagado de azul ou verde sálvia para destaques secundários. Dica: mantenha gráficos e paletas sobre cinza claro para evitar reflexo branco em apresentações.

Exemplo de imagem de sussurro de grafite gerado com media.io

4) Fio de Prata

HEX: #101215 #2C2F35 #5B616B #C7CDD6 #FFFFFF

Clima: brilhante, limpo, polido

Melhor uso para: página de produto de e-commerce

Neutros polidos transmitem ar de leveza, nitidez e foco no produto, como detalhes cromados sob luz de estúdio. O lado claro mantém o site confiável e fácil de navegar. Combine com uma única cor de CTA saturada (cobalto ou coral) para layouts focados em conversão. Dica: utilize o cinza médio para divisórias e microtextos mantendo as informações principais em destaque.

Exemplo de imagem de fio de prata gerado com media.io

5) Sinal de Tempestade

HEX: #0E1013 #1F242B #3E4652 #A0A9B5 #E9EDF2

Clima: dramático, tecnológico, focado

Melhor uso para: página de landing page de cibersegurança

Tons tempestuosos evocam telas criptografadas, salas de servidor e sensação de urgência controlada. Essas combinações preto e cinza são ideais para segurança, conformidade e serviços de TI que demandam autoridade sem ser chamativas. Combine com teal elétrico ou limão para estados de status e selos de confiança. Dica: mantenha os gradientes sutis e use ícones bem definidos para reforçar o clima tech.

Exemplo de imagem de sinal de tempestade gerado com media.io

6) Tinta e Névoa

HEX: #0A0B0D #1B1D21 #343842 #B0B6C0 #F2F4F7

Clima: cinematográfico, suave, elegante

Melhor uso para: página editorial de revista

Tinta cinematográfica sobre cinzas enevoados transmite elegância e mistério sutil. Serve para layouts de texto longo onde a tipografia deve parecer intencional e sofisticada. Combine com branco papel quente e finos detalhes de linha para um grid editorial clássico. Dica: use o cinza névoa como fundo de caixas de legenda para separar notas sem bordas pesadas.

Exemplo de imagem de tinta e névoa gerado com media.io

7) Carvão de Museu

HEX: #0C0C0D #202022 #3A3A3F #8F8F96 #E8E8EA

Clima: curado, silencioso, estilo galeria

Melhor uso para: cartaz de exposição de arte

Tons de carvão curados lembram uma parede de galeria tranquila sob luz suave. Deixam títulos e datas das obras em destaque sem competir com as imagens. Combine com uma cor de destaque para o nome do artista principal guiando o olhar do público. Dica: mantenha margens amplas e alinhe o texto em um grid rígido para acabamento nível museu.

Exemplo de imagem de carvão de museu gerado com media.io

8) Monocromático Aço

HEX: #0D0F12 #262B31 #414A55 #6F7A88 #D9DEE6

Clima: profissional, estruturado, corporativo

Melhor uso para: layout de relatório anual

Cinzas aço transmitem estrutura, confiança e informações bem organizadas. São ideais para relatórios cheios de gráficos, tabelas e destaques de dados. Combine com um destaque discreto como azul-marinho para separar seções sem perder a proposta neutra. Dica: reserve o tom mais escuro apenas para títulos, mantendo páginas densas e legíveis.

Exemplo de imagem de monocromático aço gerado com media.io

9) Pérola Sombreada

HEX: #0E0E10 #24262B #5A5F68 #C9CDD3 #FAFAFB

Clima: luxo, suave, alto contraste

Melhor uso para: embalagem de produto de beleza

Pretos sombrios combinados com cinzas perolados transmitem luxo, como tecido de cetim sob um holofote. Essa combinação de preto e cinza funciona bem para beleza, skincare e fragrância, onde a tipografia minimalista reforça a sensação premium. Combine com prata em folha ou um toque de blush para um detalhe refinado. Dica de uso: mantenha o acabamento fosco nos tons escuros para que os destaques pareçam intencionais, e não brilhantes.

Exemplo de imagem de pérola sombreada gerada usando media.io

10) Tipo Silencioso

HEX: #0B0C0E #1C1F24 #2F353E #A7AFBA #F6F7F9

Clima: calmo, tipográfico, minimalista

Melhor uso para: sistema de tipografia para blog

Neutros calmos criam um palco silencioso para as palavras, como tinta em papel liso. A variedade de cinzas facilita a construção de uma hierarquia tipográfica sem ruído visual. Combine com um leve destaque (azul acinzentado ou terracota) para links e destaques. Dica de uso: utilize o cinza suave para blocos de código e citações, mantendo o fluxo de leitura ininterrupto.

Exemplo de imagem de tipo silencioso gerada usando media.io

11) Asfalto Minimalista

HEX: #090A0B #16181B #2A2E34 #616873 #DDE1E7

Clima: urbano, ousado, moderno

Melhor uso para: lookbook streetwear

Tons de asfalto urbano transmitem ousadia e modernidade, como asfalto fresco e reflexos de neon. Proporcionam contraste forte para fotos de moda sem perder o layout minimalista. Combine com um único detalhe chamativo para datas de lançamento e etiquetas de preço. Dica de uso: utilize o cinza intermediário para rótulos e informações de tamanho para manter o foco nas fotos dos produtos.

Exemplo de imagem de asfalto minimalista gerada usando media.io

12) Fumaça e Cromo

HEX: #0C0E10 #22262C #3C434E #8D98A6 #EEF1F5

Clima: futurista, nítido, tecnológico

Melhor uso para: anúncio de produto de hardware

Tons nítidos de fumaça e cromo evocam engenharia de precisão e superfícies metálicas limpas. Essa paleta de preto e cinza fortalece lançamentos de hardware que precisam transmitir modernidade e exclusividade. Combine com detalhes em azul frio para especificações e destaques de recursos. Dica de uso: coloque informações técnicas nos painéis cinza mais claros para manter o anúncio legível à primeira vista.

Exemplo de imagem de fumaça e cromo gerada usando media.io

13) Linho Sombreado

HEX: #111214 #2A2C30 #4B4F56 #BFC3C9 #F1EFEA

Clima: neutro quente, aconchegante, equilibrado

Melhor uso para: mood board de interiores modernos

Neutros quentes e sombreados lembram estofados de linho e luz suave da tarde. O branco levemente cremoso evita que a paleta se torne fria. Combine com texturas de madeira natural e latão escovado para um visual moderno e acolhedor. Dica de uso: utilize os tons escuros para molduras e acessórios, deixando os tecidos nos cinzas mais suaves.

Exemplo de imagem de linho sombreado gerada usando media.io

14) Caderno Noir

HEX: #07080A #171A1F #2B313A #9099A6 #F7F8FA

Clima: inteligente, acadêmico, focado

Melhor uso para: UI de aplicativo de anotações

Tons de caderno noir transmitem foco e estudo, como grafite em papel limpo. Eles ajudam o conteúdo a se destacar enquanto mantêm elementos de UI discretos. Combine com uma cor de destaque suave para tags e estados selecionados. Dica de uso: mantenha campos de entrada um tom mais claro que o fundo para que os anéis de foco sejam evidentes sem chamar muita atenção.

Exemplo de imagem de caderno noir gerada usando media.io

15) Grafite de Inverno

HEX: #0D0F13 #242A33 #3B4553 #AAB3C0 #F0F3F7

Clima: frio, arejado, moderno

Melhor uso para: telas onboarding de aplicativo mobile

Os cinzas frios de inverno são arejados e modernos, como gelo em vidro com bordas nítidas. Eles oferecem uma base limpa para ilustrações e textos curtos nas telas de boas-vindas. Combine com um destaque em tom vivo para os pontos de progresso e botões principais. Dica de uso: mantenha fundos quase brancos e utilize os cinzas escuros apenas para títulos, evitando uma impressão inicial pesada.

Exemplo de imagem de grafite de inverno gerada usando media.io

16) Carbono e Areia

HEX: #0B0C0D #1E2024 #3D4046 #B0B3B8 #E8DDCF

Clima: terroso, premium, fundamentado

Melhor uso para: rótulo para marca de café

Tons de carbono com destaque arenoso criam um clima terroso e premium, lembrando grãos torrados e papel kraft. Funcionam bem em rótulos que exigem forte contraste sem parecer estéril. Combine com linhas de ilustrações simples e textura de papel tátil. Dica de uso: imprima o tom mais escuro ligeiramente suavizado (preto rico) para evitar bordas borradas em papel não revestido.

Exemplo de imagem de carbono e areia gerada usando media.io

17) Florescência Monocromática

HEX: #0B0C0E #1E2126 #3A3F47 #C3C7CE #F8F8F9

Clima: suave, botânico, arejado

Melhor uso para: convite botânico em aquarela

Tons monocromáticos suaves lembram pétalas na neblina e lavagens de tinta delicadas. A gama delicada valoriza arte botânica sem perder legibilidade. Combine com traços em prata acinzentada e bastante espaço em branco para um visual elegante de papelaria. Dica de uso: mantenha o texto do convite em carvão profundo, não preto puro, para combinar com a suavidade aquarelada.

Exemplo de imagem de florescência monocromática gerada usando media.io

18) Neutro Prisma

HEX: #0E1012 #252A31 #4B5460 #9FA9B6 #ECEFF3

Clima: limpo, flexível, moderno

Melhor uso para: modelo de apresentação

Neutros limpos transmitem flexibilidade e modernidade, como um slide polido numa sala de conferências clara. Proporcionam consistência a gráficos, ícones e fotos em diversos tipos de slides. Combine com uma cor de destaque da marca para títulos de seção e métricas principais. Dica de uso: utilize o tom mais claro para fundos e intercale com painéis cinza suave para quebrar slides densos.

Exemplo de imagem de neutro prisma gerada usando media.io

19) Interface Obsidiana

HEX: #050607 #14171B #2B3138 #6A7380 #D7DCE3

Clima: escuro, preciso, alto contraste

Melhor uso para: site de documentação para desenvolvedores

Tons de obsidiana transmitem precisão e técnica, como um editor de código em sala escura. Essas combinações de preto e cinza facilitam a separação de navegação, sidebars e blocos de código sem bordas gritantes. Combine com um destaque contido (ciano ou âmbar) para links e realce de sintaxe. Dica de uso: mantenha o texto do código num painel levemente mais claro que o fundo da página para reduzir o cansaço visual.

Exemplo de imagem de interface obsidiana gerada usando media.io

20) Névoa Urbana

HEX: #101216 #2A2F37 #474F5B #B7BEC8 #F3F5F8

Clima: fresco, equilibrado, moderno urbano

Melhor uso para: brochura imobiliária

Os cinzas da névoa urbana são frescos e equilibrados, como uma névoa matinal sobre arranha-céus envidraçados. Combinam com brochuras imobiliárias onde plantas e fotos precisam de clareza e tranquilidade. Combine com detalhes metálicos suaves para preços e principais comodidades. Dica de uso: configure o texto do corpo em cinza escuro e mantenha os títulos um pouco mais claros que o preto para evitar contraste agressivo na impressão.

Exemplo de imagem de névoa urbana gerada usando media.io

21) Oficina Mono

HEX: #0A0B0D #1C1F24 #3A3F47 #7F8792 #E5E8ED

Clima: prático, fazedor, organizado

Melhor uso para: flyer de evento de oficina

Tons práticos evocam ferramentas, bancadas limpas e um clima maker sem enrolação. A paleta compacta facilita escanear horários, palestrantes e informações do local. Combine com um destaque forte para a data e link de inscrição. Dica de uso: use o cinza claro em blocos de seção para manter o flyer organizado sem caixas pesadas.

Exemplo de imagem de oficina mono gerada usando media.io

Quais cores combinam bem com preto e cinza?

Preto e cinza combinam facilmente com detalhes enérgicos como teal, lima, cobalto, coral ou magenta — perfeito quando você quer que CTAs, destaques ou rótulos importantes chamem a atenção. Sobre uma base neutra, mesmo uma pequena área de destaque se destaca.

Para combinações mais suaves e sofisticadas, experimente acentos atenuados como verde sálvia, azul acinzentado, blush ou areia quente. Assim, você mantém o clima monocromático, acrescentando calor e personalidade.

Se for projetar para impressão, considere metálicos (prata, estanho, ouro champanhe) como “cores” de destaque em foil, tinta ou acabamentos de materiais. Eles complementam tons de carvão sem tornar o layout poluído.

Como usar uma paleta preto e cinza em projetos reais

Construa hierarquia com valores, não cores extras: use quase preto para títulos/navegação, cinzas médios para UI secundária e divisores, e cinzas muito claros ou brancos-suaves para superfícies. Isso traz estrutura sem poluir visualmente as páginas.

Atenção ao contraste e legibilidade. Em vez de preto puro sobre branco em todo lugar, tente texto carvão escuro sobre fundo branco-suave para leituras longas, reservando preto absoluto apenas para destacar elementos-chave.

Para evitar um visual “chato”, adicione profundidade com espaçamento, sombras sutis e gradientes suaves — especialmente em temas escuros. Mantenha esses efeitos minimalistas para que a paleta continue limpa e profissional.

Crie visuais de paleta preto e cinza com IA

Se quiser visualizar como uma paleta preto e cinza funciona em dashboard, pôster, embalagem ou slide, gere simulações rápidas com IA. É um método ágil para testar clima, contraste e ideias de cor de acento antes de prosseguir o design completo.

Use os códigos HEX da sua paleta como parâmetros, depois descreva o layout e estilo de iluminação (estúdio, editorial, cinematográfico, UI minimalista). Você pode iterar pequenos ajustes no prompt para encontrar a atmosfera ideal em minutos.

Quando gostar do resultado, exporte e reutilize como referência de moodboard para web, impressão ou guias da marca.

Próximo: Paleta de Cores Rosa-Verde