Design Token Driven System UI

Primary Indigo
#3f51b5
Secondary Peach
#ffb997
Success Mint
#9aeba3
Alert Red
#e63946
Neutral White
#ffffff
Disabled Grey
#b0bec5

La palette se compose de Semi foncé, Lumière couleurs. Couleurs d'accent Primary Indigo #3f51b5 et Secondary Peach #ffb997. La palette a une température de couleur Froid, Chaud, Neutre.

En luminosité, cette palette va de #3F51B5 (plus sombre) à #FFFFFF (plus clair). L’écart de luminosité est modéré.

Saturation mixte — passages atténués et accents plus vifs.

Certaines paires sont proches de positions complémentaires — effet possible de contraste (heuristique).

La température globale penche vers le froid.

Codes HEX (triés) : #3F51B5, #9AEBA3, #B0BEC5, #E63946, #FFB997, #FFFFFF

La palette Design Token Driven System UI a une combinaison de couleurs de codes 6:

HEX: #3f51b5, RVB: (63, 81, 181); HEX: #ffb997, RVB: (255, 185, 151); HEX: #9aeba3, RVB: (154, 235, 163)

HEX: #e63946, RVB: (230, 57, 70); HEX: #ffffff, RVB: (255, 255, 255); HEX: #b0bec5, RVB: (176, 190, 197)

Version simplifiée des couleurs de la palette

Nuance de slateblue, Ombre de lightsalmon, Ombre de lightgreen, Ombre de crimson, Blanc, Nuance de Argent

Le jeu de couleurs a été créé par colorhunt

Plus de palettes avec:

Codes couleurs dans la palette

Design Token Driven System UI codes de couleur HEX, informations RVB dans le tableau

Couleur	HEX	RVB	Nom	Autre nom
#3f51b5	#3f51b5	RVB(63, 81, 181)	Primary Indigo	—
#ffb997	#ffb997	RVB(255, 185, 151)	Secondary Peach	—
#9aeba3	#9aeba3	RVB(154, 235, 163)	Success Mint	—
#e63946	#e63946	RVB(230, 57, 70)	Alert Red	—
#ffffff	#ffffff	RVB(255, 255, 255)	Neutral White	White
#b0bec5	#b0bec5	RVB(176, 190, 197)	Disabled Grey	Ocean Drive

Contraste de la palette de couleurs

7 paires de couleurs ont un faible contraste et nécessitent des améliorations, ce qui peut affecter la lisibilité.

Couleur du texte	Couleur de l'arrière plan	Rapport de contraste
#3f51b5	#e63946	1.64
#ffb997	#9aeba3	1.16
#ffb997	#ffffff	1.66
#ffb997	#b0bec5	1.14
#9aeba3	#ffffff	1.42
#9aeba3	#b0bec5	1.34

Palette d'images Design Token Driven System UI png

--color-primary-indigo:	#3f51b5;
--color-secondary-peach:	#ffb997;
--color-success-mint:	#9aeba3;
--color-alert-red:	#e63946;
--color-neutral-white:	#ffffff;
--color-disabled-grey:	#b0bec5;

$color-primary-indigo:	#3f51b5;
$color-secondary-peach:	#ffb997;
$color-success-mint:	#9aeba3;
$color-alert-red:	#e63946;
$color-neutral-white:	#ffffff;
$color-disabled-grey:	#b0bec5;

@color-primary-indigo:	#3f51b5;
@color-secondary-peach:	#ffb997;
@color-success-mint:	#9aeba3;
@color-alert-red:	#e63946;
@color-neutral-white:	#ffffff;
@color-disabled-grey:	#b0bec5;