Gerar paleta
  1. Paletas de cores
  2. Frontend Component Design System

Frontend Component Design System

  • Component Beige
    #f5f3e7
  • Element Rose
    #ffb4a2
  • Interactive Gray
    #d6d6d6
  • Primary Blue
    #3d5a80
  • Layer Mint
    #b8f2e6
  • Focus Black
    #1c1c1c
  21
Criado em 07/28/2025 11:07
porcoolor
A paleta consiste em cores Claro, Semi escuro, Escuro. Cores de destaque Element Rose #ffb4a2 e Layer Mint #b8f2e6. A paleta tem Neutro, Quente, Frio temperatura de cores.

Em luminosidade, a paleta vai de #1C1C1C (mais escuro) a #F5F3E7 (mais claro). A faixa de luminosidade é ampla.

Saturação mista — 2 suaves e 2 vívidas em 6 cores.

Algumas cores ficam quase opostas no círculo cromático, dando à paleta um contraste complementar.

No geral, a temperatura tende para o frio (2 de 6).

Códigos HEX (ordenados): #1C1C1C, #3D5A80, #B8F2E6, #D6D6D6, #F5F3E7, #FFB4A2

A paleta Frontend Component Design System combina 6 códigos de cor:
HEX: #f5f3e7, RGB: (245, 243, 231); HEX: #ffb4a2, RGB: (255, 180, 162); HEX: #d6d6d6, RGB: (214, 214, 214)
HEX: #3d5a80, RGB: (61, 90, 128); HEX: #b8f2e6, RGB: (184, 242, 230); HEX: #1c1c1c, RGB: (28, 28, 28)
Versão simplificada das cores da paleta
Tom escuro de Branco-floral, Tom claro de Salmão-claro, Tom claro de Cinza-claro, Tom claro de Azul-ardósia-escuro, Tom claro de Turquesa-pálido, Tom claro de Preto
O esquema de cores foi criado por coolor

Códigos de cores na paleta

Frontend Component Design System códigos de cores HEX, informações RGB na tabela

Cor HEX RGB Nome nome alternativo
#f5f3e7 #f5f3e7 RGB(245, 243, 231)Component Beige—
#ffb4a2 #ffb4a2 RGB(255, 180, 162)Element Rose—
#d6d6d6 #d6d6d6 RGB(214, 214, 214)Interactive GraySilver Medal
#3d5a80 #3d5a80 RGB(61, 90, 128)Primary Blue—
#b8f2e6 #b8f2e6 RGB(184, 242, 230)Layer Mint—
#1c1c1c #1c1c1c RGB(28, 28, 28)Focus BlackGray11

Contraste da paleta de cores

6 pares de cores têm contraste baixo e precisam de melhorias, o que pode afetar a legibilidade.
Cor do texto Cor de fundo Razão de contraste
#f5f3e7
#ffb4a2
1.53
#f5f3e7
#d6d6d6
1.3
#f5f3e7
#b8f2e6
1.11
#ffb4a2
#d6d6d6
1.17
#ffb4a2
#b8f2e6
1.37
#d6d6d6
#b8f2e6
1.16

Paleta de imagens Frontend Component Design System png

Frontend Component Design System - #556915
 Baixar imagem