Accessible Dark UI System Kit

Background Obsidian
#0a0a0a
Focus Cyan
#00ffff
Error Salmon
#ff6b6b
Outline Gray
#b0b0b0
Component Ivory
#faf9f6
Interactive Blue
#3a86ff

Die Palette besteht aus Dunkel, Licht-Farben. Akzentfarben Focus Cyan #00ffff und Error Salmon #ff6b6b. Palette hat Farbtemperatur Neutral, Kalt, Warm.

Nach Helligkeit reicht diese Palette von #0A0A0A (dunkelstes) bis #FAF9F6 (hellstes). Die Helligkeitsspanne ist groß.

Die Sättigung ist gemischt — gedämpfte und lebhafte Farbfelder.

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): #00FFFF, #0A0A0A, #3A86FF, #B0B0B0, #FAF9F6, #FF6B6B

Die Palette Accessible Dark UI System Kit enthält eine Kombination aus 6-Codefarben:

VERHEXEN: #0a0a0a, RGB: (10, 10, 10); VERHEXEN: #00ffff, RGB: (0, 255, 255); VERHEXEN: #ff6b6b, RGB: (255, 107, 107)

VERHEXEN: #b0b0b0, RGB: (176, 176, 176); VERHEXEN: #faf9f6, RGB: (250, 249, 246); VERHEXEN: #3a86ff, RGB: (58, 134, 255)

Vereinfachte Version der Palettenfarben

Schatten von Schwarz, Farbton von salmon, Schatten von darkgrey, Schatten von whitesmoke, Schatten von dodgerblue

Farbschema wurde erstellt von colorslib

Mehr Paletten mit:

Farbcodes in der Palette

Accessible Dark UI System Kit Farbcodes HEX, RGB-Informationen in der Tabelle

Farbe	VERHEXEN	RGB	Name	alternativer Name
#0a0a0a	#0a0a0a	RGB(10, 10, 10)	Background Obsidian	Existential Angst
#00ffff	#00ffff	RGB(0, 255, 255)	Focus Cyan	Aqua
#ff6b6b	#ff6b6b	RGB(255, 107, 107)	Error Salmon	—
#b0b0b0	#b0b0b0	RGB(176, 176, 176)	Outline Gray	Gray69
#faf9f6	#faf9f6	RGB(250, 249, 246)	Component Ivory	—
#3a86ff	#3a86ff	RGB(58, 134, 255)	Interactive Blue	—

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
#00ffff	#b0b0b0	1.72
#00ffff	#faf9f6	1.19
#ff6b6b	#b0b0b0	1.27
#ff6b6b	#3a86ff	1.25
#b0b0b0	#3a86ff	1.6

Bildpalette Accessible Dark UI System Kit png

--color-background-obsidian:	#0a0a0a;
--color-focus-cyan:	#00ffff;
--color-error-salmon:	#ff6b6b;
--color-outline-gray:	#b0b0b0;
--color-component-ivory:	#faf9f6;
--color-interactive-blue:	#3a86ff;

$color-background-obsidian:	#0a0a0a;
$color-focus-cyan:	#00ffff;
$color-error-salmon:	#ff6b6b;
$color-outline-gray:	#b0b0b0;
$color-component-ivory:	#faf9f6;
$color-interactive-blue:	#3a86ff;

@color-background-obsidian:	#0a0a0a;
@color-focus-cyan:	#00ffff;
@color-error-salmon:	#ff6b6b;
@color-outline-gray:	#b0b0b0;
@color-component-ivory:	#faf9f6;
@color-interactive-blue:	#3a86ff;