Responsive CSS Grid Engine

Column Coral
#ff7043
Media Query Aqua
#00bcd4
Gutter Lime
#c6ff00
Flexbox Fog
#eceff1
Layout Indigo
#5e35b1
Baseline Black
#121212

The palette consists of Light, Dark colors. Accent colors Gutter Lime #c6ff00 and Layout Indigo #5e35b1. Palette has Warm, Cool, Neutral colors temperature.

By lightness, this palette runs from #121212 (darkest) to #ECEFF1 (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): #00BCD4, #121212, #5E35B1, #C6FF00, #ECEFF1, #FF7043

Palette Responsive CSS Grid Engine has combination of 6 codes colors:

HEX: #ff7043, RGB: (255, 112, 67); HEX: #00bcd4, RGB: (0, 188, 212); HEX: #c6ff00, RGB: (198, 255, 0)

HEX: #eceff1, RGB: (236, 239, 241); HEX: #5e35b1, RGB: (94, 53, 177); HEX: #121212, RGB: (18, 18, 18)

Simplified version of palette colors

Tint of coral, Tint of darkturquoise, Shade of greenyellow, Tint of whitesmoke, Shade of darkslateblue, Shade of Black

Color scheme was created by colorday

More palettes with:

Colors codes in palette

Responsive CSS Grid Engine color codes HEX, RGB information in table

Color	HEX	RGB	Name	Alternative name
#ff7043	#ff7043	RGB(255, 112, 67)	Column Coral	—
#00bcd4	#00bcd4	RGB(0, 188, 212)	Media Query Aqua	—
#c6ff00	#c6ff00	RGB(198, 255, 0)	Gutter Lime	—
#eceff1	#eceff1	RGB(236, 239, 241)	Flexbox Fog	—
#5e35b1	#5e35b1	RGB(94, 53, 177)	Layout Indigo	—
#121212	#121212	RGB(18, 18, 18)	Baseline Black	Dark Tone Ink

Color Palette Contrast

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

Text Color	Background Color	Contrast Ratio
#ff7043	#00bcd4	1.19
#00bcd4	#c6ff00	1.93
#00bcd4	#eceff1	1.98
#c6ff00	#eceff1	1.02

Image palette Responsive CSS Grid Engine png

--color-column-coral:	#ff7043;
--color-media-query-aqua:	#00bcd4;
--color-gutter-lime:	#c6ff00;
--color-flexbox-fog:	#eceff1;
--color-layout-indigo:	#5e35b1;
--color-baseline-black:	#121212;

$color-column-coral:	#ff7043;
$color-media-query-aqua:	#00bcd4;
$color-gutter-lime:	#c6ff00;
$color-flexbox-fog:	#eceff1;
$color-layout-indigo:	#5e35b1;
$color-baseline-black:	#121212;

@color-column-coral:	#ff7043;
@color-media-query-aqua:	#00bcd4;
@color-gutter-lime:	#c6ff00;
@color-flexbox-fog:	#eceff1;
@color-layout-indigo:	#5e35b1;
@color-baseline-black:	#121212;