#0B1021 Dunkles Blau

Q: Welche Farbe ist #0B1021?

Dunkles Blau ist #0B1021, in Großbuchstaben #0B1021. In RGB rgb(11,16,33), in HSL etwa hsl(226 50% 9%), in OKLCH oklch(0.178 0.036 270.1).

Q: Wofür steht Dunkles Blau?

Meist steht es für Energie, Wärme und Selbstbewusstsein, mit einem zeremoniellen Rand. Lokale Kultur kann die Lesart verschieben, prüfe den Kontext.

Q: Wo wird Dunkles Blau eingesetzt?

Zu sehen ist es in Kampagnen-Landingpages, Redaktionelle Cover-Systeme, Produktverpackungs-Etiketten, Statusakzente im Dashboard, Leitsysteme im Handel und ebenso in Beauty, Kultur, Technologie, Luxusgüter.

Q: Welche Farben passen zu Dunkles Blau?

Gedeckte Neutraltöne, dunklere Stufen desselben Farbtons und ein metallischer Akzent passen gut. redaktionelle Layouts mit einem warmen Fokuspunkt; Verpackungen, die appetitlich wirken sollen, ohne zu schreien; Interfaces, in denen ein Akzent lesbar bleiben muss

Q: Wie wirkt Dunkles Blau auf die Stimmung?

Es erhöht die wahrgenommene Energie und zieht den Blick schnell an. Große Flächen wirken intensiv, Akzente sind sicherer.

Q: Welche Branchen nutzen Dunkles Blau?

Es ist in Beauty, Kultur, Technologie, Luxusgüter verbreitet, besonders wenn Marken luxuriös, kreativ, mysteriös, spirituell, vornehm wirken wollen.

Q: Wie ist die Geschichte von Dunkles Blau?

Die Pigmentgeschichte ist konkret: Violett verlangte schon immer nach seltener Farbe oder sorgfältiger Mischung, und dieser Aufwand prägt seinen Ruf bis heute. Es balanciert Zeremonie, Fantasie und einen Hauch von Geheimnis.

Q: Wie setze ich Dunkles Blau im Design ein?

Gib ihm ein fokussiertes Element, halte Fließtext neutral und prüfe den Kontrast mit 18.91 gegen Weiß und 1.00 gegen Schwarz.

Q: Ist Dunkles Blau barrierefrei?

Der Kontrast beträgt 18.91 gegen Weiß (AAA) und 1.00 gegen Schwarz (FAIL). Für große Schrift erst ab Stufe AA.

Farbumwandlung

CMYK profile: Coated FOGRA39 · Die Notation folgt CSS Color 4 und den Kontrastregeln nach WCAG 2.2.

Auf einen Blick

Name	Dunkles Blau
Umschrift	Dunkles Blau
Tradition	digitale Farbe
Familie	Violett
HEX	#0B1021
RGB	rgb(11,16,33)
HSL	hsl(226 50% 9%)
HSV	hsv(226, 67%, 13%)
OKLCH	oklch(0.178 0.036 270.1)
LAB	lab(4.98 3.01 -11.91)
XYZ	1,1,2
CMYK	cmyk(66.7% 51.5% 0.0% 87.1%)
RAL	#131516 · Jet black · RAL 9005

Über diese Farbe

Dunkles BlauViolettdigitale Farbe

Luxus mit einem Geheimnis

Dunkles Blau liegt bei #0B1021 und stammt aus der Familie Violett mit klarer kultureller Herkunft. Allein gelesen wirkt es als Teil dieser Familie; über die Wurzeln in digitale Farbe kommt eine zweite Bedeutungsebene hinzu.

Design-Tipp

Prüfe Dunkles Blau (#0B1021) zuerst auf einer neutralen Fläche; ein Akzent aus der Familie Violett lässt es bewusst statt dekorativ wirken.

Beste Verwendung

Gib Dunkles Blau das eine Element, das zuerst auffallen muss; der Rest der Violett-Palette trägt es.

luxuriöskreativmysteriösspirituellvornehm

Psychologie

Wahrnehmung

luxuriöskreativmysteriösspirituellvornehm

Psychologische Wirkung

Dunkles Blau hebt die wahrgenommene Energie einer Violett-Komposition und lenkt den Blick auf die Handlung.

Emotionale Wirkung

Es wirkt unmittelbar und warm, hebt ein zurückhaltendes Layout, ohne laut zu werden.

Symbolik

Wofür es steht

KreativitätPrestige und Fantasie

Kulturelle Bedeutung

Im Kontext von digitale Farbe trägt der Ton eigene Bezüge, prüfe die Symbolik vor der Kampagne.

Positive Assoziationen

Positive Assoziationen neigen zu Kreativität, Prestige und Fantasie; deshalb erscheint es auf Einladungen und in Saisonarbeiten.

Mit Bedacht einsetzen

Zu viel Fläche liest sich als Künstlichkeit oder Elitarismus bei Übertreibung, bleib daher bei Akzenten und kleinen Feldern.

Einsatzorte

Typische Designanwendungen

Kampagnen-Landingpages: Gib Dunkles Blau das eine Element, das zuerst auffallen muss; der Rest der Violett-Palette trägt es.
Redaktionelle Cover-Systeme: Gib Dunkles Blau das eine Element, das zuerst auffallen muss; der Rest der Violett-Palette trägt es.
Produktverpackungs-Etiketten: Gib Dunkles Blau das eine Element, das zuerst auffallen muss; der Rest der Violett-Palette trägt es.
Statusakzente im Dashboard: Gib Dunkles Blau das eine Element, das zuerst auffallen muss; der Rest der Violett-Palette trägt es.
Leitsysteme im Handel: Gib Dunkles Blau das eine Element, das zuerst auffallen muss; der Rest der Violett-Palette trägt es.

Designhinweise

So gelingt der Einsatz

Kombination

Farben, die es ergänzen

#171000redaktionelle Layouts mit einem warmen Fokuspunkt #000001Interfaces, in denen ein Akzent lesbar bleiben muss #1F0A08Verpackungen, die appetitlich wirken sollen, ohne zu schreien

Geschichte

Pigmente und Herkunft

Vor synthetischen Farbstoffen wurde Dunkles Blau aus Mineral- und Pflanzenpigmenten gemischt; die Familie Violett hing von Ocker, Krapp und Indigo ab. Bildschirme geben es heute gleichmäßiger wieder als jedes einzelne Pigment.

Schlagwörter

luxuriöskreativmysteriösspirituellvornehmKreativitätPrestige und FantasieViolett

Varianten

Schattierungen werden dunkler, Aufhellungen heller; der Farbwinkel bleibt gleich.

Profi-Tipp: Schattierungen werden dunkler, Aufhellungen heller; der Farbwinkel bleibt gleich.

Schattierungen

Dunklere Stufen im selben Farbton.

0% #0B1021 10% #0A0E1E 20% #090D1A 30% #080B17 40% #070A14 50% #060811 60% #04060D 70% #03050A 80% #020307 90% #010203 100% #000000

Aufhellungen

Hellere Stufen für Flächen und Hintergründe.

0% #0B1021 10% #232837 20% #3C404D 30% #545864 40% #6D707A 50% #858890 60% #9D9FA6 70% #B6B7BC 80% #CECFD3 90% #E7E7E9 100% #FFFFFF

Designskala 50–950

50#F3F5FD 100#E8EDF8 200#D3D9E9 300#BBC2D7 400#A1A9BF 500#828AA1 600#6B7288 700#555C6F 800#404656 900#2D313E 950#1D2029

Dark-Mode-Wert (AA): #757D93 · 4.59:1

Anwendungsfälle

Schattierungen → Hover, Schatten, Tiefe
Aufhellungen → Highlights, Flächen
Balance → konsistente Farbsysteme

Gestaltungstipp

Ein Hauptton, ein Begleiter und ein Akzent genügen.

Farbsysteme im Vergleich

Der nächstliegende benannte Farbton in jeder Tradition und jedem Designsystem, gemessen in OKLCH ΔE. Kleiner heißt näher.

Asiatische Farbtraditionen

黒 JP ΔE 0.050

흑 KR ΔE 0.054

Đen VN ΔE 0.054

Alle anzeigen (6)

Hitam ID ΔE 0.074

Хар MN ΔE 0.097

玄色 CN ΔE 0.175

藏蓝 TB ΔE 0.183

नील IN ΔE 0.261

สีคราม TH ΔE 0.290

Designsysteme

Web 10 Fluent ΔE 0.019

Neutral 6 Material ΔE 0.025

Slate 900 UnoCSS ΔE 0.030

Alle anzeigen (11)

Slate 900 Panda ΔE 0.030

Slate 900 Tailwind ΔE 0.031

Blue 16 Polaris ΔE 0.038

Gray 900 Chakra ΔE 0.041

Grey 8 Ant Design ΔE 0.054

Sage 12 Radix ΔE 0.066

Foreground Primer ΔE 0.080

Dark Bootstrap ΔE 0.088

Gray 900 Open Color ΔE 0.088

Text StyleX ΔE 0.182

Brand (default) vanilla-extract ΔE 0.397

RAL Classic

Jet black · RAL 9005 RAL ΔE 0.036

Beliebige Farbe testen

Farbkombinationen

Den Farbkreis drehen und die Helligkeit halten.

So einsetzen

Drei Schritte halten die Farbe lesbar und bewusst.

Warum es wirkt

Die wahrnehmungsbezogene Begründung der Palette.

Komplementär

Gegenüber im Farbkreis; schärft die Fokusfarbe durch Kontrast.

#0B1021 #171000

Beste Verwendung: Handlungsaufrufe und Highlights einzelner Funktionen

Split-Komplementär

Zwei Nachbarn des Gegenübers; weicher als ein direkter Komplementärkontrast.

#0B1021 #1C0D02 #0F1302

Beste Verwendung: Ausgewogene Marketinglayouts mit zwei Akzenten

Triadisch

Drei gleichmäßig verteilte Töne; lebendig, braucht aber eine dominante Stimme.

#0B1021 #1F0A08 #051508

Beste Verwendung: Event-Identitäten und verspielte redaktionelle Seiten

Analog

Benachbarte Töne im Kreis; ruhig, zusammenhängend und leicht zu erfassen.

#02131F #0B1021 #140D1F

Beste Verwendung: Hintergründe, Diagramme und ruhige Produktseiten

Monochrom

Ein Farbton über Helligkeitsstufen; diszipliniert und hochwertig.

#080C18 #0B1021 #4F535F

Beste Verwendung: Designsysteme, Verpackungen und typografische Hierarchie

Tetradisch

Zwei komplementäre Paare; reich, verlangt aber strenge Proportionen.

#0B1021 #1A0B19 #171000 #051508

Beste Verwendung: Komplexe Dashboards und Marken mit mehreren Leistungen

Skala exportieren

CSS

:root {
  --brand-50: #F3F5FD;
  --brand-100: #E8EDF8;
  --brand-200: #D3D9E9;
  --brand-300: #BBC2D7;
  --brand-400: #A1A9BF;
  --brand-500: #828AA1;
  --brand-600: #6B7288;
  --brand-700: #555C6F;
  --brand-800: #404656;
  --brand-900: #2D313E;
  --brand-950: #1D2029;
}

Tailwind

theme: {
  extend: {
    colors: {
      brand: {
        50: '#F3F5FD',
        100: '#E8EDF8',
        200: '#D3D9E9',
        300: '#BBC2D7',
        400: '#A1A9BF',
        500: '#828AA1',
        600: '#6B7288',
        700: '#555C6F',
        800: '#404656',
        900: '#2D313E',
        950: '#1D2029',
      },
    },
  },
}

Figma

{
  "brand": {
    "50": {
      "$type": "color",
      "$value": "#F3F5FD"
    },
    "100": {
      "$type": "color",
      "$value": "#E8EDF8"
    },
    "200": {
      "$type": "color",
      "$value": "#D3D9E9"
    },
    "300": {
      "$type": "color",
      "$value": "#BBC2D7"
    },
    "400": {
      "$type": "color",
      "$value": "#A1A9BF"
    },
    "500": {
      "$type": "color",
      "$value": "#828AA1"
    },
    "600": {
      "$type": "color",
      "$value": "#6B7288"
    },
    "700": {
      "$type": "color",
      "$value": "#555C6F"
    },
    "800": {
      "$type": "color",
      "$value": "#404656"
    },
    "900": {
      "$type": "color",
      "$value": "#2D313E"
    },
    "950": {
      "$type": "color",
      "$value": "#1D2029"
    }
  }
}

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1100" height="120">
  <rect x="0" y="0" width="100" height="90" fill="#F3F5FD"/>
  <rect x="100" y="0" width="100" height="90" fill="#E8EDF8"/>
  <rect x="200" y="0" width="100" height="90" fill="#D3D9E9"/>
  <rect x="300" y="0" width="100" height="90" fill="#BBC2D7"/>
  <rect x="400" y="0" width="100" height="90" fill="#A1A9BF"/>
  <rect x="500" y="0" width="100" height="90" fill="#828AA1"/>
  <rect x="600" y="0" width="100" height="90" fill="#6B7288"/>
  <rect x="700" y="0" width="100" height="90" fill="#555C6F"/>
  <rect x="800" y="0" width="100" height="90" fill="#404656"/>
  <rect x="900" y="0" width="100" height="90" fill="#2D313E"/>
  <rect x="1000" y="0" width="100" height="90" fill="#1D2029"/>
  <text x="50" y="112" font-family="monospace" font-size="10" text-anchor="middle" fill="#444">50</text>
  <text x="150" y="112" font-family="monospace" font-size="10" text-anchor="middle" fill="#444">100</text>
  <text x="250" y="112" font-family="monospace" font-size="10" text-anchor="middle" fill="#444">200</text>
  <text x="350" y="112" font-family="monospace" font-size="10" text-anchor="middle" fill="#444">300</text>
  <text x="450" y="112" font-family="monospace" font-size="10" text-anchor="middle" fill="#444">400</text>
  <text x="550" y="112" font-family="monospace" font-size="10" text-anchor="middle" fill="#444">500</text>
  <text x="650" y="112" font-family="monospace" font-size="10" text-anchor="middle" fill="#444">600</text>
  <text x="750" y="112" font-family="monospace" font-size="10" text-anchor="middle" fill="#444">700</text>
  <text x="850" y="112" font-family="monospace" font-size="10" text-anchor="middle" fill="#444">800</text>
  <text x="950" y="112" font-family="monospace" font-size="10" text-anchor="middle" fill="#444">900</text>
  <text x="1050" y="112" font-family="monospace" font-size="10" text-anchor="middle" fill="#444">950</text>
</svg>

iOS

extension UIColor {
  static let brand50 = UIColor(red: 0.953, green: 0.961, blue: 0.992, alpha: 1.0)
  static let brand100 = UIColor(red: 0.910, green: 0.929, blue: 0.973, alpha: 1.0)
  static let brand200 = UIColor(red: 0.827, green: 0.851, blue: 0.914, alpha: 1.0)
  static let brand300 = UIColor(red: 0.733, green: 0.761, blue: 0.843, alpha: 1.0)
  static let brand400 = UIColor(red: 0.631, green: 0.663, blue: 0.749, alpha: 1.0)
  static let brand500 = UIColor(red: 0.510, green: 0.541, blue: 0.631, alpha: 1.0)
  static let brand600 = UIColor(red: 0.420, green: 0.447, blue: 0.533, alpha: 1.0)
  static let brand700 = UIColor(red: 0.333, green: 0.361, blue: 0.435, alpha: 1.0)
  static let brand800 = UIColor(red: 0.251, green: 0.275, blue: 0.337, alpha: 1.0)
  static let brand900 = UIColor(red: 0.176, green: 0.192, blue: 0.243, alpha: 1.0)
  static let brand950 = UIColor(red: 0.114, green: 0.125, blue: 0.161, alpha: 1.0)
}

Android

<resources>
  <color name="brand_50">#F3F5FD</color>
  <color name="brand_100">#E8EDF8</color>
  <color name="brand_200">#D3D9E9</color>
  <color name="brand_300">#BBC2D7</color>
  <color name="brand_400">#A1A9BF</color>
  <color name="brand_500">#828AA1</color>
  <color name="brand_600">#6B7288</color>
  <color name="brand_700">#555C6F</color>
  <color name="brand_800">#404656</color>
  <color name="brand_900">#2D313E</color>
  <color name="brand_950">#1D2029</color>
</resources>

Prinzipien

Balance

Ein Hauptton, ein Begleiter und ein Akzent genügen.

Kontrast

Fließtext vor dem Launch gegen Weiß und Schwarz prüfen.

Harmonie

Den Farbkreis drehen und die Helligkeit halten.

Kontrastprüfung

Fließtext vor dem Launch gegen Weiß und Schwarz prüfen.

Textfarbe

Hintergrund

18.91 :1

AAA

Zitat

Gib Dunkles Blau das eine Element, das zuerst auffallen muss; der Rest der Violett-Palette trägt es.

WCAG-Kontrast

Vorschau

Aa / Bb

#0B1021 · Dunkles Blau

WCAG-Kontraststandards

WCAG 2.2 legt Mindestkontraste für Text und UI-Teile fest. #0B1021 erreicht 18.91:1 gegen Weiß (AAA) und 1.00:1 gegen Schwarz (FAIL). Wählen Sie unten den passenden Grenzwert für die Textgröße.

Stufe	Normaler Text	Großer Text (18pt+ / 14pt fett)	Symbole & UI-Teile
AAA	7 : 1	4.5 : 1	—
AA	4.5 : 1	3 : 1	3 : 1
Nicht bestanden	< 4.5 : 1	< 3 : 1	< 3 : 1

Großer Text bedeutet 18pt normal oder 14pt fett. UI-Teile brauchen 3:1 gegen benachbarte Farben. AA ist die übliche Baseline, AAA die erweiterte Stufe.

Technische Formate

Notation in den Farbräumen

HEX

#0B1021

CSS Color 4

RGB

11,16,33

sRGB / D65

HSL

226,50,9

HSL

OKLCH

oklch(0.178 0.036 270.1)

perceptual

LAB

5,3,-12

CIE Lab

LCH

5,12,284

CIE LCH

XYZ

1,1,2

CIE XYZ

LUV

5,-1,-6

CIE LUV

HWB

226,4,87

CSS HWB

CMYK

67,52,0,87

Praktische Formate

Direkt nutzbare Werte

CSS

color: #0B1021;

custom properties

Tailwind

bg-[#0B1021] text-[#FFF]

arbitrary value

Android

#FF0B1021

ARGB

Flutter

Color(0xFF0B1021)

dart:ui

Photoshop

R 11 G 16 B 33 · C 67 M 52 Y 0 K 87

RGB / CMYK

CMYK 67,52,0,87

FOGRA39

Farbanalyse

Gemessene Farbwerte

Helligkeit

0.006

relative luminance · cool

Kontrast

18.91 : 1

vs white · AAA · cool

Kontrast

1.00 : 1

vs black · FAIL · cool

Farbton

226°

saturation 50% · cool

LCH

5,12,284

lightness 9% · cool

ΔE

21.4

玄色 #3A3A40 · cool

Farbsimulator

Wirkung bei Farbsehschwäche

Wirkung bei Farbsehschwäche · ΔE 21.4