Figma Prototype Link Grid

UX Chrome
#d1d5db
Design Amber
#ffbf69
Sticky Note Green
#b7f6b8
Layer Shadow
#7a7a7a
Frame Sky
#d1ecff
Dark Mode Night
#0f0f0f

Paleta składa się z kolorów Światło, Ciemny. Kolory akcentujące Design Amber #ffbf69 i Frame Sky #d1ecff. Paleta ma temperaturę kolorów Zimny, Ciepły, Neutralny.

Według jasności paleta rozciąga się od #0F0F0F (najciemniejszy) do #D1ECFF (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): #0F0F0F, #7A7A7A, #B7F6B8, #D1D5DB, #D1ECFF, #FFBF69

Paleta Figma Prototype Link Grid zawiera kombinację kolorów kodów 6:

KLĄTWA: #d1d5db, RGB: (209, 213, 219); KLĄTWA: #ffbf69, RGB: (255, 191, 105); KLĄTWA: #b7f6b8, RGB: (183, 246, 184)

KLĄTWA: #7a7a7a, RGB: (122, 122, 122); KLĄTWA: #d1ecff, RGB: (209, 236, 255); KLĄTWA: #0f0f0f, RGB: (15, 15, 15)

Uproszczona wersja palety kolorów

Cień lightgrey, Cień Pomarańczowy, Cień lightgreen, Odcień Szary, Odcień aliceblue, Cień Czarny

Schemat kolorów został stworzony przez raccoon

Więcej palet z:

Kody kolorów w palecie

Figma Prototype Link Grid kody kolorów HEX, informacje RGB w tabeli

Kolor	KLĄTWA	RGB	Nazwa	alternatywne imie
#d1d5db	#d1d5db	RGB(209, 213, 219)	UX Chrome	—
#ffbf69	#ffbf69	RGB(255, 191, 105)	Design Amber	—
#b7f6b8	#b7f6b8	RGB(183, 246, 184)	Sticky Note Green	—
#7a7a7a	#7a7a7a	RGB(122, 122, 122)	Layer Shadow	Gray48
#d1ecff	#d1ecff	RGB(209, 236, 255)	Frame Sky	—
#0f0f0f	#0f0f0f	RGB(15, 15, 15)	Dark Mode Night	Chaos Black

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
#d1d5db	#ffbf69	1.1
#d1d5db	#b7f6b8	1.18
#d1d5db	#d1ecff	1.2
#ffbf69	#b7f6b8	1.3
#ffbf69	#d1ecff	1.32
#b7f6b8	#d1ecff	1.01

Paleta obrazów Figma Prototype Link Grid png

--color-ux-chrome:	#d1d5db;
--color-design-amber:	#ffbf69;
--color-sticky-note-green:	#b7f6b8;
--color-layer-shadow:	#7a7a7a;
--color-frame-sky:	#d1ecff;
--color-dark-mode-night:	#0f0f0f;

$color-ux-chrome:	#d1d5db;
$color-design-amber:	#ffbf69;
$color-sticky-note-green:	#b7f6b8;
$color-layer-shadow:	#7a7a7a;
$color-frame-sky:	#d1ecff;
$color-dark-mode-night:	#0f0f0f;

@color-ux-chrome:	#d1d5db;
@color-design-amber:	#ffbf69;
@color-sticky-note-green:	#b7f6b8;
@color-layer-shadow:	#7a7a7a;
@color-frame-sky:	#d1ecff;
@color-dark-mode-night:	#0f0f0f;