GraphQL UI Patterns and Themes

  • Query Magenta
    #ec407a
  • Schema Indigo
    #3f51b5
  • Resolve Cloud
    #e0f7fa
  • Mutation Mustard
    #ffee58
  • Fetch Black
    #1c1c1c
  • API Snow
    #fdfdfd
  16
Criado em 07/25/2025 08:00
porhex
A paleta consiste em cores Claro, Semi escuro, Escuro. Cores de destaque Resolve Cloud #e0f7fa e Mutation Mustard #ffee58. A paleta tem Quente, Frio, Neutro temperatura de cores.

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

Saturação mista — 2 suaves e 3 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 quente (2 de 6).

Códigos HEX (ordenados): #1C1C1C, #3F51B5, #E0F7FA, #EC407A, #FDFDFD, #FFEE58

A paleta GraphQL UI Patterns and Themes combina 6 códigos de cor:
HEX: #ec407a, RGB: (236, 64, 122); HEX: #3f51b5, RGB: (63, 81, 181); HEX: #e0f7fa, RGB: (224, 247, 250)
HEX: #ffee58, RGB: (255, 238, 88); HEX: #1c1c1c, RGB: (28, 28, 28); HEX: #fdfdfd, RGB: (253, 253, 253)
Versão simplificada das cores da paleta
Tom claro de Rosa-profundo, Tom escuro de Azul-ardósia, Tom escuro de Azul-celeste, Tom claro de Amarelo, Tom claro de Preto, Tom escuro de Branco
O esquema de cores foi criado por hex

Códigos de cores na paleta

GraphQL UI Patterns and Themes códigos de cores HEX, informações RGB na tabela

CorHEXRGBNomenome alternativo
#ec407a#ec407aRGB(236, 64, 122)Query Magenta—
#3f51b5#3f51b5RGB(63, 81, 181)Schema Indigo—
#e0f7fa#e0f7faRGB(224, 247, 250)Resolve Cloud—
#ffee58#ffee58RGB(255, 238, 88)Mutation Mustard—
#1c1c1c#1c1c1cRGB(28, 28, 28)Fetch BlackGray11
#fdfdfd#fdfdfdRGB(253, 253, 253)API SnowBrilliance

Contraste da paleta de cores

4 pares de cores têm contraste baixo e precisam de melhorias, o que pode afetar a legibilidade.
Cor do textoCor de fundoRazão de contraste
#ec407a
#3f51b5
1.82
#e0f7fa
#ffee58
1.06
#e0f7fa
#fdfdfd
1.09
#ffee58
#fdfdfd
1.17

Paleta de imagens GraphQL UI Patterns and Themes png