Hypermodern Figma Design Deck

Prototype Coral
#ffadad
AutoLayout Gray
#ced4da
Page Indigo
#6c5b7b
Vector Blue
#a0c4ff
Whiteboard White
#fdfdfd

The palette consists of Light, Semi dark colors. Accent colors Prototype Coral #ffadad and Vector Blue #a0c4ff. Palette has Warm, Cool, Neutral colors temperature.

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

Overall saturation feels mostly muted (lower chroma).

Most swatches are near-neutral or very low-chroma, so hue relationships are subtle.

Overall temperature among swatches leans cool.

HEX codes (sorted): #6C5B7B, #A0C4FF, #CED4DA, #FDFDFD, #FFADAD

Palette Hypermodern Figma Design Deck has combination of 5 codes colors:

HEX: #ffadad, RGB: (255, 173, 173); HEX: #ced4da, RGB: (206, 212, 218); HEX: #6c5b7b, RGB: (108, 91, 123)

HEX: #a0c4ff, RGB: (160, 196, 255); HEX: #fdfdfd, RGB: (253, 253, 253)

Simplified version of palette colors

Tint of lightpink, Tint of lightgrey, Shade of darkslateblue, Tint of lightsteelblue, Tint of White

Color scheme was created by bad_colors

More palettes with:

Colors codes in palette

Hypermodern Figma Design Deck color codes HEX, RGB information in table

Color	HEX	RGB	Name	Alternative name
#ffadad	#ffadad	RGB(255, 173, 173)	Prototype Coral	—
#ced4da	#ced4da	RGB(206, 212, 218)	AutoLayout Gray	—
#6c5b7b	#6c5b7b	RGB(108, 91, 123)	Page Indigo	—
#a0c4ff	#a0c4ff	RGB(160, 196, 255)	Vector Blue	—
#fdfdfd	#fdfdfd	RGB(253, 253, 253)	Whiteboard White	Brilliance

Color Palette Contrast

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

Text Color	Background Color	Contrast Ratio
#ffadad	#ced4da	1.18
#ffadad	#a0c4ff	1
#ffadad	#fdfdfd	1.74
#ced4da	#a0c4ff	1.18
#ced4da	#fdfdfd	1.46
#a0c4ff	#fdfdfd	1.74

Image palette Hypermodern Figma Design Deck png

--color-prototype-coral:	#ffadad;
--color-autolayout-gray:	#ced4da;
--color-page-indigo:	#6c5b7b;
--color-vector-blue:	#a0c4ff;
--color-whiteboard-white:	#fdfdfd;

$color-prototype-coral:	#ffadad;
$color-autolayout-gray:	#ced4da;
$color-page-indigo:	#6c5b7b;
$color-vector-blue:	#a0c4ff;
$color-whiteboard-white:	#fdfdfd;

@color-prototype-coral:	#ffadad;
@color-autolayout-gray:	#ced4da;
@color-page-indigo:	#6c5b7b;
@color-vector-blue:	#a0c4ff;
@color-whiteboard-white:	#fdfdfd;