Wet Sandwich

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

Zurück zur Bibliothek

Wet Sandwich

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

Bearbeiten

Lebendig 8 Farben Neutral Gemischt Komplementär 8color sandwich wetsandwich

Likes 33

Farben 8

CSS-Variablen

:root {
  --c-vibrant-1: #11130F;
  --c-vibrant-2: #334460;
  --c-vibrant-3: #0B8B7F;
  --c-vibrant-4: #82F2A8;
  --c-vibrant-5: #E9ECB1;
  --c-vibrant-6: #F69D3A;
  --c-vibrant-7: #85113F;
  --c-vibrant-8: #420854;
}

Über diese Palette

Diese lebendige Palette mit 8 Farben reicht vom hellsten Ton Bottlebrush Blossom (#E9ECB1) bis zum dunkelsten Ton Glimpse Into Space (#11130F). Sie vereint Glimpse Into Space, Spelunking, Porcelain Green, Esper’s Fungus Green, Bottlebrush Blossom, Chat Orange, Manually Pressed Grapes und Clairvoyant in einem Set, das du direkt in deine Benutzeroberfläche übernehmen kannst. Farbpaare in der Palette: 28. Davon erreichen 12 die WCAG-AA-Kontrastschwelle (4,5:1) für Fließtext – am stärksten ist #11130F auf #E9ECB1 mit 15,21:1.

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

Farben im Detail

Glimpse Into Space #11130F

RGB: rgb(17, 19, 15)
HSL: hsl(90, 12%, 7%)
Luminanz: 0,006

Spelunking #334460

RGB: rgb(51, 68, 96)
HSL: hsl(217, 31%, 29%)
Luminanz: 0,057

Porcelain Green #0B8B7F

RGB: rgb(11, 139, 127)
HSL: hsl(174, 85%, 29%)
Luminanz: 0,201

Esper’s Fungus Green #82F2A8

RGB: rgb(130, 242, 168)
HSL: hsl(140, 81%, 73%)
Luminanz: 0,711

Bottlebrush Blossom #E9ECB1

RGB: rgb(233, 236, 177)
HSL: hsl(63, 61%, 81%)
Luminanz: 0,805

Chat Orange #F69D3A

RGB: rgb(246, 157, 58)
HSL: hsl(32, 91%, 60%)
Luminanz: 0,440

Manually Pressed Grapes #85113F

RGB: rgb(133, 17, 63)
HSL: hsl(336, 77%, 29%)
Luminanz: 0,058

Clairvoyant #420854

RGB: rgb(66, 8, 84)
HSL: hsl(286, 83%, 18%)
Luminanz: 0,020

Kontrast & Barrierefreiheit

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

Aa #11130F auf #E9ECB1 15,21:1 AAA

Aa #11130F auf #82F2A8 13,54:1 AAA

Aa #E9ECB1 auf #420854 12,26:1 AAA

Aa #82F2A8 auf #420854 10,91:1 AAA

Aa #11130F auf #F69D3A 8,72:1 AAA

Aa #334460 auf #E9ECB1 8,00:1 AAA

Aa #E9ECB1 auf #85113F 7,96:1 AAA

Aa #334460 auf #82F2A8 7,12:1 AAA

Aa #82F2A8 auf #85113F 7,08:1 AAA

Aa #F69D3A auf #420854 7,03:1 AAA

Aa #334460 auf #F69D3A 4,59:1 AA

Aa #F69D3A auf #85113F 4,56:1 AA

Aa #11130F auf #0B8B7F 4,46:1 AA (großer Text)

Aa #0B8B7F auf #420854 3,60:1 AA (großer Text)

Aa #0B8B7F auf #E9ECB1 3,41:1 AA (großer Text)

Aa #0B8B7F auf #82F2A8 3,03:1 AA (großer Text)

Aa #334460 auf #0B8B7F 2,35:1 Nicht bestanden

Aa #0B8B7F auf #85113F 2,33:1 Nicht bestanden

Aa #0B8B7F auf #F69D3A 1,96:1 Nicht bestanden

Aa #11130F auf #85113F 1,91:1 Nicht bestanden

Aa #11130F auf #334460 1,90:1 Nicht bestanden

Aa #E9ECB1 auf #F69D3A 1,74:1 Nicht bestanden

Aa #82F2A8 auf #F69D3A 1,55:1 Nicht bestanden

Aa #85113F auf #420854 1,54:1 Nicht bestanden

Aa #334460 auf #420854 1,53:1 Nicht bestanden

Aa #11130F auf #420854 1,24:1 Nicht bestanden

Aa #82F2A8 auf #E9ECB1 1,12:1 Nicht bestanden

Aa #334460 auf #85113F 1,01:1 Nicht bestanden

Wet Sandwich

Wet Sandwich

CSS-Variablen

Über diese Palette

Farben im Detail

Kontrast & Barrierefreiheit

Ähnliche Paletten

Schriftarten

Icons & SVG

Farben

Bilder

CSS-Tools

Entwicklung

Dokumentation

Unternehmen