Melon Tree

Palette mit 8 Farben · Warm · Gemischt · Harmonie: Triadisch

Zurück zur Bibliothek

Melon Tree

Palette mit 8 Farben · Temperatur: Warm · Ton: Gemischt · Harmonie: Triadisch

Bearbeiten

Lebendig 8 Farben Warm Gemischt Triadisch green pink warm brown

Likes 35

Farben 8

CSS-Variablen

:root {
  --c-vibrant-1: #451C22;
  --c-vibrant-2: #61342B;
  --c-vibrant-3: #4B7332;
  --c-vibrant-4: #799E51;
  --c-vibrant-5: #F02259;
  --c-vibrant-6: #FF5C7C;
  --c-vibrant-7: #F78FA5;
  --c-vibrant-8: #FFDAE7;
}

Über diese Palette

Diese lebendige Palette mit 8 Farben reicht vom hellsten Ton Creamy Axolotl (#FFDAE7) bis zum dunkelsten Ton Vino Tinto (#451C22). Sie vereint Vino Tinto, Hairy Heath, Botanical, Tree Frog Green, Strawberry Pop, Watermelon Candy, Unripe Strawberry und Creamy Axolotl in einem Set, das du direkt in deine Benutzeroberfläche übernehmen kannst. Farbpaare in der Palette: 28. Davon erreichen 6 die WCAG-AA-Kontrastschwelle (4,5:1) für Fließtext – am stärksten ist #451C22 auf #FFDAE7 mit 11,4:1.

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

Farben im Detail

Vino Tinto #451C22

RGB: rgb(69, 28, 34)
HSL: hsl(351, 42%, 19%)
Luminanz: 0,022

Hairy Heath #61342B

RGB: rgb(97, 52, 43)
HSL: hsl(10, 39%, 27%)
Luminanz: 0,052

Botanical #4B7332

RGB: rgb(75, 115, 50)
HSL: hsl(97, 39%, 32%)
Luminanz: 0,140

Tree Frog Green #799E51

RGB: rgb(121, 158, 81)
HSL: hsl(89, 32%, 47%)
Luminanz: 0,291

Strawberry Pop #F02259

RGB: rgb(240, 34, 89)
HSL: hsl(344, 87%, 54%)
Luminanz: 0,204

Watermelon Candy #FF5C7C

RGB: rgb(255, 92, 124)
HSL: hsl(348, 100%, 68%)
Luminanz: 0,304

Unripe Strawberry #F78FA5

RGB: rgb(247, 143, 165)
HSL: hsl(347, 87%, 76%)
Luminanz: 0,421

Creamy Axolotl #FFDAE7

RGB: rgb(255, 218, 231)
HSL: hsl(339, 100%, 93%)
Luminanz: 0,772

Kontrast & Barrierefreiheit

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

Aa #451C22 auf #FFDAE7 11,40:1 AAA

Aa #61342B auf #FFDAE7 8,08:1 AAA

Aa #451C22 auf #F78FA5 6,54:1 AA

Aa #451C22 auf #FF5C7C 4,90:1 AA

Aa #451C22 auf #799E51 4,73:1 AA

Aa #61342B auf #F78FA5 4,63:1 AA

Aa #4B7332 auf #FFDAE7 4,33:1 AA (großer Text)

Aa #451C22 auf #F02259 3,52:1 AA (großer Text)

Aa #61342B auf #FF5C7C 3,48:1 AA (großer Text)

Aa #61342B auf #799E51 3,35:1 AA (großer Text)

Aa #F02259 auf #FFDAE7 3,24:1 AA (großer Text)

Aa #451C22 auf #4B7332 2,63:1 Nicht bestanden

Aa #61342B auf #F02259 2,50:1 Nicht bestanden

Aa #4B7332 auf #F78FA5 2,48:1 Nicht bestanden

Aa #799E51 auf #FFDAE7 2,41:1 Nicht bestanden

Aa #FF5C7C auf #FFDAE7 2,32:1 Nicht bestanden

Aa #61342B auf #4B7332 1,87:1 Nicht bestanden

Aa #4B7332 auf #FF5C7C 1,86:1 Nicht bestanden

Aa #F02259 auf #F78FA5 1,86:1 Nicht bestanden

Aa #4B7332 auf #799E51 1,80:1 Nicht bestanden

Aa #F78FA5 auf #FFDAE7 1,74:1 Nicht bestanden

Aa #451C22 auf #61342B 1,41:1 Nicht bestanden

Aa #F02259 auf #FF5C7C 1,39:1 Nicht bestanden

Aa #799E51 auf #F78FA5 1,38:1 Nicht bestanden

Aa #4B7332 auf #F02259 1,34:1 Nicht bestanden

Aa #799E51 auf #F02259 1,34:1 Nicht bestanden

Aa #FF5C7C auf #F78FA5 1,33:1 Nicht bestanden

Aa #799E51 auf #FF5C7C 1,04:1 Nicht bestanden

Melon Tree

Melon Tree

CSS-Variablen

Über diese Palette

Farben im Detail

Kontrast & Barrierefreiheit

Ähnliche Paletten

Schriftarten

Icons & SVG

Farben

Bilder

CSS-Tools

Entwicklung

Dokumentation

Unternehmen