SaaS Dashboard Design Tokens

Metric Teal
#00bfa6
KPI Ivory
#fdfdfd
Chart Coral
#ff6b6b
Insight Smoke
#d3d3d3
Data Violet
#7f00ff
Sidebar Ink
#2e2e2e

Палитра содержит светлый, темный цвета. Акцентные цвета Metric Teal #00bfa6 да Chart Coral #ff6b6b. Палитра имеет цветовую температуру Холодный, Нейтральный, Теплый.

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

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

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

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

HEX-коды (по возрастанию): #00BFA6, #2E2E2E, #7F00FF, #D3D3D3, #FDFDFD, #FF6B6B

Палитра SaaS Dashboard Design Tokens содержит комбинацию из 6 кодов цветов:

HEX: #00bfa6, RGB: (0, 191, 166); HEX: #fdfdfd, RGB: (253, 253, 253); HEX: #ff6b6b, RGB: (255, 107, 107)

HEX: #d3d3d3, RGB: (211, 211, 211); HEX: #7f00ff, RGB: (127, 0, 255); HEX: #2e2e2e, RGB: (46, 46, 46)

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

Оттенок lightseagreen, Оттенок Белый, Оттенок salmon, Оттенок blueviolet, Тень Черный

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

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

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

SaaS Dashboard Design Tokens коды цветов HEX, RGB информация в таблице

Цвет	HEX	RGB	Название	Альтернативное название
#00bfa6	#00bfa6	RGB(0, 191, 166)	Metric Teal	—
#fdfdfd	#fdfdfd	RGB(253, 253, 253)	KPI Ivory	Brilliance
#ff6b6b	#ff6b6b	RGB(255, 107, 107)	Chart Coral	—
#d3d3d3	#d3d3d3	RGB(211, 211, 211)	Insight Smoke	Pinball
#7f00ff	#7f00ff	RGB(127, 0, 255)	Data Violet	Violent Violet
#2e2e2e	#2e2e2e	RGB(46, 46, 46)	Sidebar Ink	Carbon Fiber

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

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

Цвет текста	Цвет фона	Коэффициент контрастности
#00bfa6	#ff6b6b	1.18
#00bfa6	#d3d3d3	1.55
#fdfdfd	#d3d3d3	1.47
#ff6b6b	#d3d3d3	1.85

Изображение палитры SaaS Dashboard Design Tokens png

--color-metric-teal:	#00bfa6;
--color-kpi-ivory:	#fdfdfd;
--color-chart-coral:	#ff6b6b;
--color-insight-smoke:	#d3d3d3;
--color-data-violet:	#7f00ff;
--color-sidebar-ink:	#2e2e2e;

$color-metric-teal:	#00bfa6;
$color-kpi-ivory:	#fdfdfd;
$color-chart-coral:	#ff6b6b;
$color-insight-smoke:	#d3d3d3;
$color-data-violet:	#7f00ff;
$color-sidebar-ink:	#2e2e2e;

@color-metric-teal:	#00bfa6;
@color-kpi-ivory:	#fdfdfd;
@color-chart-coral:	#ff6b6b;
@color-insight-smoke:	#d3d3d3;
@color-data-violet:	#7f00ff;
@color-sidebar-ink:	#2e2e2e;