Web Component Architecture UI

Shadow DOM Grey
#ced0ce
Slot Mint
#a3f7bf
HTML Tag Blue
#407bff
Style Isolate Beige
#fff1e6
Element Coral
#ff6b6b
JS Logic Navy
#1a1a40

Die Palette besteht aus Licht, Dunkel-Farben. Akzentfarben HTML Tag Blue #407bff und Style Isolate Beige #fff1e6. Palette hat Farbtemperatur Neutral, Kalt, Warm.

Nach Helligkeit reicht diese Palette von #1A1A40 (dunkelstes) bis #FFF1E6 (hellstes). Die Helligkeitsspanne ist groß.

Die Sättigung wirkt insgesamt lebhaft (höhere Chroma).

Manche Farbton-Paare liegen nahe Komplementärpositionen — kann wie Komplementärkontrast wirken (heuristisch).

In der Gesamttemperatur neigen die Felder zur kalten Seite.

HEX-Codes (sortiert): #1A1A40, #407BFF, #A3F7BF, #CED0CE, #FF6B6B, #FFF1E6

Die Palette Web Component Architecture UI enthält eine Kombination aus 6-Codefarben:

VERHEXEN: #ced0ce, RGB: (206, 208, 206); VERHEXEN: #a3f7bf, RGB: (163, 247, 191); VERHEXEN: #407bff, RGB: (64, 123, 255)

VERHEXEN: #fff1e6, RGB: (255, 241, 230); VERHEXEN: #ff6b6b, RGB: (255, 107, 107); VERHEXEN: #1a1a40, RGB: (26, 26, 64)

Vereinfachte Version der Palettenfarben

Farbton von lightgrey, Schatten von aquamarine, Schatten von royalblue, Schatten von linen, Farbton von salmon, Farbton von midnightblue

Farbschema wurde erstellt von colorslib

Mehr Paletten mit:

Farbcodes in der Palette

Web Component Architecture UI Farbcodes HEX, RGB-Informationen in der Tabelle

Farbe	VERHEXEN	RGB	Name	alternativer Name
#ced0ce	#ced0ce	RGB(206, 208, 206)	Shadow DOM Grey	—
#a3f7bf	#a3f7bf	RGB(163, 247, 191)	Slot Mint	—
#407bff	#407bff	RGB(64, 123, 255)	HTML Tag Blue	—
#fff1e6	#fff1e6	RGB(255, 241, 230)	Style Isolate Beige	—
#ff6b6b	#ff6b6b	RGB(255, 107, 107)	Element Coral	—
#1a1a40	#1a1a40	RGB(26, 26, 64)	JS Logic Navy	—

Farbpalette Kontrast

5 Farbpaare haben einen niedrigen Kontrast und müssen verbessert werden, was die Lesbarkeit beeinträchtigen kann.

Tekst kleur	Achtergrond kleur	contrast ratio
#ced0ce	#a3f7bf	1.22
#ced0ce	#fff1e6	1.4
#ced0ce	#ff6b6b	1.78
#a3f7bf	#fff1e6	1.14
#407bff	#ff6b6b	1.37

Bildpalette Web Component Architecture UI png

--color-shadow-dom-grey:	#ced0ce;
--color-slot-mint:	#a3f7bf;
--color-html-tag-blue:	#407bff;
--color-style-isolate-beige:	#fff1e6;
--color-element-coral:	#ff6b6b;
--color-js-logic-navy:	#1a1a40;

$color-shadow-dom-grey:	#ced0ce;
$color-slot-mint:	#a3f7bf;
$color-html-tag-blue:	#407bff;
$color-style-isolate-beige:	#fff1e6;
$color-element-coral:	#ff6b6b;
$color-js-logic-navy:	#1a1a40;

@color-shadow-dom-grey:	#ced0ce;
@color-slot-mint:	#a3f7bf;
@color-html-tag-blue:	#407bff;
@color-style-isolate-beige:	#fff1e6;
@color-element-coral:	#ff6b6b;
@color-js-logic-navy:	#1a1a40;