AI Chat UX Interaction Schema

Dialog Blue
#66c7f4
Context Gray
#e0e0e0
Response Pink
#ffb4c6
User White
#ffffff
Intent Yellow
#ffe066
Thread Ink
#1f1f1f

A paleta consiste em cores Luz, Escuro. Cores de destaque Dialog Blue #66c7f4 e Intent Yellow #ffe066. A paleta tem Legal, Neutro, Esquentar temperatura de cores.

Em luminosidade, a paleta vai de #1F1F1F (mais escuro) a #FFFFFF (mais claro). A faixa de luminosidade é ampla.

Saturação mista — tons suaves e acentos mais vivos.

Alguns pares de matizes estão perto de posições complementares — pode ler-se como contraste complementar (heurística).

No geral, a temperatura tende para o quente.

Códigos HEX (ordenados): #1F1F1F, #66C7F4, #E0E0E0, #FFB4C6, #FFE066, #FFFFFF

A paleta AI Chat UX Interaction Schema tem uma combinação de cores de códigos de 6:

HEX: #66c7f4, RGB: (102, 199, 244); HEX: #e0e0e0, RGB: (224, 224, 224); HEX: #ffb4c6, RGB: (255, 180, 198)

HEX: #ffffff, RGB: (255, 255, 255); HEX: #ffe066, RGB: (255, 224, 102); HEX: #1f1f1f, RGB: (31, 31, 31)

Versão simplificada das cores da paleta

Matiz de lightskyblue, Sombra de gainsboro, Matiz de lightpink, Branco, Sombra de gold, Sombra de Preto

O esquema de cores foi criado por bad_colors

Mais paletas com:

Códigos de cores na paleta

AI Chat UX Interaction Schema códigos de cores HEX, informações RGB na tabela

Cor	HEX	RGB	Nome	nome alternativo
#66c7f4	#66c7f4	RGB(102, 199, 244)	Dialog Blue	—
#e0e0e0	#e0e0e0	RGB(224, 224, 224)	Context Gray	Gray88
#ffb4c6	#ffb4c6	RGB(255, 180, 198)	Response Pink	—
#ffffff	#ffffff	RGB(255, 255, 255)	User White	White
#ffe066	#ffe066	RGB(255, 224, 102)	Intent Yellow	—
#1f1f1f	#1f1f1f	RGB(31, 31, 31)	Thread Ink	Gray12

Contraste da Paleta de Cores

10 pares de cores têm contraste baixo e precisam de melhorias, o que pode afetar a legibilidade.

Cor do texto	Cor de fundo	Taxa de contraste
#66c7f4	#e0e0e0	1.44
#66c7f4	#ffb4c6	1.14
#66c7f4	#ffffff	1.9
#66c7f4	#ffe066	1.45
#e0e0e0	#ffb4c6	1.26
#e0e0e0	#ffffff	1.32

Paleta de imagens AI Chat UX Interaction Schema png

--color-dialog-blue:	#66c7f4;
--color-context-gray:	#e0e0e0;
--color-response-pink:	#ffb4c6;
--color-user-white:	#ffffff;
--color-intent-yellow:	#ffe066;
--color-thread-ink:	#1f1f1f;

$color-dialog-blue:	#66c7f4;
$color-context-gray:	#e0e0e0;
$color-response-pink:	#ffb4c6;
$color-user-white:	#ffffff;
$color-intent-yellow:	#ffe066;
$color-thread-ink:	#1f1f1f;

@color-dialog-blue:	#66c7f4;
@color-context-gray:	#e0e0e0;
@color-response-pink:	#ffb4c6;
@color-user-white:	#ffffff;
@color-intent-yellow:	#ffe066;
@color-thread-ink:	#1f1f1f;