#644E4E Tiefes Rot

Q: Welche Farbe ist #644E4E?

Tiefes Rot ist #644E4E, in Großbuchstaben #644E4E. In RGB rgb(100,78,78), in HSL etwa hsl(0 12% 35%), in OKLCH oklch(0.447 0.030 18.3).

Q: Wofür steht Tiefes Rot?

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 Tiefes Rot eingesetzt?

Zu sehen ist es in Kampagnen-Landingpages, Redaktionelle Cover-Systeme, Produktverpackungs-Etiketten, Statusakzente im Dashboard, Leitsysteme im Handel und ebenso in Gastronomie, Sport, Handel, Unterhaltung.

Q: Welche Farben passen zu Tiefes Rot?

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 Tiefes Rot 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 Tiefes Rot?

Es ist in Gastronomie, Sport, Handel, Unterhaltung verbreitet, besonders wenn Marken dringlich, leidenschaftlich, kühn, appetitlich, warm wirken wollen.

Q: Wie ist die Geschichte von Tiefes Rot?

Die Pigmentgeschichte ist konkret: Rot erreicht das Auge früher als fast jeder andere Farbton, deshalb trägt es Appetit und Alarm zugleich. In tiefen, erdigen Stufen gewinnt es Gewicht, in staubigen Rosatönen wird es weich.

Q: Wie setze ich Tiefes Rot im Design ein?

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

Q: Ist Tiefes Rot barrierefrei?

Der Kontrast beträgt 7.66 gegen Weiß (AAA) und 2.47 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	Tiefes Rot
Umschrift	Tiefes Rot
Tradition	digitale Farbe
Familie	Rot
HEX	#644E4E
RGB	rgb(100,78,78)
HSL	hsl(0 12% 35%)
HSV	hsv(0, 22%, 39%)
OKLCH	oklch(0.447 0.030 18.3)
LAB	lab(35.42 9.23 3.53)
XYZ	9,9,8
CMYK	cmyk(0.0% 22.0% 22.0% 60.8%)
RAL	#495746 · Bronze green · RAL 6031

Über diese Farbe

Tiefes RotRotdigitale Farbe

Dringlichkeit mit Puls

Tiefes Rot liegt bei #644E4E und stammt aus der Familie Rot 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 Tiefes Rot (#644E4E) zuerst auf einer neutralen Fläche; ein Akzent aus der Familie Rot lässt es bewusst statt dekorativ wirken.

Beste Verwendung

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

dringlichleidenschaftlichkühnappetitlichwarm

Psychologie

Wahrnehmung

dringlichleidenschaftlichkühnappetitlichwarm

Psychologische Wirkung

Tiefes Rot hebt die wahrgenommene Energie einer Rot-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

EnergieAppetit und Feier

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 Energie, Appetit und Feier; deshalb erscheint es auf Einladungen und in Saisonarbeiten.

Mit Bedacht einsetzen

Zu viel Fläche liest sich als Gefahr und Aggression bei Übernutzung, bleib daher bei Akzenten und kleinen Feldern.

Einsatzorte

Typische Designanwendungen

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

Designhinweise

So gelingt der Einsatz

Kombination

Farben, die es ergänzen

#415A5Aredaktionelle Layouts mit einem warmen Fokuspunkt #332020Interfaces, in denen ein Akzent lesbar bleiben muss #4C5949Verpackungen, die appetitlich wirken sollen, ohne zu schreien

Geschichte

Pigmente und Herkunft

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

Schlagwörter

dringlichleidenschaftlichkühnappetitlichwarmEnergieAppetit und FeierRot

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% #644E4E 10% #5A4646 20% #503E3E 30% #463737 40% #3C2F2F 50% #322727 60% #281F1F 70% #1E1717 80% #141010 90% #0A0808 100% #000000

Aufhellungen

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

0% #644E4E 10% #746060 20% #837171 30% #938383 40% #A29595 50% #B2A7A7 60% #C1B8B8 70% #D1CACA 80% #E0DCDC 90% #F0EDED 100% #FFFFFF

Designskala 50–950

50#FBF3F3 100#F6E9E9 200#E6D4D4 300#D2BDBC 400#BAA3A2 500#9C8484 600#836D6C 700#6B5656 800#534141 900#3B2E2E 950#271E1E

Dark-Mode-Wert (AA): #8E7776 · 4.53: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

黛蓝 CN ΔE 0.022

黯 KR ΔE 0.049

Soga ID ΔE 0.051

Alle anzeigen (6)

मेहंदी IN ΔE 0.064

สีคราม TH ΔE 0.069

茶色 JP ΔE 0.075

Хүрэн MN ΔE 0.083

蓝天 TB ΔE 0.091

Lam VN ΔE 0.095

Designsysteme

Gray 600 Tailwind ΔE 0.003

Gray 600 UnoCSS ΔE 0.004

Gray 600 Panda ΔE 0.004

Alle anzeigen (11)

Gray 600 Chakra ΔE 0.005

Gray 700 Bootstrap ΔE 0.024

Gray 700 Open Color ΔE 0.024

Secondary 40 Material ΔE 0.040

Gray 14 Polaris ΔE 0.048

Foreground muted Primer ΔE 0.049

Sand 11 Radix ΔE 0.056

Yellow 10 Ant Design ΔE 0.064

Web 60 Fluent ΔE 0.085

Secondary StyleX ΔE 0.156

Brand (contract) vanilla-extract ΔE 0.296

RAL Classic

Bronze green · RAL 6031 RAL ΔE 0.008

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.

#644E4E #415A5A

Beste Verwendung: Handlungsaufrufe und Highlights einzelner Funktionen

Split-Komplementär

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

#644E4E #455A51 #435862

Beste Verwendung: Ausgewogene Marketinglayouts mit zwei Akzenten

Triadisch

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

#644E4E #4C5949 #4A5565

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

Analog

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

#614E57 #644E4E #635046

Beste Verwendung: Hintergründe, Diagramme und ruhige Produktseiten

Monochrom

Ein Farbton über Helligkeitsstufen; diszipliniert und hochwertig.

#483838 #644E4E #8F8080

Beste Verwendung: Designsysteme, Verpackungen und typografische Hierarchie

Tetradisch

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

#644E4E #5E5342 #415A5A #4A5565

Beste Verwendung: Komplexe Dashboards und Marken mit mehreren Leistungen

Skala exportieren

CSS

:root {
  --brand-50: #FBF3F3;
  --brand-100: #F6E9E9;
  --brand-200: #E6D4D4;
  --brand-300: #D2BDBC;
  --brand-400: #BAA3A2;
  --brand-500: #9C8484;
  --brand-600: #836D6C;
  --brand-700: #6B5656;
  --brand-800: #534141;
  --brand-900: #3B2E2E;
  --brand-950: #271E1E;
}

Tailwind

theme: {
  extend: {
    colors: {
      brand: {
        50: '#FBF3F3',
        100: '#F6E9E9',
        200: '#E6D4D4',
        300: '#D2BDBC',
        400: '#BAA3A2',
        500: '#9C8484',
        600: '#836D6C',
        700: '#6B5656',
        800: '#534141',
        900: '#3B2E2E',
        950: '#271E1E',
      },
    },
  },
}

Figma

{
  "brand": {
    "50": {
      "$type": "color",
      "$value": "#FBF3F3"
    },
    "100": {
      "$type": "color",
      "$value": "#F6E9E9"
    },
    "200": {
      "$type": "color",
      "$value": "#E6D4D4"
    },
    "300": {
      "$type": "color",
      "$value": "#D2BDBC"
    },
    "400": {
      "$type": "color",
      "$value": "#BAA3A2"
    },
    "500": {
      "$type": "color",
      "$value": "#9C8484"
    },
    "600": {
      "$type": "color",
      "$value": "#836D6C"
    },
    "700": {
      "$type": "color",
      "$value": "#6B5656"
    },
    "800": {
      "$type": "color",
      "$value": "#534141"
    },
    "900": {
      "$type": "color",
      "$value": "#3B2E2E"
    },
    "950": {
      "$type": "color",
      "$value": "#271E1E"
    }
  }
}

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1100" height="120">
  <rect x="0" y="0" width="100" height="90" fill="#FBF3F3"/>
  <rect x="100" y="0" width="100" height="90" fill="#F6E9E9"/>
  <rect x="200" y="0" width="100" height="90" fill="#E6D4D4"/>
  <rect x="300" y="0" width="100" height="90" fill="#D2BDBC"/>
  <rect x="400" y="0" width="100" height="90" fill="#BAA3A2"/>
  <rect x="500" y="0" width="100" height="90" fill="#9C8484"/>
  <rect x="600" y="0" width="100" height="90" fill="#836D6C"/>
  <rect x="700" y="0" width="100" height="90" fill="#6B5656"/>
  <rect x="800" y="0" width="100" height="90" fill="#534141"/>
  <rect x="900" y="0" width="100" height="90" fill="#3B2E2E"/>
  <rect x="1000" y="0" width="100" height="90" fill="#271E1E"/>
  <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.984, green: 0.953, blue: 0.953, alpha: 1.0)
  static let brand100 = UIColor(red: 0.965, green: 0.914, blue: 0.914, alpha: 1.0)
  static let brand200 = UIColor(red: 0.902, green: 0.831, blue: 0.831, alpha: 1.0)
  static let brand300 = UIColor(red: 0.824, green: 0.741, blue: 0.737, alpha: 1.0)
  static let brand400 = UIColor(red: 0.729, green: 0.639, blue: 0.635, alpha: 1.0)
  static let brand500 = UIColor(red: 0.612, green: 0.518, blue: 0.518, alpha: 1.0)
  static let brand600 = UIColor(red: 0.514, green: 0.427, blue: 0.424, alpha: 1.0)
  static let brand700 = UIColor(red: 0.420, green: 0.337, blue: 0.337, alpha: 1.0)
  static let brand800 = UIColor(red: 0.325, green: 0.255, blue: 0.255, alpha: 1.0)
  static let brand900 = UIColor(red: 0.231, green: 0.180, blue: 0.180, alpha: 1.0)
  static let brand950 = UIColor(red: 0.153, green: 0.118, blue: 0.118, alpha: 1.0)
}

Android

<resources>
  <color name="brand_50">#FBF3F3</color>
  <color name="brand_100">#F6E9E9</color>
  <color name="brand_200">#E6D4D4</color>
  <color name="brand_300">#D2BDBC</color>
  <color name="brand_400">#BAA3A2</color>
  <color name="brand_500">#9C8484</color>
  <color name="brand_600">#836D6C</color>
  <color name="brand_700">#6B5656</color>
  <color name="brand_800">#534141</color>
  <color name="brand_900">#3B2E2E</color>
  <color name="brand_950">#271E1E</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

7.66 :1

AAA

Zitat

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

WCAG-Kontrast

Vorschau

Aa / Bb

#644E4E · Tiefes Rot

WCAG-Kontraststandards

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

#644E4E

CSS Color 4

RGB

100,78,78

sRGB / D65

HSL

0,12,35

HSL

OKLCH

oklch(0.447 0.030 18.3)

perceptual

LAB

35,9,4

CIE Lab

LCH

35,10,21

CIE LCH

XYZ

9,9,8

CIE XYZ

LUV

35,13,3

CIE LUV

HWB

0,31,61

CSS HWB

CMYK

0,22,22,61

Praktische Formate

Direkt nutzbare Werte

CSS

color: #644E4E;

custom properties

Tailwind

bg-[#644E4E] text-[#FFF]

arbitrary value

Android

#FF644E4E

ARGB

Flutter

Color(0xFF644E4E)

dart:ui

Photoshop

R 100 G 78 B 78 · C 0 M 22 Y 22 K 61

RGB / CMYK

CMYK 0,22,22,61

FOGRA39

Farbanalyse

Gemessene Farbwerte

Helligkeit

0.087

relative luminance · warm

Kontrast

7.66 : 1

vs white · AAA · warm

Kontrast

2.47 : 1

vs black · FAIL · warm

Farbton

0°

saturation 12% · warm

LCH

35,10,21

lightness 35% · warm

ΔE

15.2

玄色 #3A3A40 · warm

Farbsimulator

Wirkung bei Farbsehschwäche

Wirkung bei Farbsehschwäche · ΔE 15.2