Web Components Shadow DOM Set

Slot Mauve
#cdb4db
Encapsulation Navy
#03045e
Template Blush
#fad2e1
Attribute Grey
#dee2e6
Custom Tag Blue
#00b4d8
Host White
#f8f9fa

Paleta składa się z kolorów Światło, Ciemny. Kolory akcentujące Template Blush #fad2e1 i Custom Tag Blue #00b4d8. Paleta ma temperaturę kolorów Zimny, Neutralny.

Według jasności paleta rozciąga się od #03045E (najciemniejszy) do #F8F9FA (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): #00B4D8, #03045E, #CDB4DB, #DEE2E6, #F8F9FA, #FAD2E1

Paleta Web Components Shadow DOM Set zawiera kombinację kolorów kodów 6:

KLĄTWA: #cdb4db, RGB: (205, 180, 219); KLĄTWA: #03045e, RGB: (3, 4, 94); KLĄTWA: #fad2e1, RGB: (250, 210, 225)

KLĄTWA: #dee2e6, RGB: (222, 226, 230); KLĄTWA: #00b4d8, RGB: (0, 180, 216); KLĄTWA: #f8f9fa, RGB: (248, 249, 250)

Uproszczona wersja palety kolorów

Odcień thistle, Odcień Marynarka wojenna, Cień Różowy, Cień gainsboro, Odcień deepskyblue, Cień whitesmoke

Schemat kolorów został stworzony przez colorhunt

Więcej palet z:

Kody kolorów w palecie

Web Components Shadow DOM Set kody kolorów HEX, informacje RGB w tabeli

Kolor	KLĄTWA	RGB	Nazwa	alternatywne imie
#cdb4db	#cdb4db	RGB(205, 180, 219)	Slot Mauve	—
#03045e	#03045e	RGB(3, 4, 94)	Encapsulation Navy	—
#fad2e1	#fad2e1	RGB(250, 210, 225)	Template Blush	—
#dee2e6	#dee2e6	RGB(222, 226, 230)	Attribute Grey	—
#00b4d8	#00b4d8	RGB(0, 180, 216)	Custom Tag Blue	—
#f8f9fa	#f8f9fa	RGB(248, 249, 250)	Host White	—

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
#cdb4db	#fad2e1	1.37
#cdb4db	#dee2e6	1.44
#cdb4db	#00b4d8	1.3
#cdb4db	#f8f9fa	1.78
#fad2e1	#dee2e6	1.04
#fad2e1	#00b4d8	1.8

Paleta obrazów Web Components Shadow DOM Set png

--color-slot-mauve:	#cdb4db;
--color-encapsulation-navy:	#03045e;
--color-template-blush:	#fad2e1;
--color-attribute-grey:	#dee2e6;
--color-custom-tag-blue:	#00b4d8;
--color-host-white:	#f8f9fa;

$color-slot-mauve:	#cdb4db;
$color-encapsulation-navy:	#03045e;
$color-template-blush:	#fad2e1;
$color-attribute-grey:	#dee2e6;
$color-custom-tag-blue:	#00b4d8;
$color-host-white:	#f8f9fa;

@color-slot-mauve:	#cdb4db;
@color-encapsulation-navy:	#03045e;
@color-template-blush:	#fad2e1;
@color-attribute-grey:	#dee2e6;
@color-custom-tag-blue:	#00b4d8;
@color-host-white:	#f8f9fa;