Synthwave UX Overlay

Cyber Magenta
#ff3f81
Deep Grid Blue
#2c3e50
UI Pink
#ff6f91
Cursor Neon
#29e7cd
Text Off-White
#f8f8f8
HUD Gray
#515a6e

Палітра містить світлий, напівтемний кольори. Акцентні кольори UI Pink #ff6f91 та Cursor Neon #29e7cd. Палітра має температуру кольорів Теплий, Холодний, Нейтральний.

За світлістю палітра сягає від #2C3E50 (найтемніший) до #F8F8F8 (найсвітліший). Діапазон світлості широкий.

Насиченість змішана — є приглушені й більш яскраві акценти.

Деякі пари відтінків близькі до комплементарних позицій — можливе читання як комплементарний контраст (евристика).

Загалом температура зміщена в бік холодного.

HEX-коди (відсортовано): #29E7CD, #2C3E50, #515A6E, #F8F8F8, #FF3F81, #FF6F91

Палітра Synthwave UX Overlay містить комбінацію з 6 кодів кольорів :

HEX: #ff3f81, RGB: (255, 63, 129); HEX: #2c3e50, RGB: (44, 62, 80); HEX: #ff6f91, RGB: (255, 111, 145)

HEX: #29e7cd, RGB: (41, 231, 205); HEX: #f8f8f8, RGB: (248, 248, 248); HEX: #515a6e, RGB: (81, 90, 110)

Спрощений варіант палітри кольорів

Відтінок deeppink, Відтінок darkslateblue, Відтінок palevioletred, Відтінок turquoise, Відтінок whitesmoke, Відтінок dimgrey

Кольорова схема створена автором coolor

Більше палітр з:

Коди кольорів у палітрі

Synthwave UX Overlay коди кольорів HEX, RGB інформація у таблиці

Колір	HEX	RGB	Назва	Альтернативна назва
#ff3f81	#ff3f81	RGB(255, 63, 129)	Cyber Magenta	—
#2c3e50	#2c3e50	RGB(44, 62, 80)	Deep Grid Blue	—
#ff6f91	#ff6f91	RGB(255, 111, 145)	UI Pink	—
#29e7cd	#29e7cd	RGB(41, 231, 205)	Cursor Neon	—
#f8f8f8	#f8f8f8	RGB(248, 248, 248)	Text Off-White	—
#515a6e	#515a6e	RGB(81, 90, 110)	HUD Gray	—

Контраст палітри кольорів

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

Колір тексту	Колір фону	Коефіцієнт контрастності
#ff3f81	#ff6f91	1.26
#2c3e50	#515a6e	1.58
#ff6f91	#29e7cd	1.68
#29e7cd	#f8f8f8	1.47

Зображення палітри Synthwave UX Overlay png

--color-cyber-magenta:	#ff3f81;
--color-deep-grid-blue:	#2c3e50;
--color-ui-pink:	#ff6f91;
--color-cursor-neon:	#29e7cd;
--color-text-off-white:	#f8f8f8;
--color-hud-gray:	#515a6e;

$color-cyber-magenta:	#ff3f81;
$color-deep-grid-blue:	#2c3e50;
$color-ui-pink:	#ff6f91;
$color-cursor-neon:	#29e7cd;
$color-text-off-white:	#f8f8f8;
$color-hud-gray:	#515a6e;

@color-cyber-magenta:	#ff3f81;
@color-deep-grid-blue:	#2c3e50;
@color-ui-pink:	#ff6f91;
@color-cursor-neon:	#29e7cd;
@color-text-off-white:	#f8f8f8;
@color-hud-gray:	#515a6e;