Hotpanda

Palette mit 7 Farben · Neutral · Gemischt · Harmonie: Komplementär

Zurück zur Bibliothek

Hotpanda

Palette mit 7 Farben · Temperatur: Neutral · Ton: Gemischt · Harmonie: Komplementär

Bearbeiten

Lebendig 7 Farben Neutral Gemischt Komplementär bright sexy panda sunny

Likes 75

Farben 7

CSS-Variablen

:root {
  --c-vibrant-1: #C8024F;
  --c-vibrant-2: #FF585F;
  --c-vibrant-3: #FCE4A8;
  --c-vibrant-4: #BED7E9;
  --c-vibrant-5: #0A7E8B;
  --c-vibrant-6: #093A54;
  --c-vibrant-7: #2F2041;
}

Über diese Palette

Diese lebendige Palette mit 7 Farben reicht vom hellsten Ton Lady Banksia (#FCE4A8) bis zum dunkelsten Ton Power Outage (#2F2041). Sie vereint Scarlet Cattleya Orchid, Festive Fennec, Lady Banksia, Light Tidal Foam, Metallic Seaweed, Duskwood und Power Outage in einem Set, das du direkt in deine Benutzeroberfläche übernehmen kannst. Farbpaare in der Palette: 21. Davon erreichen 6 die WCAG-AA-Kontrastschwelle (4,5:1) für Fließtext – am stärksten ist #FCE4A8 auf #2F2041 mit 11,97:1.

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

Farben im Detail

Scarlet Cattleya Orchid #C8024F

RGB: rgb(200, 2, 79)
HSL: hsl(337, 98%, 40%)
Luminanz: 0,129

Festive Fennec #FF585F

RGB: rgb(255, 88, 95)
HSL: hsl(357, 100%, 67%)
Luminanz: 0,291

Lady Banksia #FCE4A8

RGB: rgb(252, 228, 168)
HSL: hsl(43, 93%, 82%)
Luminanz: 0,790

Light Tidal Foam #BED7E9

RGB: rgb(190, 215, 233)
HSL: hsl(205, 49%, 83%)
Luminanz: 0,654

Metallic Seaweed #0A7E8B

RGB: rgb(10, 126, 139)
HSL: hsl(186, 87%, 29%)
Luminanz: 0,169

Duskwood #093A54

RGB: rgb(9, 58, 84)
HSL: hsl(201, 81%, 18%)
Luminanz: 0,037

Power Outage #2F2041

RGB: rgb(47, 32, 65)
HSL: hsl(267, 34%, 19%)
Luminanz: 0,020

Kontrast & Barrierefreiheit

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

Aa #FCE4A8 auf #2F2041 11,97:1 AAA

Aa #BED7E9 auf #2F2041 10,03:1 AAA

Aa #FCE4A8 auf #093A54 9,63:1 AAA

Aa #BED7E9 auf #093A54 8,07:1 AAA

Aa #FF585F auf #2F2041 4,85:1 AA

Aa #C8024F auf #FCE4A8 4,70:1 AA

Aa #C8024F auf #BED7E9 3,94:1 AA (großer Text)

Aa #FF585F auf #093A54 3,90:1 AA (großer Text)

Aa #FCE4A8 auf #0A7E8B 3,84:1 AA (großer Text)

Aa #BED7E9 auf #0A7E8B 3,22:1 AA (großer Text)

Aa #0A7E8B auf #2F2041 3,11:1 AA (großer Text)

Aa #C8024F auf #2F2041 2,55:1 Nicht bestanden

Aa #0A7E8B auf #093A54 2,50:1 Nicht bestanden

Aa #FF585F auf #FCE4A8 2,47:1 Nicht bestanden

Aa #FF585F auf #BED7E9 2,07:1 Nicht bestanden

Aa #C8024F auf #093A54 2,05:1 Nicht bestanden

Aa #C8024F auf #FF585F 1,90:1 Nicht bestanden

Aa #FF585F auf #0A7E8B 1,56:1 Nicht bestanden

Aa #093A54 auf #2F2041 1,24:1 Nicht bestanden

Aa #C8024F auf #0A7E8B 1,22:1 Nicht bestanden

Aa #FCE4A8 auf #BED7E9 1,19:1 Nicht bestanden

Hotpanda

Hotpanda

CSS-Variablen

Über diese Palette

Farben im Detail

Kontrast & Barrierefreiheit

Ähnliche Paletten

Schriftarten

Icons & SVG

Farben

Bilder

CSS-Tools

Entwicklung

Dokumentation

Unternehmen