Voice Interface Design Kit

Speech Bubble Cream
#fff5e4
Audio Input Blue
#00b4d8
Tone Pink
#ffcad4
Waveform Gray
#ced4da
UX Whisper White
#fbfbfb
Mic Icon Black
#2b2d42

Палітра містить світлий, темний кольори. Акцентні кольори Speech Bubble Cream #fff5e4 та Audio Input Blue #00b4d8. Палітра має температуру кольорів Нейтральний, Холодний.

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

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

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

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

HEX-коди (відсортовано): #00B4D8, #2B2D42, #CED4DA, #FBFBFB, #FFCAD4, #FFF5E4

Палітра Voice Interface Design Kit містить комбінацію з 6 кодів кольорів :

HEX: #fff5e4, RGB: (255, 245, 228); HEX: #00b4d8, RGB: (0, 180, 216); HEX: #ffcad4, RGB: (255, 202, 212)

HEX: #ced4da, RGB: (206, 212, 218); HEX: #fbfbfb, RGB: (251, 251, 251); HEX: #2b2d42, RGB: (43, 45, 66)

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

Відтінок oldlace, Відтінок deepskyblue, Відтінок Рожевий, Відтінок lightgrey, Відтінок Білий, Відтінок midnightblue

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

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

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

Voice Interface Design Kit коди кольорів HEX, RGB інформація у таблиці

Колір	HEX	RGB	Назва	Альтернативна назва
#fff5e4	#fff5e4	RGB(255, 245, 228)	Speech Bubble Cream	Silky Tofu
#00b4d8	#00b4d8	RGB(0, 180, 216)	Audio Input Blue	—
#ffcad4	#ffcad4	RGB(255, 202, 212)	Tone Pink	—
#ced4da	#ced4da	RGB(206, 212, 218)	Waveform Gray	—
#fbfbfb	#fbfbfb	RGB(251, 251, 251)	UX Whisper White	Whiteout
#2b2d42	#2b2d42	RGB(43, 45, 66)	Mic Icon Black	—

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

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

Колір тексту	Колір фону	Коефіцієнт контрастності
#fff5e4	#ffcad4	1.32
#fff5e4	#ced4da	1.38
#fff5e4	#fbfbfb	1.04
#00b4d8	#ffcad4	1.71
#00b4d8	#ced4da	1.64
#ffcad4	#ced4da	1.04

Зображення палітри Voice Interface Design Kit png

--color-speech-bubble-cream:	#fff5e4;
--color-audio-input-blue:	#00b4d8;
--color-tone-pink:	#ffcad4;
--color-waveform-gray:	#ced4da;
--color-ux-whisper-white:	#fbfbfb;
--color-mic-icon-black:	#2b2d42;

$color-speech-bubble-cream:	#fff5e4;
$color-audio-input-blue:	#00b4d8;
$color-tone-pink:	#ffcad4;
$color-waveform-gray:	#ced4da;
$color-ux-whisper-white:	#fbfbfb;
$color-mic-icon-black:	#2b2d42;

@color-speech-bubble-cream:	#fff5e4;
@color-audio-input-blue:	#00b4d8;
@color-tone-pink:	#ffcad4;
@color-waveform-gray:	#ced4da;
@color-ux-whisper-white:	#fbfbfb;
@color-mic-icon-black:	#2b2d42;