Dynamic Web UI System

DOM Navy
#003049
Flex Mint
#7fdbb6
Event Blush
#ff6f61
Load White Smoke
#f6f6f6
Async Grey
#9fa5af
Viewport Orange
#ffa62b

Paleta składa się z kolorów Ciemny, Światło. Kolory akcentujące DOM Navy #003049 i Viewport Orange #ffa62b. Paleta ma temperaturę kolorów Zimny, Ciepły, Neutralny.

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

Nasycenie wydaje się żywe (wysoka chroma).

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): #003049, #7FDBB6, #9FA5AF, #F6F6F6, #FF6F61, #FFA62B

Paleta Dynamic Web UI System zawiera kombinację kolorów kodów 6:

KLĄTWA: #003049, RGB: (0, 48, 73); KLĄTWA: #7fdbb6, RGB: (127, 219, 182); KLĄTWA: #ff6f61, RGB: (255, 111, 97)

KLĄTWA: #f6f6f6, RGB: (246, 246, 246); KLĄTWA: #9fa5af, RGB: (159, 165, 175); KLĄTWA: #ffa62b, RGB: (255, 166, 43)

Uproszczona wersja palety kolorów

Cień midnightblue, Cień mediumaquamarine, Odcień salmon, Cień whitesmoke, Odcień darkgrey, Cień Pomarańczowy

Schemat kolorów został stworzony przez palettespicker

Więcej palet z:

Kody kolorów w palecie

Dynamic Web UI System kody kolorów HEX, informacje RGB w tabeli

Kolor	KLĄTWA	RGB	Nazwa	alternatywne imie
#003049	#003049	RGB(0, 48, 73)	DOM Navy	—
#7fdbb6	#7fdbb6	RGB(127, 219, 182)	Flex Mint	—
#ff6f61	#ff6f61	RGB(255, 111, 97)	Event Blush	Living Coral
#f6f6f6	#f6f6f6	RGB(246, 246, 246)	Load White Smoke	—
#9fa5af	#9fa5af	RGB(159, 165, 175)	Async Grey	—
#ffa62b	#ffa62b	RGB(255, 166, 43)	Viewport Orange	Mango

Kontrast palety kolorów

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

Kolor tekstu	Kolor tła	Współczynnik kontrastu
#7fdbb6	#ff6f61	1.65
#7fdbb6	#f6f6f6	1.52
#7fdbb6	#9fa5af	1.49
#7fdbb6	#ffa62b	1.18
#ff6f61	#9fa5af	1.1
#ff6f61	#ffa62b	1.39

Paleta obrazów Dynamic Web UI System png

--color-dom-navy:	#003049;
--color-flex-mint:	#7fdbb6;
--color-event-blush:	#ff6f61;
--color-load-white-smoke:	#f6f6f6;
--color-async-grey:	#9fa5af;
--color-viewport-orange:	#ffa62b;

$color-dom-navy:	#003049;
$color-flex-mint:	#7fdbb6;
$color-event-blush:	#ff6f61;
$color-load-white-smoke:	#f6f6f6;
$color-async-grey:	#9fa5af;
$color-viewport-orange:	#ffa62b;

@color-dom-navy:	#003049;
@color-flex-mint:	#7fdbb6;
@color-event-blush:	#ff6f61;
@color-load-white-smoke:	#f6f6f6;
@color-async-grey:	#9fa5af;
@color-viewport-orange:	#ffa62b;