Haretro8

Palette mit 8 Farben · Warm · Gemischt · Harmonie: Komplementär

Zurück zur Bibliothek

Haretro8

Palette mit 8 Farben · Temperatur: Warm · Ton: Gemischt · Harmonie: Komplementär

Bearbeiten

Lebendig 8 Farben Warm Gemischt Komplementär artist haretro

Likes 12

Farben 8

CSS-Variablen

:root {
  --c-vibrant-1: #FFE6D2;
  --c-vibrant-2: #FFB400;
  --c-vibrant-3: #32B4FF;
  --c-vibrant-4: #0AC832;
  --c-vibrant-5: #CC66CC;
  --c-vibrant-6: #C73B32;
  --c-vibrant-7: #995F3D;
  --c-vibrant-8: #1E2832;
}

Über diese Palette

Diese lebendige Palette mit 8 Farben reicht vom hellsten Ton Mood Lighting (#FFE6D2) bis zum dunkelsten Ton Abyssal Anchorfish Blue (#1E2832). Sie vereint Mood Lighting, UCLA Gold, Fantasy Console Sky, Vivid Malachite, Purple Urn Orchid, Stop, Harrison Rust und Abyssal Anchorfish Blue in einem Set, das du direkt in deine Benutzeroberfläche übernehmen kannst. Farbpaare in der Palette: 28. Davon erreichen 5 die WCAG-AA-Kontrastschwelle (4,5:1) für Fließtext – am stärksten ist #FFE6D2 auf #1E2832 mit 12,46:1.

Eine vielseitige Palette für Marketingseiten, Hero-Blöcke von Produkten, Illustrationen und Akzentzustände in der UI.

Farben im Detail

Mood Lighting #FFE6D2

RGB: rgb(255, 230, 210)
HSL: hsl(27, 100%, 91%)
Luminanz: 0,825

UCLA Gold #FFB400

RGB: rgb(255, 180, 0)
HSL: hsl(42, 100%, 50%)
Luminanz: 0,539

Fantasy Console Sky #32B4FF

RGB: rgb(50, 180, 255)
HSL: hsl(202, 100%, 60%)
Luminanz: 0,405

Vivid Malachite #0AC832

RGB: rgb(10, 200, 50)
HSL: hsl(133, 90%, 41%)
Luminanz: 0,416

Purple Urn Orchid #CC66CC

RGB: rgb(204, 102, 204)
HSL: hsl(300, 50%, 60%)
Luminanz: 0,267

Stop #C73B32

RGB: rgb(199, 59, 50)
HSL: hsl(4, 60%, 49%)
Luminanz: 0,155

Harrison Rust #995F3D

RGB: rgb(153, 95, 61)
HSL: hsl(22, 43%, 42%)
Luminanz: 0,153

Abyssal Anchorfish Blue #1E2832

RGB: rgb(30, 40, 50)
HSL: hsl(210, 25%, 16%)
Luminanz: 0,020

Kontrast & Barrierefreiheit

5 von 28 Farbpaaren erreichen die WCAG-AA-Kontrastschwelle (4,5:1) für Fließtext.

Aa #FFE6D2 auf #1E2832 12,46:1 AAA

Aa #FFB400 auf #1E2832 8,39:1 AAA

Aa #0AC832 auf #1E2832 6,63:1 AA

Aa #32B4FF auf #1E2832 6,48:1 AA

Aa #CC66CC auf #1E2832 4,51:1 AA

Aa #FFE6D2 auf #995F3D 4,31:1 AA (großer Text)

Aa #FFE6D2 auf #C73B32 4,27:1 AA (großer Text)

Aa #C73B32 auf #1E2832 2,92:1 Nicht bestanden

Aa #FFB400 auf #995F3D 2,90:1 Nicht bestanden

Aa #995F3D auf #1E2832 2,89:1 Nicht bestanden

Aa #FFB400 auf #C73B32 2,87:1 Nicht bestanden

Aa #FFE6D2 auf #CC66CC 2,76:1 Nicht bestanden

Aa #0AC832 auf #995F3D 2,30:1 Nicht bestanden

Aa #0AC832 auf #C73B32 2,27:1 Nicht bestanden

Aa #32B4FF auf #995F3D 2,24:1 Nicht bestanden

Aa #32B4FF auf #C73B32 2,22:1 Nicht bestanden

Aa #FFE6D2 auf #32B4FF 1,92:1 Nicht bestanden

Aa #FFE6D2 auf #0AC832 1,88:1 Nicht bestanden

Aa #FFB400 auf #CC66CC 1,86:1 Nicht bestanden

Aa #CC66CC auf #995F3D 1,56:1 Nicht bestanden

Aa #CC66CC auf #C73B32 1,55:1 Nicht bestanden

Aa #FFE6D2 auf #FFB400 1,49:1 Nicht bestanden

Aa #0AC832 auf #CC66CC 1,47:1 Nicht bestanden

Aa #32B4FF auf #CC66CC 1,44:1 Nicht bestanden

Aa #FFB400 auf #32B4FF 1,29:1 Nicht bestanden

Aa #FFB400 auf #0AC832 1,26:1 Nicht bestanden

Aa #32B4FF auf #0AC832 1,02:1 Nicht bestanden

Aa #C73B32 auf #995F3D 1,01:1 Nicht bestanden

Haretro8

Haretro8

CSS-Variablen

Über diese Palette

Farben im Detail

Kontrast & Barrierefreiheit

Ähnliche Paletten

Schriftarten

Icons & SVG

Farben

Bilder

CSS-Tools

Entwicklung

Dokumentation

Unternehmen