Duo5

Palette mit 8 Farben · Kühl · Gemischt · Harmonie: Komplementär

Zurück zur Bibliothek

Duo5

Palette mit 8 Farben · Temperatur: Kühl · Ton: Gemischt · Harmonie: Komplementär

Bearbeiten

Lebendig 8 Farben Kühl Gemischt Komplementär red blue colorful 8

Likes 18

Farben 8

CSS-Variablen

:root {
  --c-vibrant-1: #210E30;
  --c-vibrant-2: #363E99;
  --c-vibrant-3: #77AEE2;
  --c-vibrant-4: #B4DFF3;
  --c-vibrant-5: #F1F6F7;
  --c-vibrant-6: #FFC7AE;
  --c-vibrant-7: #FF8B7B;
  --c-vibrant-8: #C12E47;
}

Über diese Palette

Diese lebendige Palette mit 8 Farben reicht vom hellsten Ton Child of Light (#F1F6F7) bis zum dunkelsten Ton Blacklist (#210E30). Sie vereint Blacklist, Liquid Denim, Lucea, Echo Iris, Child of Light, Antique Coral, Play ’til Dawn und Bleeding Heart in einem Set, das du direkt in deine Benutzeroberfläche übernehmen kannst. Farbpaare in der Palette: 28. Davon erreichen 9 die WCAG-AA-Kontrastschwelle (4,5:1) für Fließtext – am stärksten ist #210E30 auf #F1F6F7 mit 16,46:1.

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

Farben im Detail

Blacklist #210E30

RGB: rgb(33, 14, 48)
HSL: hsl(274, 55%, 12%)
Luminanz: 0,009

Liquid Denim #363E99

RGB: rgb(54, 62, 153)
HSL: hsl(235, 48%, 41%)
Luminanz: 0,065

Lucea #77AEE2

RGB: rgb(119, 174, 226)
HSL: hsl(209, 65%, 68%)
Luminanz: 0,397

Echo Iris #B4DFF3

RGB: rgb(180, 223, 243)
HSL: hsl(199, 72%, 83%)
Luminanz: 0,690

Child of Light #F1F6F7

RGB: rgb(241, 246, 247)
HSL: hsl(190, 27%, 96%)
Luminanz: 0,913

Antique Coral #FFC7AE

RGB: rgb(255, 199, 174)
HSL: hsl(19, 100%, 84%)
Luminanz: 0,652

Play ’til Dawn #FF8B7B

RGB: rgb(255, 139, 123)
HSL: hsl(7, 100%, 74%)
Luminanz: 0,412

Bleeding Heart #C12E47

RGB: rgb(193, 46, 71)
HSL: hsl(350, 62%, 47%)
Luminanz: 0,138

Kontrast & Barrierefreiheit

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

Aa #210E30 auf #F1F6F7 16,46:1 AAA

Aa #210E30 auf #B4DFF3 12,64:1 AAA

Aa #210E30 auf #FFC7AE 11,99:1 AAA

Aa #363E99 auf #F1F6F7 8,35:1 AAA

Aa #210E30 auf #FF8B7B 7,89:1 AAA

Aa #210E30 auf #77AEE2 7,64:1 AAA

Aa #363E99 auf #B4DFF3 6,41:1 AA

Aa #363E99 auf #FFC7AE 6,09:1 AA

Aa #F1F6F7 auf #C12E47 5,14:1 AA

Aa #363E99 auf #FF8B7B 4,00:1 AA (großer Text)

Aa #B4DFF3 auf #C12E47 3,94:1 AA (großer Text)

Aa #363E99 auf #77AEE2 3,88:1 AA (großer Text)

Aa #FFC7AE auf #C12E47 3,74:1 AA (großer Text)

Aa #210E30 auf #C12E47 3,20:1 AA (großer Text)

Aa #FF8B7B auf #C12E47 2,46:1 Nicht bestanden

Aa #77AEE2 auf #C12E47 2,38:1 Nicht bestanden

Aa #77AEE2 auf #F1F6F7 2,16:1 Nicht bestanden

Aa #F1F6F7 auf #FF8B7B 2,09:1 Nicht bestanden

Aa #210E30 auf #363E99 1,97:1 Nicht bestanden

Aa #77AEE2 auf #B4DFF3 1,65:1 Nicht bestanden

Aa #363E99 auf #C12E47 1,63:1 Nicht bestanden

Aa #B4DFF3 auf #FF8B7B 1,60:1 Nicht bestanden

Aa #77AEE2 auf #FFC7AE 1,57:1 Nicht bestanden

Aa #FFC7AE auf #FF8B7B 1,52:1 Nicht bestanden

Aa #F1F6F7 auf #FFC7AE 1,37:1 Nicht bestanden

Aa #B4DFF3 auf #F1F6F7 1,30:1 Nicht bestanden

Aa #B4DFF3 auf #FFC7AE 1,05:1 Nicht bestanden

Aa #77AEE2 auf #FF8B7B 1,03:1 Nicht bestanden

Duo5

Duo5

CSS-Variablen

Über diese Palette

Farben im Detail

Kontrast & Barrierefreiheit

Ähnliche Paletten

Schriftarten

Icons & SVG

Farben

Bilder

CSS-Tools

Entwicklung

Dokumentation

Unternehmen