Sea&lava

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

Zurück zur Bibliothek

Sea&lava

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

Bearbeiten

Lebendig 9 Farben Warm Gemischt Komplementär vibrant colorful tropical sealava

Likes 25

Farben 9

CSS-Variablen

:root {
  --c-vibrant-1: #105189;
  --c-vibrant-2: #3C7C9A;
  --c-vibrant-3: #6EA096;
  --c-vibrant-4: #BEAE64;
  --c-vibrant-5: #FFBC42;
  --c-vibrant-6: #F69248;
  --c-vibrant-7: #EB5B42;
  --c-vibrant-8: #CB203C;
  --c-vibrant-9: #891545;
}

Über diese Palette

Diese lebendige Palette mit 9 Farben reicht vom hellsten Ton Pale Marigold (#FFBC42) bis zum dunkelsten Ton Akuma’s Fury (#891545). Sie vereint Lake Baikal, Blue Dart Frog, Jade Dragon, Riesling Grape, Pale Marigold, Fall River, Opal Flame, Karakurenai Red und Akuma’s Fury in einem Set, das du direkt in deine Benutzeroberfläche übernehmen kannst. Farbpaare in der Palette: 36. Davon erreichen 2 die WCAG-AA-Kontrastschwelle (4,5:1) für Fließtext – am stärksten ist #FFBC42 auf #891545 mit 5,55:1.

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

Farben im Detail

Lake Baikal #105189

RGB: rgb(16, 81, 137)
HSL: hsl(208, 79%, 30%)
Luminanz: 0,078

Blue Dart Frog #3C7C9A

RGB: rgb(60, 124, 154)
HSL: hsl(199, 44%, 42%)
Luminanz: 0,177

Jade Dragon #6EA096

RGB: rgb(110, 160, 150)
HSL: hsl(168, 21%, 53%)
Luminanz: 0,307

Riesling Grape #BEAE64

RGB: rgb(190, 174, 100)
HSL: hsl(49, 41%, 57%)
Luminanz: 0,421

Pale Marigold #FFBC42

RGB: rgb(255, 188, 66)
HSL: hsl(39, 100%, 63%)
Luminanz: 0,576

Fall River #F69248

RGB: rgb(246, 146, 72)
HSL: hsl(26, 91%, 62%)
Luminanz: 0,406

Opal Flame #EB5B42

RGB: rgb(235, 91, 66)
HSL: hsl(9, 81%, 59%)
Luminanz: 0,255

Karakurenai Red #CB203C

RGB: rgb(203, 32, 60)
HSL: hsl(350, 73%, 46%)
Luminanz: 0,141

Akuma’s Fury #891545

RGB: rgb(137, 21, 69)
HSL: hsl(335, 73%, 31%)
Luminanz: 0,063

Kontrast & Barrierefreiheit

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

Aa #FFBC42 auf #891545 5,55:1 AA

Aa #105189 auf #FFBC42 4,89:1 AA

Aa #BEAE64 auf #891545 4,18:1 AA (großer Text)

Aa #F69248 auf #891545 4,04:1 AA (großer Text)

Aa #105189 auf #BEAE64 3,68:1 AA (großer Text)

Aa #105189 auf #F69248 3,56:1 AA (großer Text)

Aa #FFBC42 auf #CB203C 3,29:1 AA (großer Text)

Aa #6EA096 auf #891545 3,16:1 AA (großer Text)

Aa #105189 auf #6EA096 2,79:1 Nicht bestanden

Aa #3C7C9A auf #FFBC42 2,76:1 Nicht bestanden

Aa #EB5B42 auf #891545 2,71:1 Nicht bestanden

Aa #BEAE64 auf #CB203C 2,47:1 Nicht bestanden

Aa #105189 auf #EB5B42 2,39:1 Nicht bestanden

Aa #F69248 auf #CB203C 2,39:1 Nicht bestanden

Aa #3C7C9A auf #BEAE64 2,08:1 Nicht bestanden

Aa #FFBC42 auf #EB5B42 2,05:1 Nicht bestanden

Aa #3C7C9A auf #F69248 2,01:1 Nicht bestanden

Aa #3C7C9A auf #891545 2,01:1 Nicht bestanden

Aa #6EA096 auf #CB203C 1,87:1 Nicht bestanden

Aa #105189 auf #3C7C9A 1,77:1 Nicht bestanden

Aa #6EA096 auf #FFBC42 1,76:1 Nicht bestanden

Aa #CB203C auf #891545 1,69:1 Nicht bestanden

Aa #EB5B42 auf #CB203C 1,60:1 Nicht bestanden

Aa #3C7C9A auf #6EA096 1,57:1 Nicht bestanden

Aa #BEAE64 auf #EB5B42 1,54:1 Nicht bestanden

Aa #105189 auf #CB203C 1,49:1 Nicht bestanden

Aa #F69248 auf #EB5B42 1,49:1 Nicht bestanden

Aa #FFBC42 auf #F69248 1,37:1 Nicht bestanden

Aa #3C7C9A auf #EB5B42 1,34:1 Nicht bestanden

Aa #BEAE64 auf #FFBC42 1,33:1 Nicht bestanden

Aa #6EA096 auf #BEAE64 1,32:1 Nicht bestanden

Aa #6EA096 auf #F69248 1,28:1 Nicht bestanden

Aa #3C7C9A auf #CB203C 1,19:1 Nicht bestanden

Aa #6EA096 auf #EB5B42 1,17:1 Nicht bestanden

Aa #105189 auf #891545 1,13:1 Nicht bestanden

Aa #BEAE64 auf #F69248 1,03:1 Nicht bestanden

Sea&lava

Sea&lava

CSS-Variablen

Über diese Palette

Farben im Detail

Kontrast & Barrierefreiheit

Ähnliche Paletten

Schriftarten

Icons & SVG

Farben

Bilder

CSS-Tools

Entwicklung

Dokumentation

Unternehmen