Custom CSS Token Library

Var Emerald
#50c878
Token Dust
#e5e5e5
Reference Grape
#8a6eca
Default Slate
#6b7280
Background White
#ffffff
Fallback Graphite
#2a2a2a

The palette consists of Light, Dark colors. Accent colors Var Emerald #50c878 and Background White #ffffff. Palette has Cool, Neutral colors temperature.

By lightness, this palette runs from #2A2A2A (darkest) to #FFFFFF (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): #2A2A2A, #50C878, #6B7280, #8A6ECA, #E5E5E5, #FFFFFF

Palette Custom CSS Token Library has combination of 6 codes colors:

HEX: #50c878, RGB: (80, 200, 120); HEX: #e5e5e5, RGB: (229, 229, 229); HEX: #8a6eca, RGB: (138, 110, 202)

HEX: #6b7280, RGB: (107, 114, 128); HEX: #ffffff, RGB: (255, 255, 255); HEX: #2a2a2a, RGB: (42, 42, 42)

Simplified version of palette colors

Shade of mediumseagreen, Shade of gainsboro, Tint of mediumpurple, Tint of slategrey, White, Shade of Black

Color scheme was created by hex

More palettes with:

Colors codes in palette

Custom CSS Token Library color codes HEX, RGB information in table

Color	HEX	RGB	Name	Alternative name
#50c878	#50c878	RGB(80, 200, 120)	Var Emerald	Emerald Reflection
#e5e5e5	#e5e5e5	RGB(229, 229, 229)	Token Dust	Gray90
#8a6eca	#8a6eca	RGB(138, 110, 202)	Reference Grape	—
#6b7280	#6b7280	RGB(107, 114, 128)	Default Slate	—
#ffffff	#ffffff	RGB(255, 255, 255)	Background White	White
#2a2a2a	#2a2a2a	RGB(42, 42, 42)	Fallback Graphite	The End

Color Palette Contrast

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

Text Color	Background Color	Contrast Ratio
#50c878	#e5e5e5	1.68
#50c878	#8a6eca	1.91
#e5e5e5	#ffffff	1.25
#8a6eca	#6b7280	1.18

Image palette Custom CSS Token Library png

--color-var-emerald:	#50c878;
--color-token-dust:	#e5e5e5;
--color-reference-grape:	#8a6eca;
--color-default-slate:	#6b7280;
--color-background-white:	#ffffff;
--color-fallback-graphite:	#2a2a2a;

$color-var-emerald:	#50c878;
$color-token-dust:	#e5e5e5;
$color-reference-grape:	#8a6eca;
$color-default-slate:	#6b7280;
$color-background-white:	#ffffff;
$color-fallback-graphite:	#2a2a2a;

@color-var-emerald:	#50c878;
@color-token-dust:	#e5e5e5;
@color-reference-grape:	#8a6eca;
@color-default-slate:	#6b7280;
@color-background-white:	#ffffff;
@color-fallback-graphite:	#2a2a2a;