Clean UI Startup Suite

Hero White
#ffffff
CTA Navy
#1b1f3b
Secondary Blush
#ffdada
Card Border
#e5e5e5
Progress Teal
#00c6ae
Header Shadow
#c7c7c7

Paleta składa się z kolorów Światło, Ciemny. Kolory akcentujące Secondary Blush #ffdada i Progress Teal #00c6ae. Paleta ma temperaturę kolorów Neutralny, Zimny.

Według jasności paleta rozciąga się od #1B1F3B (najciemniejszy) do #FFFFFF (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).

Większość próbek odczytuje się jako neutralne w temperaturze.

Kody HEX (posortowane): #00C6AE, #1B1F3B, #C7C7C7, #E5E5E5, #FFDADA, #FFFFFF

Paleta Clean UI Startup Suite zawiera kombinację kolorów kodów 6:

KLĄTWA: #ffffff, RGB: (255, 255, 255); KLĄTWA: #1b1f3b, RGB: (27, 31, 59); KLĄTWA: #ffdada, RGB: (255, 218, 218)

KLĄTWA: #e5e5e5, RGB: (229, 229, 229); KLĄTWA: #00c6ae, RGB: (0, 198, 174); KLĄTWA: #c7c7c7, RGB: (199, 199, 199)

Uproszczona wersja palety kolorów

Biały, Odcień midnightblue, Odcień mistyrose, Cień gainsboro, Odcień mediumaquamarine, Cień Srebro

Schemat kolorów został stworzony przez colorscheme

Więcej palet z:

Kody kolorów w palecie

Clean UI Startup Suite kody kolorów HEX, informacje RGB w tabeli

Kolor	KLĄTWA	RGB	Nazwa	alternatywne imie
#ffffff	#ffffff	RGB(255, 255, 255)	Hero White	White
#1b1f3b	#1b1f3b	RGB(27, 31, 59)	CTA Navy	—
#ffdada	#ffdada	RGB(255, 218, 218)	Secondary Blush	—
#e5e5e5	#e5e5e5	RGB(229, 229, 229)	Card Border	Gray90
#00c6ae	#00c6ae	RGB(0, 198, 174)	Progress Teal	—
#c7c7c7	#c7c7c7	RGB(199, 199, 199)	Header Shadow	Gray78

Kontrast palety kolorów

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

Kolor tekstu	Kolor tła	Współczynnik kontrastu
#ffffff	#ffdada	1.28
#ffffff	#e5e5e5	1.25
#ffffff	#c7c7c7	1.69
#ffdada	#e5e5e5	1.02
#ffdada	#00c6ae	1.68
#ffdada	#c7c7c7	1.31

Paleta obrazów Clean UI Startup Suite png

--color-hero-white:	#ffffff;
--color-cta-navy:	#1b1f3b;
--color-secondary-blush:	#ffdada;
--color-card-border:	#e5e5e5;
--color-progress-teal:	#00c6ae;
--color-header-shadow:	#c7c7c7;

$color-hero-white:	#ffffff;
$color-cta-navy:	#1b1f3b;
$color-secondary-blush:	#ffdada;
$color-card-border:	#e5e5e5;
$color-progress-teal:	#00c6ae;
$color-header-shadow:	#c7c7c7;

@color-hero-white:	#ffffff;
@color-cta-navy:	#1b1f3b;
@color-secondary-blush:	#ffdada;
@color-card-border:	#e5e5e5;
@color-progress-teal:	#00c6ae;
@color-header-shadow:	#c7c7c7;