Web Animation Framework Palette

Tween Plum
#9d75cb
Frame Lemon
#ffe066
Ease Aqua
#b8f2e6
Loop Gray
#dee2e6
Motion Pink
#ff9aa2
Anchor Black
#1f1f1f

Палітра містить світлий, темний кольори. Акцентні кольори Tween Plum #9d75cb та Frame Lemon #ffe066. Палітра має температуру кольорів Холодний, Теплий, Нейтральний.

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

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

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

Теплі й холодні зразки доволі збалансовані.

HEX-коди (відсортовано): #1F1F1F, #9D75CB, #B8F2E6, #DEE2E6, #FF9AA2, #FFE066

Палітра Web Animation Framework Palette містить комбінацію з 6 кодів кольорів :

HEX: #9d75cb, RGB: (157, 117, 203); HEX: #ffe066, RGB: (255, 224, 102); HEX: #b8f2e6, RGB: (184, 242, 230)

HEX: #dee2e6, RGB: (222, 226, 230); HEX: #ff9aa2, RGB: (255, 154, 162); HEX: #1f1f1f, RGB: (31, 31, 31)

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

Відтінок mediumpurple, Відтінок gold, Відтінок paleturquoise, Відтінок gainsboro, Відтінок lightpink, Відтінок Чорний

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

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

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

Web Animation Framework Palette коди кольорів HEX, RGB інформація у таблиці

Колір	HEX	RGB	Назва	Альтернативна назва
#9d75cb	#9d75cb	RGB(157, 117, 203)	Tween Plum	—
#ffe066	#ffe066	RGB(255, 224, 102)	Frame Lemon	—
#b8f2e6	#b8f2e6	RGB(184, 242, 230)	Ease Aqua	—
#dee2e6	#dee2e6	RGB(222, 226, 230)	Loop Gray	—
#ff9aa2	#ff9aa2	RGB(255, 154, 162)	Motion Pink	—
#1f1f1f	#1f1f1f	RGB(31, 31, 31)	Anchor Black	Gray12

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

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

Колір тексту	Колір фону	Коефіцієнт контрастності
#9d75cb	#ff9aa2	1.77
#ffe066	#b8f2e6	1.04
#ffe066	#dee2e6	1
#ffe066	#ff9aa2	1.54
#b8f2e6	#dee2e6	1.04
#b8f2e6	#ff9aa2	1.62

Зображення палітри Web Animation Framework Palette png

Web Animation Framework Palette - #552652

--color-tween-plum:	#9d75cb;
--color-frame-lemon:	#ffe066;
--color-ease-aqua:	#b8f2e6;
--color-loop-gray:	#dee2e6;
--color-motion-pink:	#ff9aa2;
--color-anchor-black:	#1f1f1f;

$color-tween-plum:	#9d75cb;
$color-frame-lemon:	#ffe066;
$color-ease-aqua:	#b8f2e6;
$color-loop-gray:	#dee2e6;
$color-motion-pink:	#ff9aa2;
$color-anchor-black:	#1f1f1f;

@color-tween-plum:	#9d75cb;
@color-frame-lemon:	#ffe066;
@color-ease-aqua:	#b8f2e6;
@color-loop-gray:	#dee2e6;
@color-motion-pink:	#ff9aa2;
@color-anchor-black:	#1f1f1f;