Cross-Platform UI Reactivity

Sync Plum
#8a5cf6
Transition Mint
#bffcc6
Adaptive Coral
#ff9472
Compile Grey
#b0b6ba
Scale Snow
#f8fafc
Hover Ink
#1b1b1b

Paleta składa się z kolorów Światło, Ciemny. Kolory akcentujące Adaptive Coral #ff9472 i Scale Snow #f8fafc. Paleta ma temperaturę kolorów Zimny, Neutralny, Ciepły.

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

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

Barwy są rozłożone szeroko po kole — paleta zróżnicowana (heurystyka).

Ogólna temperatura barw przechyla się ku zimnu.

Kody HEX (posortowane): #1B1B1B, #8A5CF6, #B0B6BA, #BFFCC6, #F8FAFC, #FF9472

Paleta Cross-Platform UI Reactivity zawiera kombinację kolorów kodów 6:

KLĄTWA: #8a5cf6, RGB: (138, 92, 246); KLĄTWA: #bffcc6, RGB: (191, 252, 198); KLĄTWA: #ff9472, RGB: (255, 148, 114)

KLĄTWA: #b0b6ba, RGB: (176, 182, 186); KLĄTWA: #f8fafc, RGB: (248, 250, 252); KLĄTWA: #1b1b1b, RGB: (27, 27, 27)

Uproszczona wersja palety kolorów

Odcień mediumslateblue, Cień palegreen, Odcień lightsalmon, Odcień Srebro, Cień whitesmoke, Cień Czarny

Schemat kolorów został stworzony przez palettespicker

Więcej palet z:

Kody kolorów w palecie

Cross-Platform UI Reactivity kody kolorów HEX, informacje RGB w tabeli

Kolor	KLĄTWA	RGB	Nazwa	alternatywne imie
#8a5cf6	#8a5cf6	RGB(138, 92, 246)	Sync Plum	—
#bffcc6	#bffcc6	RGB(191, 252, 198)	Transition Mint	—
#ff9472	#ff9472	RGB(255, 148, 114)	Adaptive Coral	—
#b0b6ba	#b0b6ba	RGB(176, 182, 186)	Compile Grey	—
#f8fafc	#f8fafc	RGB(248, 250, 252)	Scale Snow	—
#1b1b1b	#1b1b1b	RGB(27, 27, 27)	Hover Ink	Eerie Black

Kontrast palety kolorów

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

Kolor tekstu	Kolor tła	Współczynnik kontrastu
#8a5cf6	#ff9472	1.96
#bffcc6	#ff9472	1.84
#bffcc6	#b0b6ba	1.75
#bffcc6	#f8fafc	1.11
#ff9472	#b0b6ba	1.05
#b0b6ba	#f8fafc	1.95

Paleta obrazów Cross-Platform UI Reactivity png

--color-sync-plum:	#8a5cf6;
--color-transition-mint:	#bffcc6;
--color-adaptive-coral:	#ff9472;
--color-compile-grey:	#b0b6ba;
--color-scale-snow:	#f8fafc;
--color-hover-ink:	#1b1b1b;

$color-sync-plum:	#8a5cf6;
$color-transition-mint:	#bffcc6;
$color-adaptive-coral:	#ff9472;
$color-compile-grey:	#b0b6ba;
$color-scale-snow:	#f8fafc;
$color-hover-ink:	#1b1b1b;

@color-sync-plum:	#8a5cf6;
@color-transition-mint:	#bffcc6;
@color-adaptive-coral:	#ff9472;
@color-compile-grey:	#b0b6ba;
@color-scale-snow:	#f8fafc;
@color-hover-ink:	#1b1b1b;