Mobile Adaptive Grid Theme

Screen Resize Yellow
#fff275
Tap Grey
#e0e0e0
Gesture Coral
#ff6b6b
Background Sky White
#f8fafc
Breakpoints Blue
#61a5c2
Container Navy
#2b2d42

Палитра содержит светлый, темный цвета. Акцентные цвета Screen Resize Yellow #fff275 да Breakpoints Blue #61a5c2. Палитра имеет цветовую температуру Теплый, Нейтральный, Холодный.

По светлоте палитра тянется от #2B2D42 (самый тёмный) до #F8FAFC (самый светлый). Диапазон светлоты широкий.

Насыщенность смешанная — есть приглушённые цвета и более яркие акценты.

Некоторые пары оттенков близки к комплементарным позициям — возможно чтение как комплементарный контраст (эвристика).

Тёплые и холодные элементы довольно сбалансированы.

HEX-коды (по возрастанию): #2B2D42, #61A5C2, #E0E0E0, #F8FAFC, #FF6B6B, #FFF275

Палитра Mobile Adaptive Grid Theme содержит комбинацию из 6 кодов цветов:

HEX: #fff275, RGB: (255, 242, 117); HEX: #e0e0e0, RGB: (224, 224, 224); HEX: #ff6b6b, RGB: (255, 107, 107)

HEX: #f8fafc, RGB: (248, 250, 252); HEX: #61a5c2, RGB: (97, 165, 194); HEX: #2b2d42, RGB: (43, 45, 66)

Упрощенная версия цветов палитры

Тень хаки, Тень gainsboro, Оттенок salmon, Тень whitesmoke, Тень deepskyblue, Тень midnightblue

Цветовая схема создана автором bad_colors

Больше палитр с:

Коды цветов в палитре

Mobile Adaptive Grid Theme коды цветов HEX, RGB информация в таблице

Цвет	HEX	RGB	Название	Альтернативное название
#fff275	#fff275	RGB(255, 242, 117)	Screen Resize Yellow	—
#e0e0e0	#e0e0e0	RGB(224, 224, 224)	Tap Grey	Gray88
#ff6b6b	#ff6b6b	RGB(255, 107, 107)	Gesture Coral	—
#f8fafc	#f8fafc	RGB(248, 250, 252)	Background Sky White	—
#61a5c2	#61a5c2	RGB(97, 165, 194)	Breakpoints Blue	—
#2b2d42	#2b2d42	RGB(43, 45, 66)	Container Navy	—

Контраст палитры цветов

4 цветовых пары имеют низкий контраст и требуют улучшения, что может повлиять на читаемость.

Цвет текста	Цвет фона	Коэффициент контрастности
#fff275	#e0e0e0	1.14
#fff275	#f8fafc	1.1
#e0e0e0	#f8fafc	1.26
#ff6b6b	#61a5c2	1.01

Изображение палитры Mobile Adaptive Grid Theme png

--color-screen-resize-yellow:	#fff275;
--color-tap-grey:	#e0e0e0;
--color-gesture-coral:	#ff6b6b;
--color-background-sky-white:	#f8fafc;
--color-breakpoints-blue:	#61a5c2;
--color-container-navy:	#2b2d42;

$color-screen-resize-yellow:	#fff275;
$color-tap-grey:	#e0e0e0;
$color-gesture-coral:	#ff6b6b;
$color-background-sky-white:	#f8fafc;
$color-breakpoints-blue:	#61a5c2;
$color-container-navy:	#2b2d42;

@color-screen-resize-yellow:	#fff275;
@color-tap-grey:	#e0e0e0;
@color-gesture-coral:	#ff6b6b;
@color-background-sky-white:	#f8fafc;
@color-breakpoints-blue:	#61a5c2;
@color-container-navy:	#2b2d42;