GraphQL UI Patterns and Themes

Query Magenta
#ec407a
Schema Indigo
#3f51b5
Resolve Cloud
#e0f7fa
Mutation Mustard
#ffee58
Fetch Black
#1c1c1c
API Snow
#fdfdfd

The palette consists of Light, Semi dark, Dark colors. Accent colors Resolve Cloud #e0f7fa and Mutation Mustard #ffee58. Palette has Warm, Cool, Neutral colors temperature.

By lightness, this palette runs from #1C1C1C (darkest) to #FDFDFD (lightest). The lightness range is wide.

Saturation is mixed — some muted swatches and some vivid accents.

Some hue pairs sit near complementary positions — you may read this as complementary contrast (loose heuristic).

Overall temperature among swatches leans warm.

HEX codes (sorted): #1C1C1C, #3F51B5, #E0F7FA, #EC407A, #FDFDFD, #FFEE58

Palette GraphQL UI Patterns and Themes has combination of 6 codes colors:

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)

Simplified version of palette colors

Shade of deeppink, Tint of slateblue, Tint of azure, Shade of Yellow, Shade of Black, Tint of White

Color scheme was created by hex

More palettes with:

Colors codes in palette

GraphQL UI Patterns and Themes color codes HEX, RGB information in table

Color	HEX	RGB	Name	Alternative name
#ec407a	#ec407a	RGB(236, 64, 122)	Query Magenta	—
#3f51b5	#3f51b5	RGB(63, 81, 181)	Schema Indigo	—
#e0f7fa	#e0f7fa	RGB(224, 247, 250)	Resolve Cloud	—
#ffee58	#ffee58	RGB(255, 238, 88)	Mutation Mustard	—
#1c1c1c	#1c1c1c	RGB(28, 28, 28)	Fetch Black	Gray11
#fdfdfd	#fdfdfd	RGB(253, 253, 253)	API Snow	Brilliance

Color Palette Contrast

4 color pairs have low contrast and need improvement which may impact readability.

Text Color	Background Color	Contrast Ratio
#ec407a	#3f51b5	1.82
#e0f7fa	#ffee58	1.06
#e0f7fa	#fdfdfd	1.09
#ffee58	#fdfdfd	1.17

Image palette GraphQL UI Patterns and Themes png

GraphQL UI Patterns and Themes - #556608

--color-query-magenta:	#ec407a;
--color-schema-indigo:	#3f51b5;
--color-resolve-cloud:	#e0f7fa;
--color-mutation-mustard:	#ffee58;
--color-fetch-black:	#1c1c1c;
--color-api-snow:	#fdfdfd;

$color-query-magenta:	#ec407a;
$color-schema-indigo:	#3f51b5;
$color-resolve-cloud:	#e0f7fa;
$color-mutation-mustard:	#ffee58;
$color-fetch-black:	#1c1c1c;
$color-api-snow:	#fdfdfd;

@color-query-magenta:	#ec407a;
@color-schema-indigo:	#3f51b5;
@color-resolve-cloud:	#e0f7fa;
@color-mutation-mustard:	#ffee58;
@color-fetch-black:	#1c1c1c;
@color-api-snow:	#fdfdfd;