Speedrun Timer UI

Start Line Green
#00ff00
Checkpoint Yellow
#fff200
Warning Orange
#ff6600
Finish Line Red
#ff0000
Background Black
#000000
Split Time Blue
#0099ff

Палітра містить світлий, темний кольори. Акцентні кольори Checkpoint Yellow #fff200 та Split Time Blue #0099ff. Палітра має температуру кольорів Холодний, Теплий, Нейтральний.

За світлістю палітра сягає від #000000 (найтемніший) до #00FF00 (найсвітліший). Діапазон світлості помірний.

Загалом насиченість здається яскравою (висока хрома).

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

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

HEX-коди (відсортовано): #000000, #0099FF, #00FF00, #FF0000, #FF6600, #FFF200

Палітра Speedrun Timer UI містить комбінацію з 6 кодів кольорів :

HEX: #00ff00, RGB: (0, 255, 0); HEX: #fff200, RGB: (255, 242, 0); HEX: #ff6600, RGB: (255, 102, 0)

HEX: #ff0000, RGB: (255, 0, 0); HEX: #000000, RGB: (0, 0, 0); HEX: #0099ff, RGB: (0, 153, 255)

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

Лайм, Відтінок Жовтий, Відтінок orangered, Червоний, Чорний, Відтінок dodgerblue

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

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

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

Speedrun Timer UI коди кольорів HEX, RGB інформація у таблиці

Колір	HEX	RGB	Назва	Альтернативна назва
#00ff00	#00ff00	RGB(0, 255, 0)	Start Line Green	Green
#fff200	#fff200	RGB(255, 242, 0)	Checkpoint Yellow	Dorn Yellow
#ff6600	#ff6600	RGB(255, 102, 0)	Warning Orange	Safety Orange
#ff0000	#ff0000	RGB(255, 0, 0)	Finish Line Red	Red
#000000	#000000	RGB(0, 0, 0)	Background Black	Black
#0099ff	#0099ff	RGB(0, 153, 255)	Split Time Blue	Sky of Magritte

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

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

Колір тексту	Колір фону	Коефіцієнт контрастності
#00ff00	#fff200	1.17
#ff6600	#ff0000	1.36
#ff6600	#0099ff	1.02
#ff0000	#0099ff	1.33

Зображення палітри Speedrun Timer UI png

--color-start-line-green:	#00ff00;
--color-checkpoint-yellow:	#fff200;
--color-warning-orange:	#ff6600;
--color-finish-line-red:	#ff0000;
--color-background-black:	#000000;
--color-split-time-blue:	#0099ff;

$color-start-line-green:	#00ff00;
$color-checkpoint-yellow:	#fff200;
$color-warning-orange:	#ff6600;
$color-finish-line-red:	#ff0000;
$color-background-black:	#000000;
$color-split-time-blue:	#0099ff;

@color-start-line-green:	#00ff00;
@color-checkpoint-yellow:	#fff200;
@color-warning-orange:	#ff6600;
@color-finish-line-red:	#ff0000;
@color-background-black:	#000000;
@color-split-time-blue:	#0099ff;