Next-Gen Light Component Map

Glass White
#fcfcfc
Surface Peach
#ffdac1
Border Cloud
#e0e0e0
Primary Mint
#a8e6cf
Accent Navy
#30475e
Interactive Pink
#ff8fab

The palette consists of Light colors. Accent colors Surface Peach #ffdac1 and Primary Mint #a8e6cf. Palette has Neutral, Warm, Cool colors temperature.

By lightness, this palette runs from #30475E (darkest) to #FCFCFC (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).

Warm and cool swatches are fairly balanced.

HEX codes (sorted): #30475E, #A8E6CF, #E0E0E0, #FCFCFC, #FF8FAB, #FFDAC1

Palette Next-Gen Light Component Map has combination of 6 codes colors:

HEX: #fcfcfc, RGB: (252, 252, 252); HEX: #ffdac1, RGB: (255, 218, 193); HEX: #e0e0e0, RGB: (224, 224, 224)

HEX: #a8e6cf, RGB: (168, 230, 207); HEX: #30475e, RGB: (48, 71, 94); HEX: #ff8fab, RGB: (255, 143, 171)

Simplified version of palette colors

Tint of White, Shade of peachpuff, Shade of gainsboro, Tint of paleturquoise, Tint of darkslateblue, Shade of palevioletred

Color scheme was created by raccoon

More palettes with:

Colors codes in palette

Next-Gen Light Component Map color codes HEX, RGB information in table

Color	HEX	RGB	Name	Alternative name
#fcfcfc	#fcfcfc	RGB(252, 252, 252)	Glass White	Gray99
#ffdac1	#ffdac1	RGB(255, 218, 193)	Surface Peach	—
#e0e0e0	#e0e0e0	RGB(224, 224, 224)	Border Cloud	Gray88
#a8e6cf	#a8e6cf	RGB(168, 230, 207)	Primary Mint	—
#30475e	#30475e	RGB(48, 71, 94)	Accent Navy	—
#ff8fab	#ff8fab	RGB(255, 143, 171)	Interactive Pink	—

Color Palette Contrast

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

Text Color	Background Color	Contrast Ratio
#fcfcfc	#ffdac1	1.27
#fcfcfc	#e0e0e0	1.28
#fcfcfc	#a8e6cf	1.37
#ffdac1	#e0e0e0	1
#ffdac1	#a8e6cf	1.07
#ffdac1	#ff8fab	1.64

Image palette Next-Gen Light Component Map png

--color-glass-white:	#fcfcfc;
--color-surface-peach:	#ffdac1;
--color-border-cloud:	#e0e0e0;
--color-primary-mint:	#a8e6cf;
--color-accent-navy:	#30475e;
--color-interactive-pink:	#ff8fab;

$color-glass-white:	#fcfcfc;
$color-surface-peach:	#ffdac1;
$color-border-cloud:	#e0e0e0;
$color-primary-mint:	#a8e6cf;
$color-accent-navy:	#30475e;
$color-interactive-pink:	#ff8fab;

@color-glass-white:	#fcfcfc;
@color-surface-peach:	#ffdac1;
@color-border-cloud:	#e0e0e0;
@color-primary-mint:	#a8e6cf;
@color-accent-navy:	#30475e;
@color-interactive-pink:	#ff8fab;