Microfrontend Integration Palette

Shell White
#f8f8f8
Remote Yellow
#fff176
Fragment Sky
#a2d2ff
Isolation Grey
#9fa0a2
Lifecycle Indigo
#6a5acd
Build Black
#1e1e1e

Paleta składa się z kolorów Światło, Ciemny. Kolory akcentujące Remote Yellow #fff176 i Fragment Sky #a2d2ff. Paleta ma temperaturę kolorów Neutralny, Ciepły, Zimny.

Według jasności paleta rozciąga się od #1E1E1E (najciemniejszy) do #F8F8F8 (najjaśniejszy). Zakres jasności jest szeroki.

Nasycenie jest mieszane — część próbek stonowana, część żywsza.

Niektóre pary barw są blisko pozycji dopełniających — można to odczytać jako kontrast dopełniający (heurystyka).

Ogólna temperatura barw przechyla się ku zimnu.

Kody HEX (posortowane): #1E1E1E, #6A5ACD, #9FA0A2, #A2D2FF, #F8F8F8, #FFF176

Paleta Microfrontend Integration Palette zawiera kombinację kolorów kodów 6:

KLĄTWA: #f8f8f8, RGB: (248, 248, 248); KLĄTWA: #fff176, RGB: (255, 241, 118); KLĄTWA: #a2d2ff, RGB: (162, 210, 255)

KLĄTWA: #9fa0a2, RGB: (159, 160, 162); KLĄTWA: #6a5acd, RGB: (106, 90, 205); KLĄTWA: #1e1e1e, RGB: (30, 30, 30)

Uproszczona wersja palety kolorów

Cień whitesmoke, Cień Khaki, Cień lightskyblue, Odcień darkgrey, Cień Czarny

Schemat kolorów został stworzony przez coolor

Więcej palet z:

Kody kolorów w palecie

Microfrontend Integration Palette kody kolorów HEX, informacje RGB w tabeli

Kolor	KLĄTWA	RGB	Nazwa	alternatywne imie
#f8f8f8	#f8f8f8	RGB(248, 248, 248)	Shell White	—
#fff176	#fff176	RGB(255, 241, 118)	Remote Yellow	—
#a2d2ff	#a2d2ff	RGB(162, 210, 255)	Fragment Sky	—
#9fa0a2	#9fa0a2	RGB(159, 160, 162)	Isolation Grey	—
#6a5acd	#6a5acd	RGB(106, 90, 205)	Lifecycle Indigo	Ameixa
#1e1e1e	#1e1e1e	RGB(30, 30, 30)	Build Black	—

Kontrast palety kolorów

4 pary kolorów mają niski kontrast i wymagają poprawy, co może wpłynąć na czytelność.

Kolor tekstu	Kolor tła	Współczynnik kontrastu
#f8f8f8	#fff176	1.09
#f8f8f8	#a2d2ff	1.49
#fff176	#a2d2ff	1.37
#a2d2ff	#9fa0a2	1.64

Paleta obrazów Microfrontend Integration Palette png

Microfrontend Integration Palette - #555329

--color-shell-white:	#f8f8f8;
--color-remote-yellow:	#fff176;
--color-fragment-sky:	#a2d2ff;
--color-isolation-grey:	#9fa0a2;
--color-lifecycle-indigo:	#6a5acd;
--color-build-black:	#1e1e1e;

$color-shell-white:	#f8f8f8;
$color-remote-yellow:	#fff176;
$color-fragment-sky:	#a2d2ff;
$color-isolation-grey:	#9fa0a2;
$color-lifecycle-indigo:	#6a5acd;
$color-build-black:	#1e1e1e;

@color-shell-white:	#f8f8f8;
@color-remote-yellow:	#fff176;
@color-fragment-sky:	#a2d2ff;
@color-isolation-grey:	#9fa0a2;
@color-lifecycle-indigo:	#6a5acd;
@color-build-black:	#1e1e1e;