Modular SaaS UI Mesh Pattern

Section Lilac
#dcc6f6
Container Cream
#fffaf1
Token Blue
#85c1e9
Border Gray
#dbdbdb
Element Navy
#283149
Override Mint
#e0f9f1

Палитра содержит светлый, темный цвета. Акцентные цвета Section Lilac #dcc6f6 да Container Cream #fffaf1. Палитра имеет цветовую температуру Холодный, Нейтральный.

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

В целом насыщенность выглядит яркой (высокая хрома).

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

В целом температура смещена в сторону холодного.

HEX-коды (по возрастанию): #283149, #85C1E9, #DBDBDB, #DCC6F6, #E0F9F1, #FFFAF1

Палитра Modular SaaS UI Mesh Pattern содержит комбинацию из 6 кодов цветов:

HEX: #dcc6f6, RGB: (220, 198, 246); HEX: #fffaf1, RGB: (255, 250, 241); HEX: #85c1e9, RGB: (133, 193, 233)

HEX: #dbdbdb, RGB: (219, 219, 219); HEX: #283149, RGB: (40, 49, 73); HEX: #e0f9f1, RGB: (224, 249, 241)

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

Тень thistle, Тень floralwhite, Оттенок lightskyblue, Оттенок gainsboro, Тень midnightblue, Оттенок lightcyan

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

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

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

Modular SaaS UI Mesh Pattern коды цветов HEX, RGB информация в таблице

Цвет	HEX	RGB	Название	Альтернативное название
#dcc6f6	#dcc6f6	RGB(220, 198, 246)	Section Lilac	—
#fffaf1	#fffaf1	RGB(255, 250, 241)	Container Cream	—
#85c1e9	#85c1e9	RGB(133, 193, 233)	Token Blue	—
#dbdbdb	#dbdbdb	RGB(219, 219, 219)	Border Gray	Gray86
#283149	#283149	RGB(40, 49, 73)	Element Navy	—
#e0f9f1	#e0f9f1	RGB(224, 249, 241)	Override Mint	—

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

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

Цвет текста	Цвет фона	Коэффициент контрастности
#dcc6f6	#fffaf1	1.5
#dcc6f6	#85c1e9	1.24
#dcc6f6	#dbdbdb	1.12
#dcc6f6	#e0f9f1	1.41
#fffaf1	#85c1e9	1.86
#fffaf1	#dbdbdb	1.33

Изображение палитры Modular SaaS UI Mesh Pattern png

--color-section-lilac:	#dcc6f6;
--color-container-cream:	#fffaf1;
--color-token-blue:	#85c1e9;
--color-border-gray:	#dbdbdb;
--color-element-navy:	#283149;
--color-override-mint:	#e0f9f1;

$color-section-lilac:	#dcc6f6;
$color-container-cream:	#fffaf1;
$color-token-blue:	#85c1e9;
$color-border-gray:	#dbdbdb;
$color-element-navy:	#283149;
$color-override-mint:	#e0f9f1;

@color-section-lilac:	#dcc6f6;
@color-container-cream:	#fffaf1;
@color-token-blue:	#85c1e9;
@color-border-gray:	#dbdbdb;
@color-element-navy:	#283149;
@color-override-mint:	#e0f9f1;