Mayhaps

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

Zurück zur Bibliothek

Mayhaps

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

Bearbeiten

Lebendig 8 Farben Kühl Gemischt Komplementär vibrant fun hard biff

Likes 46

Farben 8

CSS-Variablen

:root {
  --c-vibrant-1: #FFFCFB;
  --c-vibrant-2: #DDE452;
  --c-vibrant-3: #F15025;
  --c-vibrant-4: #833B62;
  --c-vibrant-5: #092327;
  --c-vibrant-6: #6DB1BF;
  --c-vibrant-7: #52A1B2;
  --c-vibrant-8: #3891A6;
}

Über diese Palette

Diese lebendige Palette mit 8 Farben reicht vom hellsten Ton Flawed White (#FFFCFB) bis zum dunkelsten Ton Teal Spill (#092327). Sie vereint Flawed White, Maximum Green Yellow, Hot Shot, Berry Patch, Teal Spill, Water Music, Maui Blue und Blue Moon in einem Set, das du direkt in deine Benutzeroberfläche übernehmen kannst. Farbpaare in der Palette: 28. Davon erreichen 8 die WCAG-AA-Kontrastschwelle (4,5:1) für Fließtext – am stärksten ist #FFFCFB auf #092327 mit 16,05:1.

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

Farben im Detail

Flawed White #FFFCFB

RGB: rgb(255, 252, 251)
HSL: hsl(15, 100%, 99%)
Luminanz: 0,979

Maximum Green Yellow #DDE452

RGB: rgb(221, 228, 82)
HSL: hsl(63, 73%, 61%)
Luminanz: 0,715

Hot Shot #F15025

RGB: rgb(241, 80, 37)
HSL: hsl(13, 88%, 55%)
Luminanz: 0,246

Berry Patch #833B62

RGB: rgb(131, 59, 98)
HSL: hsl(328, 38%, 37%)
Luminanz: 0,088

Teal Spill #092327

RGB: rgb(9, 35, 39)
HSL: hsl(188, 63%, 9%)
Luminanz: 0,014

Water Music #6DB1BF

RGB: rgb(109, 177, 191)
HSL: hsl(190, 39%, 59%)
Luminanz: 0,385

Maui Blue #52A1B2

RGB: rgb(82, 161, 178)
HSL: hsl(191, 38%, 51%)
Luminanz: 0,305

Blue Moon #3891A6

RGB: rgb(56, 145, 166)
HSL: hsl(191, 50%, 44%)
Luminanz: 0,238

Kontrast & Barrierefreiheit

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

Aa #FFFCFB auf #092327 16,05:1 AAA

Aa #DDE452 auf #092327 11,94:1 AAA

Aa #FFFCFB auf #833B62 7,43:1 AAA

Aa #092327 auf #6DB1BF 6,78:1 AA

Aa #092327 auf #52A1B2 5,54:1 AA

Aa #DDE452 auf #833B62 5,53:1 AA

Aa #F15025 auf #092327 4,62:1 AA

Aa #092327 auf #3891A6 4,50:1 AA

Aa #FFFCFB auf #3891A6 3,57:1 AA (großer Text)

Aa #FFFCFB auf #F15025 3,48:1 AA (großer Text)

Aa #833B62 auf #6DB1BF 3,14:1 AA (großer Text)

Aa #FFFCFB auf #52A1B2 2,90:1 Nicht bestanden

Aa #DDE452 auf #3891A6 2,65:1 Nicht bestanden

Aa #DDE452 auf #F15025 2,59:1 Nicht bestanden

Aa #833B62 auf #52A1B2 2,57:1 Nicht bestanden

Aa #FFFCFB auf #6DB1BF 2,37:1 Nicht bestanden

Aa #833B62 auf #092327 2,16:1 Nicht bestanden

Aa #DDE452 auf #52A1B2 2,15:1 Nicht bestanden

Aa #F15025 auf #833B62 2,14:1 Nicht bestanden

Aa #833B62 auf #3891A6 2,08:1 Nicht bestanden

Aa #DDE452 auf #6DB1BF 1,76:1 Nicht bestanden

Aa #6DB1BF auf #3891A6 1,51:1 Nicht bestanden

Aa #F15025 auf #6DB1BF 1,47:1 Nicht bestanden

Aa #FFFCFB auf #DDE452 1,34:1 Nicht bestanden

Aa #52A1B2 auf #3891A6 1,23:1 Nicht bestanden

Aa #6DB1BF auf #52A1B2 1,22:1 Nicht bestanden

Aa #F15025 auf #52A1B2 1,20:1 Nicht bestanden

Aa #F15025 auf #3891A6 1,03:1 Nicht bestanden

Mayhaps

Mayhaps

CSS-Variablen

Über diese Palette

Farben im Detail

Kontrast & Barrierefreiheit

Ähnliche Paletten

Schriftarten

Icons & SVG

Farben

Bilder

CSS-Tools

Entwicklung

Dokumentation

Unternehmen