Colors palettes
Frontend Compiler Visual Kit

Created at 07/13/2025 09:10

Frontend Compiler Visual Kit

Build Dust
#dcdcdc
Function Slate
#3c3f41
Render Bone
#f1f1f1
Component Olive
#a4b494
Syntax Cherry
#ff595e
Code Highlight
#ffde7d

The palette consists of Light colors. Accent colors Function Slate #3c3f41 and Code Highlight #ffde7d. Palette has Neutral, Cool, Warm colors temperature.

By lightness, this palette runs from #3C3F41 (darkest) to #F1F1F1 (lightest). The lightness range is wide.

Overall saturation feels mostly muted (lower chroma).

Hues sit in a neighboring band on the wheel (loose heuristic).

Overall temperature among swatches leans warm.

HEX codes (sorted): #3C3F41, #A4B494, #DCDCDC, #F1F1F1, #FF595E, #FFDE7D

Palette Frontend Compiler Visual Kit has combination of 6 codes colors:

HEX: #dcdcdc, RGB: (220, 220, 220); HEX: #3c3f41, RGB: (60, 63, 65); HEX: #f1f1f1, RGB: (241, 241, 241)

HEX: #a4b494, RGB: (164, 180, 148); HEX: #ff595e, RGB: (255, 89, 94); HEX: #ffde7d, RGB: (255, 222, 125)

Simplified version of palette colors

Tint of darkslategrey, Tint of whitesmoke, Shade of darkseagreen, Tint of salmon, Tint of Khaki

Color scheme was created by raccoon

More palettes with:

Colors codes in palette

Frontend Compiler Visual Kit color codes HEX, RGB information in table

Color	HEX	RGB	Name	Alternative name
#dcdcdc	#dcdcdc	RGB(220, 220, 220)	Build Dust	Gainsboro
#3c3f41	#3c3f41	RGB(60, 63, 65)	Function Slate	—
#f1f1f1	#f1f1f1	RGB(241, 241, 241)	Render Bone	—
#a4b494	#a4b494	RGB(164, 180, 148)	Component Olive	—
#ff595e	#ff595e	RGB(255, 89, 94)	Syntax Cherry	—
#ffde7d	#ffde7d	RGB(255, 222, 125)	Code Highlight	—

Color Palette Contrast

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

Text Color	Background Color	Contrast Ratio
#dcdcdc	#f1f1f1	1.21
#dcdcdc	#a4b494	1.6
#dcdcdc	#ffde7d	1.04
#f1f1f1	#a4b494	1.94
#f1f1f1	#ffde7d	1.16
#a4b494	#ff595e	1.39

Image palette Frontend Compiler Visual Kit png

--color-build-dust:	#dcdcdc;
--color-function-slate:	#3c3f41;
--color-render-bone:	#f1f1f1;
--color-component-olive:	#a4b494;
--color-syntax-cherry:	#ff595e;
--color-code-highlight:	#ffde7d;

$color-build-dust:	#dcdcdc;
$color-function-slate:	#3c3f41;
$color-render-bone:	#f1f1f1;
$color-component-olive:	#a4b494;
$color-syntax-cherry:	#ff595e;
$color-code-highlight:	#ffde7d;

@color-build-dust:	#dcdcdc;
@color-function-slate:	#3c3f41;
@color-render-bone:	#f1f1f1;
@color-component-olive:	#a4b494;
@color-syntax-cherry:	#ff595e;
@color-code-highlight:	#ffde7d;

Frontend Compiler Visual Kit

Colors codes in palette

Color Palette Contrast

Image palette Frontend Compiler Visual Kit png

Related color palettes

Suede Leather, Honey Mustard, Sapphire Siren, Rubylicious, Into the Night, Fruit Yard, Mocha Brown, Tierra Del Fuego Sea Green, Qu

Ocean Surf, Blue Antarctic, Kirby, Rich Reward, Ground Ginger palette

Akira Red, Sandal, Lichen Moss, Light Birch Green, Garden Bower, Cormorant, True Blue, Peruvian Soil, Deep Emerald, Simply Sage, E

Natural, Tirol, Gladiola Violet, Greek Aubergine, After the Storm, Grape Arbor, Below Zero, Mango Ice, Canyon Echo, Messinesi pale

Lifeguard, Virtual Taupe, I&#39;m a Local, Pepperoncini, Potato Chip, Marker Green, Harlequin, Buccaneer Blue, Jimbaran Bay, Hormagaun

Flaming Torch, Ochre Spice, Dark Cobalt Blue, Zany Pink, Red Berry, Naturalist Grey, Grey Flannel, Brik Dough, Shortcake, Light Ca

Lifeguard, Virtual Taupe, I'm a Local, Pepperoncini, Potato Chip, Marker Green, Harlequin, Buccaneer Blue, Jimbaran Bay, Hormagaun