#241621 Dunkles Violett

Q: Welche Farbe ist #241621?

Dunkles Violett ist #241621, in Großbuchstaben #241621. In RGB rgb(36,22,33), in HSL etwa hsl(313 24% 11%), in OKLCH oklch(0.223 0.030 334.5).

Q: Wofür steht Dunkles Violett?

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 Violett 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 Violett?

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 Violett 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 Violett?

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 Violett?

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 Violett im Design ein?

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

Q: Ist Dunkles Violett barrierefrei?

Der Kontrast beträgt 17.33 gegen Weiß (AAA) und 1.09 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 Violett
Umschrift	Dunkles Violett
Tradition	digitale Farbe
Familie	Violett
HEX	#241621
RGB	rgb(36,22,33)
HSL	hsl(313 24% 11%)
HSV	hsv(313, 39%, 14%)
OKLCH	oklch(0.223 0.030 334.5)
LAB	lab(9.47 9.44 -4.81)
XYZ	1,1,2
CMYK	cmyk(0.0% 38.9% 8.3% 85.9%)
RAL	#1D1F2A · Black blue · RAL 5004

Über diese Farbe

Dunkles ViolettViolettdigitale Farbe

Luxus mit einem Geheimnis

Dunkles Violett liegt bei #241621 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 Violett (#241621) zuerst auf einer neutralen Fläche; ein Akzent aus der Familie Violett lässt es bewusst statt dekorativ wirken.

Beste Verwendung

Gib Dunkles Violett 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 Violett 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 Violett das eine Element, das zuerst auffallen muss; der Rest der Violett-Palette trägt es.
Redaktionelle Cover-Systeme: Gib Dunkles Violett das eine Element, das zuerst auffallen muss; der Rest der Violett-Palette trägt es.
Produktverpackungs-Etiketten: Gib Dunkles Violett das eine Element, das zuerst auffallen muss; der Rest der Violett-Palette trägt es.
Statusakzente im Dashboard: Gib Dunkles Violett das eine Element, das zuerst auffallen muss; der Rest der Violett-Palette trägt es.
Leitsysteme im Handel: Gib Dunkles Violett 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

#101F15redaktionelle Layouts mit einem warmen Fokuspunkt #010001Interfaces, in denen ein Akzent lesbar bleiben muss #201B0AVerpackungen, die appetitlich wirken sollen, ohne zu schreien

Geschichte

Pigmente und Herkunft

Vor synthetischen Farbstoffen wurde Dunkles Violett 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% #241621 10% #20141E 20% #1D121A 30% #190F17 40% #160D14 50% #120B11 60% #0E090D 70% #0B070A 80% #070407 90% #040203 100% #000000

Aufhellungen

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

0% #241621 10% #3A2D37 20% #50454D 30% #665C64 40% #7C737A 50% #928B90 60% #A7A2A6 70% #BDB9BC 80% #D3D0D3 90% #E9E8E9 100% #FFFFFF

Designskala 50–950

50#F9F3F8 100#F3EAF0 200#E2D4DE 300#CDBDC9 400#B5A3B0 500#978492 600#7E6D7A 700#665762 800#4F424C 900#382E36 950#251E23

Dark-Mode-Wert (AA): #897785 · 4.52: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

흑 KR ΔE 0.030

Đen VN ΔE 0.030

黒 JP ΔE 0.031

Alle anzeigen (6)

Hitam ID ΔE 0.033

Хар MN ΔE 0.052

玄色 CN ΔE 0.129

藏蓝 TB ΔE 0.144

नील IN ΔE 0.220

สีคราม TH ΔE 0.248

Designsysteme

Secondary 10 Material ΔE 0.006

Office 10 Fluent ΔE 0.012

Gray 900 Chakra ΔE 0.012

Alle anzeigen (11)

Gray 900 UnoCSS ΔE 0.013

Gray 900 Panda ΔE 0.013

Gray 900 Tailwind ΔE 0.014

Cyan 10 Ant Design ΔE 0.016

Orange 16 Polaris ΔE 0.017

Sage 12 Radix ΔE 0.025

Foreground Primer ΔE 0.036

Dark Bootstrap ΔE 0.044

Gray 900 Open Color ΔE 0.044

Text StyleX ΔE 0.225

Brand (default) vanilla-extract ΔE 0.376

RAL Classic

Black blue · RAL 5004 RAL ΔE 0.021

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.

#241621 #101F15

Beste Verwendung: Handlungsaufrufe und Highlights einzelner Funktionen

Split-Komplementär

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

#241621 #181E0E #09201D

Beste Verwendung: Ausgewogene Marketinglayouts mit zwei Akzenten

Triadisch

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

#241621 #201B0A #081F24

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

Analog

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

#1E1827 #241621 #27151A

Beste Verwendung: Hintergründe, Diagramme und ruhige Produktseiten

Monochrom

Ein Farbton über Helligkeitsstufen; diszipliniert und hochwertig.

#1A1018 #241621 #61575F

Beste Verwendung: Designsysteme, Verpackungen und typografische Hierarchie

Tetradisch

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

#241621 #281612 #101F15 #081F24

Beste Verwendung: Komplexe Dashboards und Marken mit mehreren Leistungen

Skala exportieren

CSS

:root {
  --brand-50: #F9F3F8;
  --brand-100: #F3EAF0;
  --brand-200: #E2D4DE;
  --brand-300: #CDBDC9;
  --brand-400: #B5A3B0;
  --brand-500: #978492;
  --brand-600: #7E6D7A;
  --brand-700: #665762;
  --brand-800: #4F424C;
  --brand-900: #382E36;
  --brand-950: #251E23;
}

Tailwind

theme: {
  extend: {
    colors: {
      brand: {
        50: '#F9F3F8',
        100: '#F3EAF0',
        200: '#E2D4DE',
        300: '#CDBDC9',
        400: '#B5A3B0',
        500: '#978492',
        600: '#7E6D7A',
        700: '#665762',
        800: '#4F424C',
        900: '#382E36',
        950: '#251E23',
      },
    },
  },
}

Figma

{
  "brand": {
    "50": {
      "$type": "color",
      "$value": "#F9F3F8"
    },
    "100": {
      "$type": "color",
      "$value": "#F3EAF0"
    },
    "200": {
      "$type": "color",
      "$value": "#E2D4DE"
    },
    "300": {
      "$type": "color",
      "$value": "#CDBDC9"
    },
    "400": {
      "$type": "color",
      "$value": "#B5A3B0"
    },
    "500": {
      "$type": "color",
      "$value": "#978492"
    },
    "600": {
      "$type": "color",
      "$value": "#7E6D7A"
    },
    "700": {
      "$type": "color",
      "$value": "#665762"
    },
    "800": {
      "$type": "color",
      "$value": "#4F424C"
    },
    "900": {
      "$type": "color",
      "$value": "#382E36"
    },
    "950": {
      "$type": "color",
      "$value": "#251E23"
    }
  }
}

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1100" height="120">
  <rect x="0" y="0" width="100" height="90" fill="#F9F3F8"/>
  <rect x="100" y="0" width="100" height="90" fill="#F3EAF0"/>
  <rect x="200" y="0" width="100" height="90" fill="#E2D4DE"/>
  <rect x="300" y="0" width="100" height="90" fill="#CDBDC9"/>
  <rect x="400" y="0" width="100" height="90" fill="#B5A3B0"/>
  <rect x="500" y="0" width="100" height="90" fill="#978492"/>
  <rect x="600" y="0" width="100" height="90" fill="#7E6D7A"/>
  <rect x="700" y="0" width="100" height="90" fill="#665762"/>
  <rect x="800" y="0" width="100" height="90" fill="#4F424C"/>
  <rect x="900" y="0" width="100" height="90" fill="#382E36"/>
  <rect x="1000" y="0" width="100" height="90" fill="#251E23"/>
  <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.976, green: 0.953, blue: 0.973, alpha: 1.0)
  static let brand100 = UIColor(red: 0.953, green: 0.918, blue: 0.941, alpha: 1.0)
  static let brand200 = UIColor(red: 0.886, green: 0.831, blue: 0.871, alpha: 1.0)
  static let brand300 = UIColor(red: 0.804, green: 0.741, blue: 0.788, alpha: 1.0)
  static let brand400 = UIColor(red: 0.710, green: 0.639, blue: 0.690, alpha: 1.0)
  static let brand500 = UIColor(red: 0.592, green: 0.518, blue: 0.573, alpha: 1.0)
  static let brand600 = UIColor(red: 0.494, green: 0.427, blue: 0.478, alpha: 1.0)
  static let brand700 = UIColor(red: 0.400, green: 0.341, blue: 0.384, alpha: 1.0)
  static let brand800 = UIColor(red: 0.310, green: 0.259, blue: 0.298, alpha: 1.0)
  static let brand900 = UIColor(red: 0.220, green: 0.180, blue: 0.212, alpha: 1.0)
  static let brand950 = UIColor(red: 0.145, green: 0.118, blue: 0.137, alpha: 1.0)
}

Android

<resources>
  <color name="brand_50">#F9F3F8</color>
  <color name="brand_100">#F3EAF0</color>
  <color name="brand_200">#E2D4DE</color>
  <color name="brand_300">#CDBDC9</color>
  <color name="brand_400">#B5A3B0</color>
  <color name="brand_500">#978492</color>
  <color name="brand_600">#7E6D7A</color>
  <color name="brand_700">#665762</color>
  <color name="brand_800">#4F424C</color>
  <color name="brand_900">#382E36</color>
  <color name="brand_950">#251E23</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

17.33 :1

AAA

Zitat

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

WCAG-Kontrast

Vorschau

Aa / Bb

#241621 · Dunkles Violett

WCAG-Kontraststandards

WCAG 2.2 legt Mindestkontraste für Text und UI-Teile fest. #241621 erreicht 17.33:1 gegen Weiß (AAA) und 1.09: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

#241621

CSS Color 4

RGB

36,22,33

sRGB / D65

HSL

313,24,11

HSL

OKLCH

oklch(0.223 0.030 334.5)

perceptual

LAB

9,9,-5

CIE Lab

LCH

9,11,333

CIE LCH

XYZ

1,1,2

CIE XYZ

LUV

9,5,-4

CIE LUV

HWB

313,9,86

CSS HWB

CMYK

0,39,8,86

Praktische Formate

Direkt nutzbare Werte

CSS

color: #241621;

custom properties

Tailwind

bg-[#241621] text-[#FFF]

arbitrary value

Android

#FF241621

ARGB

Flutter

Color(0xFF241621)

dart:ui

Photoshop

R 36 G 22 B 33 · C 0 M 39 Y 8 K 86

RGB / CMYK

CMYK 0,39,8,86

FOGRA39

Farbanalyse

Gemessene Farbwerte

Helligkeit

0.011

relative luminance · warm

Kontrast

17.33 : 1

vs white · AAA · warm

Kontrast

1.09 : 1

vs black · FAIL · warm

Farbton

313°

saturation 24% · warm

LCH

9,11,333

lightness 11% · warm

ΔE

17.2

玄色 #3A3A40 · warm

Farbsimulator

Wirkung bei Farbsehschwäche

Wirkung bei Farbsehschwäche · ΔE 17.2