Serverless Web Component Grid

API Fog
#e8e8e8
Deploy Grey
#9ca3af
Cloud Black
#121212
Lambda Violet
#b5a7f5
Trigger Lime
#d2ff4c
Response White
#ffffff

Палитра содержит светлый, темный цвета. Акцентные цвета Lambda Violet #b5a7f5 да Trigger Lime #d2ff4c. Палитра имеет цветовую температуру Нейтральный, Холодный, Теплый.

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

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

Большинство цветов близки к нейтралям или очень слабо насыщены; связи между оттенками тонкие.

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

HEX-коды (по возрастанию): #121212, #9CA3AF, #B5A7F5, #D2FF4C, #E8E8E8, #FFFFFF

Палитра Serverless Web Component Grid содержит комбинацию из 6 кодов цветов:

HEX: #e8e8e8, RGB: (232, 232, 232); HEX: #9ca3af, RGB: (156, 163, 175); HEX: #121212, RGB: (18, 18, 18)

HEX: #b5a7f5, RGB: (181, 167, 245); HEX: #d2ff4c, RGB: (210, 255, 76); HEX: #ffffff, RGB: (255, 255, 255)

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

Тень gainsboro, Оттенок darkgrey, Тень Черный, Оттенок lightsteelblue, Тень greenyellow, Белый

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

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

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

Serverless Web Component Grid коды цветов HEX, RGB информация в таблице

Цвет	HEX	RGB	Название	Альтернативное название
#e8e8e8	#e8e8e8	RGB(232, 232, 232)	API Fog	Unicorn Silver
#9ca3af	#9ca3af	RGB(156, 163, 175)	Deploy Grey	—
#121212	#121212	RGB(18, 18, 18)	Cloud Black	Dark Tone Ink
#b5a7f5	#b5a7f5	RGB(181, 167, 245)	Lambda Violet	—
#d2ff4c	#d2ff4c	RGB(210, 255, 76)	Trigger Lime	—
#ffffff	#ffffff	RGB(255, 255, 255)	Response White	White

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

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

Цвет текста	Цвет фона	Коэффициент контрастности
#e8e8e8	#b5a7f5	1.74
#e8e8e8	#d2ff4c	1.05
#e8e8e8	#ffffff	1.22
#9ca3af	#b5a7f5	1.18
#b5a7f5	#d2ff4c	1.84
#d2ff4c	#ffffff	1.15

Изображение палитры Serverless Web Component Grid png

--color-api-fog:	#e8e8e8;
--color-deploy-grey:	#9ca3af;
--color-cloud-black:	#121212;
--color-lambda-violet:	#b5a7f5;
--color-trigger-lime:	#d2ff4c;
--color-response-white:	#ffffff;

$color-api-fog:	#e8e8e8;
$color-deploy-grey:	#9ca3af;
$color-cloud-black:	#121212;
$color-lambda-violet:	#b5a7f5;
$color-trigger-lime:	#d2ff4c;
$color-response-white:	#ffffff;

@color-api-fog:	#e8e8e8;
@color-deploy-grey:	#9ca3af;
@color-cloud-black:	#121212;
@color-lambda-violet:	#b5a7f5;
@color-trigger-lime:	#d2ff4c;
@color-response-white:	#ffffff;