Light Theme Prototyping Flow

Panel Peach
#ffe4c4
Field Sky
#bae6fd
Contrast Slate
#1f2937
Text Mist
#f1f5f9
Click Gold
#facc15
Border Cream
#fffbeb

The palette consists of Light, Dark colors. Accent colors Field Sky #bae6fd and Border Cream #fffbeb. Palette has Warm, Cool, Neutral colors temperature.

By lightness, this palette runs from #1F2937 (darkest) to #F1F5F9 (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).

Warm and cool swatches are fairly balanced.

HEX codes (sorted): #1F2937, #BAE6FD, #F1F5F9, #FACC15, #FFE4C4, #FFFBEB

Palette Light Theme Prototyping Flow has combination of 6 codes colors:

HEX: #ffe4c4, RGB: (255, 228, 196); HEX: #bae6fd, RGB: (186, 230, 253); HEX: #1f2937, RGB: (31, 41, 55)

HEX: #f1f5f9, RGB: (241, 245, 249); HEX: #facc15, RGB: (250, 204, 21); HEX: #fffbeb, RGB: (255, 251, 235)

Simplified version of palette colors

Shade of lightblue, Shade of Black, Tint of aliceblue, Tint of gold, Shade of oldlace

Color scheme was created by raccoon

More palettes with:

Colors codes in palette

Light Theme Prototyping Flow color codes HEX, RGB information in table

Color	HEX	RGB	Name	Alternative name
#ffe4c4	#ffe4c4	RGB(255, 228, 196)	Panel Peach	Bisque
#bae6fd	#bae6fd	RGB(186, 230, 253)	Field Sky	—
#1f2937	#1f2937	RGB(31, 41, 55)	Contrast Slate	—
#f1f5f9	#f1f5f9	RGB(241, 245, 249)	Text Mist	—
#facc15	#facc15	RGB(250, 204, 21)	Click Gold	—
#fffbeb	#fffbeb	RGB(255, 251, 235)	Border Cream	—

Color Palette Contrast

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

Text Color	Background Color	Contrast Ratio
#ffe4c4	#bae6fd	1.08
#ffe4c4	#f1f5f9	1.11
#ffe4c4	#facc15	1.25
#ffe4c4	#fffbeb	1.18
#bae6fd	#f1f5f9	1.21
#bae6fd	#facc15	1.15

Image palette Light Theme Prototyping Flow png

--color-panel-peach:	#ffe4c4;
--color-field-sky:	#bae6fd;
--color-contrast-slate:	#1f2937;
--color-text-mist:	#f1f5f9;
--color-click-gold:	#facc15;
--color-border-cream:	#fffbeb;

$color-panel-peach:	#ffe4c4;
$color-field-sky:	#bae6fd;
$color-contrast-slate:	#1f2937;
$color-text-mist:	#f1f5f9;
$color-click-gold:	#facc15;
$color-border-cream:	#fffbeb;

@color-panel-peach:	#ffe4c4;
@color-field-sky:	#bae6fd;
@color-contrast-slate:	#1f2937;
@color-text-mist:	#f1f5f9;
@color-click-gold:	#facc15;
@color-border-cream:	#fffbeb;