Dark Mode UX System Flow

Carbon Overlay
#171717
Contrast Snow
#fafafa
Schema Gold
#fcd34d
Node Blue
#60a5fa
Outline Red
#f87171
Interaction Silver
#e4e4e7

Paleta składa się z kolorów Ciemny, Światło. Kolory akcentujące Schema Gold #fcd34d i Node Blue #60a5fa. Paleta ma temperaturę kolorów Neutralny, Ciepły, Zimny.

Według jasności paleta rozciąga się od #171717 (najciemniejszy) do #FAFAFA (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 ciepłu.

Kody HEX (posortowane): #171717, #60A5FA, #E4E4E7, #F87171, #FAFAFA, #FCD34D

Paleta Dark Mode UX System Flow zawiera kombinację kolorów kodów 6:

KLĄTWA: #171717, RGB: (23, 23, 23); KLĄTWA: #fafafa, RGB: (250, 250, 250); KLĄTWA: #fcd34d, RGB: (252, 211, 77)

KLĄTWA: #60a5fa, RGB: (96, 165, 250); KLĄTWA: #f87171, RGB: (248, 113, 113); KLĄTWA: #e4e4e7, RGB: (228, 228, 231)

Uproszczona wersja palety kolorów

Cień Czarny, Cień whitesmoke, Cień gold, Cień cornflowerblue, Odcień lightcoral, Cień gainsboro

Schemat kolorów został stworzony przez coolor

Więcej palet z:

Kody kolorów w palecie

Dark Mode UX System Flow kody kolorów HEX, informacje RGB w tabeli

Kolor	KLĄTWA	RGB	Nazwa	alternatywne imie
#171717	#171717	RGB(23, 23, 23)	Carbon Overlay	Cynical Black
#fafafa	#fafafa	RGB(250, 250, 250)	Contrast Snow	Dr. White
#fcd34d	#fcd34d	RGB(252, 211, 77)	Schema Gold	—
#60a5fa	#60a5fa	RGB(96, 165, 250)	Node Blue	—
#f87171	#f87171	RGB(248, 113, 113)	Outline Red	—
#e4e4e7	#e4e4e7	RGB(228, 228, 231)	Interaction Silver	Lilac Mist

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
#fafafa	#fcd34d	1.38
#fafafa	#e4e4e7	1.21
#fcd34d	#60a5fa	1.76
#fcd34d	#f87171	1.91
#fcd34d	#e4e4e7	1.13
#60a5fa	#f87171	1.08

Paleta obrazów Dark Mode UX System Flow png

--color-carbon-overlay:	#171717;
--color-contrast-snow:	#fafafa;
--color-schema-gold:	#fcd34d;
--color-node-blue:	#60a5fa;
--color-outline-red:	#f87171;
--color-interaction-silver:	#e4e4e7;

$color-carbon-overlay:	#171717;
$color-contrast-snow:	#fafafa;
$color-schema-gold:	#fcd34d;
$color-node-blue:	#60a5fa;
$color-outline-red:	#f87171;
$color-interaction-silver:	#e4e4e7;

@color-carbon-overlay:	#171717;
@color-contrast-snow:	#fafafa;
@color-schema-gold:	#fcd34d;
@color-node-blue:	#60a5fa;
@color-outline-red:	#f87171;
@color-interaction-silver:	#e4e4e7;