React Component Hyperlink Kit

Framework Indigo
#3f51b5
Hook Coral
#ff6f61
JS Sand
#ffcc80
Virtual DOM Mint
#a5d6a7
Node Grey
#cfd8dc
Interactive White
#fafafa
Console Black
#212121

The palette consists of Semi dark, Light, Dark colors. Accent colors Framework Indigo #3f51b5 and JS Sand #ffcc80. Palette has Cool, Warm, Neutral colors temperature.

By lightness, this palette runs from #212121 (darkest) to #FAFAFA (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): #212121, #3F51B5, #A5D6A7, #CFD8DC, #FAFAFA, #FF6F61, #FFCC80

Palette React Component Hyperlink Kit has combination of 7 codes colors:

HEX: #3f51b5, RGB: (63, 81, 181); HEX: #ff6f61, RGB: (255, 111, 97); HEX: #ffcc80, RGB: (255, 204, 128)

HEX: #a5d6a7, RGB: (165, 214, 167); HEX: #cfd8dc, RGB: (207, 216, 220); HEX: #fafafa, RGB: (250, 250, 250)

HEX: #212121, RGB: (33, 33, 33)

Simplified version of palette colors

Tint of slateblue, Tint of salmon, Tint of navajowhite, Shade of darkseagreen, Shade of lightgrey, Shade of whitesmoke, Shade of Black

Color scheme was created by palettespicker

More palettes with:

Colors codes in palette

React Component Hyperlink Kit color codes HEX, RGB information in table

Color	HEX	RGB	Name	Alternative name
#3f51b5	#3f51b5	RGB(63, 81, 181)	Framework Indigo	—
#ff6f61	#ff6f61	RGB(255, 111, 97)	Hook Coral	Living Coral
#ffcc80	#ffcc80	RGB(255, 204, 128)	JS Sand	—
#a5d6a7	#a5d6a7	RGB(165, 214, 167)	Virtual DOM Mint	—
#cfd8dc	#cfd8dc	RGB(207, 216, 220)	Node Grey	—
#fafafa	#fafafa	RGB(250, 250, 250)	Interactive White	Dr. White
#212121	#212121	RGB(33, 33, 33)	Console Black	Lead

Color Palette Contrast

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

Text Color	Background Color	Contrast Ratio
#ff6f61	#ffcc80	1.84
#ff6f61	#a5d6a7	1.65
#ff6f61	#cfd8dc	1.88
#ffcc80	#a5d6a7	1.11
#ffcc80	#cfd8dc	1.02
#ffcc80	#fafafa	1.41

Image palette React Component Hyperlink Kit png

--color-framework-indigo:	#3f51b5;
--color-hook-coral:	#ff6f61;
--color-js-sand:	#ffcc80;
--color-virtual-dom-mint:	#a5d6a7;
--color-node-grey:	#cfd8dc;
--color-interactive-white:	#fafafa;
--color-console-black:	#212121;

$color-framework-indigo:	#3f51b5;
$color-hook-coral:	#ff6f61;
$color-js-sand:	#ffcc80;
$color-virtual-dom-mint:	#a5d6a7;
$color-node-grey:	#cfd8dc;
$color-interactive-white:	#fafafa;
$color-console-black:	#212121;

@color-framework-indigo:	#3f51b5;
@color-hook-coral:	#ff6f61;
@color-js-sand:	#ffcc80;
@color-virtual-dom-mint:	#a5d6a7;
@color-node-grey:	#cfd8dc;
@color-interactive-white:	#fafafa;
@color-console-black:	#212121;