UX-Optimized UI Kit for React

Component Cream
#f5f5f5
Focus Indigo
#3d348b
CTA Red
#e63946
Background Sand
#fff8e1
Text Gray
#4a4a4a
Surface Green
#a8dadc

Paleta składa się z kolorów Światło, Półciemny. Kolory akcentujące Focus Indigo #3d348b i Background Sand #fff8e1. Paleta ma temperaturę kolorów Neutralny, Zimny, Ciepły.

Według jasności paleta rozciąga się od #4A4A4A (najciemniejszy) do #F5F5F5 (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): #3D348B, #4A4A4A, #A8DADC, #E63946, #F5F5F5, #FFF8E1

Paleta UX-Optimized UI Kit for React zawiera kombinację kolorów kodów 6:

KLĄTWA: #f5f5f5, RGB: (245, 245, 245); KLĄTWA: #3d348b, RGB: (61, 52, 139); KLĄTWA: #e63946, RGB: (230, 57, 70)

KLĄTWA: #fff8e1, RGB: (255, 248, 225); KLĄTWA: #4a4a4a, RGB: (74, 74, 74); KLĄTWA: #a8dadc, RGB: (168, 218, 220)

Uproszczona wersja palety kolorów

Odcień darkslateblue, Cień crimson, Cień cornsilk, Odcień dimgrey, Odcień powderblue

Schemat kolorów został stworzony przez hex

Więcej palet z:

Kody kolorów w palecie

UX-Optimized UI Kit for React kody kolorów HEX, informacje RGB w tabeli

Kolor	KLĄTWA	RGB	Nazwa	alternatywne imie
#f5f5f5	#f5f5f5	RGB(245, 245, 245)	Component Cream	White Smoke
#3d348b	#3d348b	RGB(61, 52, 139)	Focus Indigo	—
#e63946	#e63946	RGB(230, 57, 70)	CTA Red	—
#fff8e1	#fff8e1	RGB(255, 248, 225)	Background Sand	Still Morning
#4a4a4a	#4a4a4a	RGB(74, 74, 74)	Text Gray	Gray29
#a8dadc	#a8dadc	RGB(168, 218, 220)	Surface Green	—

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
#f5f5f5	#fff8e1	1.02
#f5f5f5	#a8dadc	1.4
#3d348b	#4a4a4a	1.14
#fff8e1	#a8dadc	1.43

Paleta obrazów UX-Optimized UI Kit for React png

--color-component-cream:	#f5f5f5;
--color-focus-indigo:	#3d348b;
--color-cta-red:	#e63946;
--color-background-sand:	#fff8e1;
--color-text-gray:	#4a4a4a;
--color-surface-green:	#a8dadc;

$color-component-cream:	#f5f5f5;
$color-focus-indigo:	#3d348b;
$color-cta-red:	#e63946;
$color-background-sand:	#fff8e1;
$color-text-gray:	#4a4a4a;
$color-surface-green:	#a8dadc;

@color-component-cream:	#f5f5f5;
@color-focus-indigo:	#3d348b;
@color-cta-red:	#e63946;
@color-background-sand:	#fff8e1;
@color-text-gray:	#4a4a4a;
@color-surface-green:	#a8dadc;