Responsive Layout Gridscape

Breakpoint Blue
#60a5fa
Gutter Light
#e5e7eb
Column Charcoal
#1e1e1e
Offset Lilac
#c3b1e1
Gridline Yellow
#fff685
Baseline Coral
#ff9b85

Paleta składa się z kolorów Światło, Ciemny. Kolory akcentujące Breakpoint Blue #60a5fa i Gridline Yellow #fff685. Paleta ma temperaturę kolorów Zimny, Neutralny, Ciepły.

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

Ciepłe i zimne próbki są dość zrównoważone.

Kody HEX (posortowane): #1E1E1E, #60A5FA, #C3B1E1, #E5E7EB, #FF9B85, #FFF685

Paleta Responsive Layout Gridscape zawiera kombinację kolorów kodów 6:

KLĄTWA: #60a5fa, RGB: (96, 165, 250); KLĄTWA: #e5e7eb, RGB: (229, 231, 235); KLĄTWA: #1e1e1e, RGB: (30, 30, 30)

KLĄTWA: #c3b1e1, RGB: (195, 177, 225); KLĄTWA: #fff685, RGB: (255, 246, 133); KLĄTWA: #ff9b85, RGB: (255, 155, 133)

Uproszczona wersja palety kolorów

Cień cornflowerblue, Cień gainsboro, Cień Czarny, Odcień thistle, Cień Khaki, Cień darksalmon

Schemat kolorów został stworzony przez raccoon

Więcej palet z:

Kody kolorów w palecie

Responsive Layout Gridscape kody kolorów HEX, informacje RGB w tabeli

Kolor	KLĄTWA	RGB	Nazwa	alternatywne imie
#60a5fa	#60a5fa	RGB(96, 165, 250)	Breakpoint Blue	—
#e5e7eb	#e5e7eb	RGB(229, 231, 235)	Gutter Light	—
#1e1e1e	#1e1e1e	RGB(30, 30, 30)	Column Charcoal	—
#c3b1e1	#c3b1e1	RGB(195, 177, 225)	Offset Lilac	—
#fff685	#fff685	RGB(255, 246, 133)	Gridline Yellow	—
#ff9b85	#ff9b85	RGB(255, 155, 133)	Baseline Coral	—

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
#60a5fa	#c3b1e1	1.29
#60a5fa	#ff9b85	1.24
#e5e7eb	#c3b1e1	1.58
#e5e7eb	#fff685	1.1
#e5e7eb	#ff9b85	1.65
#c3b1e1	#fff685	1.75

Paleta obrazów Responsive Layout Gridscape png

--color-breakpoint-blue:	#60a5fa;
--color-gutter-light:	#e5e7eb;
--color-column-charcoal:	#1e1e1e;
--color-offset-lilac:	#c3b1e1;
--color-gridline-yellow:	#fff685;
--color-baseline-coral:	#ff9b85;

$color-breakpoint-blue:	#60a5fa;
$color-gutter-light:	#e5e7eb;
$color-column-charcoal:	#1e1e1e;
$color-offset-lilac:	#c3b1e1;
$color-gridline-yellow:	#fff685;
$color-baseline-coral:	#ff9b85;

@color-breakpoint-blue:	#60a5fa;
@color-gutter-light:	#e5e7eb;
@color-column-charcoal:	#1e1e1e;
@color-offset-lilac:	#c3b1e1;
@color-gridline-yellow:	#fff685;
@color-baseline-coral:	#ff9b85;