Modern CMS UI Layout Kit

Content Indigo
#6366f1
Editor Cream
#fff7ed
Block Mint
#22c55e
Toolbar Slate
#64748b
Image Coral
#fb7185
Meta Fog
#e5e7eb
Publish Jet
#1f2937

The palette consists of Light, Dark colors. Accent colors Content Indigo #6366f1 and Editor Cream #fff7ed. Palette has Cool, Neutral, Warm colors temperature.

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

Overall saturation feels vivid (higher chroma).

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

Overall temperature among swatches leans cool.

HEX codes (sorted): #1F2937, #22C55E, #6366F1, #64748B, #E5E7EB, #FB7185, #FFF7ED

Palette Modern CMS UI Layout Kit has combination of 7 codes colors:

HEX: #6366f1, RGB: (99, 102, 241); HEX: #fff7ed, RGB: (255, 247, 237); HEX: #22c55e, RGB: (34, 197, 94)

HEX: #64748b, RGB: (100, 116, 139); HEX: #fb7185, RGB: (251, 113, 133); HEX: #e5e7eb, RGB: (229, 231, 235)

HEX: #1f2937, RGB: (31, 41, 55)

Simplified version of palette colors

Tint of mediumslateblue, Tint of floralwhite, Tint of limegreen, Tint of slategrey, Tint of lightcoral, Shade of gainsboro, Shade of Black

Color scheme was created by colorslib

More palettes with:

Colors codes in palette

Modern CMS UI Layout Kit color codes HEX, RGB information in table

Color	HEX	RGB	Name	Alternative name
#6366f1	#6366f1	RGB(99, 102, 241)	Content Indigo	—
#fff7ed	#fff7ed	RGB(255, 247, 237)	Editor Cream	Fatback
#22c55e	#22c55e	RGB(34, 197, 94)	Block Mint	—
#64748b	#64748b	RGB(100, 116, 139)	Toolbar Slate	—
#fb7185	#fb7185	RGB(251, 113, 133)	Image Coral	—
#e5e7eb	#e5e7eb	RGB(229, 231, 235)	Meta Fog	—
#1f2937	#1f2937	RGB(31, 41, 55)	Publish Jet	—

Color Palette Contrast

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

Text Color	Background Color	Contrast Ratio
#6366f1	#22c55e	1.96
#6366f1	#64748b	1.06
#6366f1	#fb7185	1.65
#fff7ed	#e5e7eb	1.16
#22c55e	#fb7185	1.18
#22c55e	#e5e7eb	1.84

Image palette Modern CMS UI Layout Kit png

--color-content-indigo:	#6366f1;
--color-editor-cream:	#fff7ed;
--color-block-mint:	#22c55e;
--color-toolbar-slate:	#64748b;
--color-image-coral:	#fb7185;
--color-meta-fog:	#e5e7eb;
--color-publish-jet:	#1f2937;

$color-content-indigo:	#6366f1;
$color-editor-cream:	#fff7ed;
$color-block-mint:	#22c55e;
$color-toolbar-slate:	#64748b;
$color-image-coral:	#fb7185;
$color-meta-fog:	#e5e7eb;
$color-publish-jet:	#1f2937;

@color-content-indigo:	#6366f1;
@color-editor-cream:	#fff7ed;
@color-block-mint:	#22c55e;
@color-toolbar-slate:	#64748b;
@color-image-coral:	#fb7185;
@color-meta-fog:	#e5e7eb;
@color-publish-jet:	#1f2937;