TriRampo

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

Zurück zur Bibliothek

TriRampo

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

Bearbeiten

Lebendig 12 Farben Warm Gemischt Komplementär colorful anubiarts 12 trirampo

Likes 105

Farben 12

CSS-Variablen

:root {
  --c-vibrant-1: #703075;
  --c-vibrant-2: #CC3184;
  --c-vibrant-3: #E87D43;
  --c-vibrant-4: #FFCE6B;
  --c-vibrant-5: #DAF0D1;
  --c-vibrant-6: #5DD477;
  --c-vibrant-7: #25A2A8;
  --c-vibrant-8: #4B56EB;
  --c-vibrant-9: #2F328F;
  --c-vibrant-10: #2C203D;
  --c-vibrant-11: #7A8799;
  --c-vibrant-12: #AEC2C2;
}

Über diese Palette

Diese lebendige Palette mit 12 Farben reicht vom hellsten Ton Blue Romance (#DAF0D1) bis zum dunkelsten Ton Throat (#2C203D). Sie vereint Galactic Grapevine, Shrine of Pleasures, Solar Flare, Faded Sunlight, Blue Romance, Spring Bouquet, Cancer Seagreen Scarab, Qing Dynasty Dragon, Ultramarine Highlight, Throat, Spartan Blue und Dover Surf in einem Set, das du direkt in deine Benutzeroberfläche übernehmen kannst. Farbpaare in der Palette: 66. Davon erreichen 15 die WCAG-AA-Kontrastschwelle (4,5:1) für Fließtext – am stärksten ist #DAF0D1 auf #2C203D mit 12,57:1.

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

Farben im Detail

Galactic Grapevine #703075

RGB: rgb(112, 48, 117)
HSL: hsl(296, 42%, 32%)
Luminanz: 0,068

Shrine of Pleasures #CC3184

RGB: rgb(204, 49, 132)
HSL: hsl(328, 61%, 50%)
Luminanz: 0,167

Solar Flare #E87D43

RGB: rgb(232, 125, 67)
HSL: hsl(21, 78%, 59%)
Luminanz: 0,322

Faded Sunlight #FFCE6B

RGB: rgb(255, 206, 107)
HSL: hsl(40, 100%, 71%)
Luminanz: 0,665

Blue Romance #DAF0D1

RGB: rgb(218, 240, 209)
HSL: hsl(103, 51%, 88%)
Luminanz: 0,818

Spring Bouquet #5DD477

RGB: rgb(93, 212, 119)
HSL: hsl(133, 58%, 60%)
Luminanz: 0,508

Cancer Seagreen Scarab #25A2A8

RGB: rgb(37, 162, 168)
HSL: hsl(183, 64%, 40%)
Luminanz: 0,291

Qing Dynasty Dragon #4B56EB

RGB: rgb(75, 86, 235)
HSL: hsl(236, 80%, 61%)
Luminanz: 0,142

Ultramarine Highlight #2F328F

RGB: rgb(47, 50, 143)
HSL: hsl(238, 51%, 37%)
Luminanz: 0,049

Throat #2C203D

RGB: rgb(44, 32, 61)
HSL: hsl(265, 31%, 18%)
Luminanz: 0,019

Spartan Blue #7A8799

RGB: rgb(122, 135, 153)
HSL: hsl(215, 13%, 54%)
Luminanz: 0,238

Dover Surf #AEC2C2

RGB: rgb(174, 194, 194)
HSL: hsl(180, 14%, 72%)
Luminanz: 0,515

Kontrast & Barrierefreiheit

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

Aa #DAF0D1 auf #2C203D 12,57:1 AAA

Aa #FFCE6B auf #2C203D 10,35:1 AAA

Aa #DAF0D1 auf #2F328F 8,80:1 AAA

Aa #2C203D auf #AEC2C2 8,18:1 AAA

Aa #5DD477 auf #2C203D 8,07:1 AAA

Aa #703075 auf #DAF0D1 7,33:1 AAA

Aa #FFCE6B auf #2F328F 7,24:1 AAA

Aa #703075 auf #FFCE6B 6,03:1 AA

Aa #2F328F auf #AEC2C2 5,72:1 AA

Aa #5DD477 auf #2F328F 5,65:1 AA

Aa #E87D43 auf #2C203D 5,39:1 AA

Aa #25A2A8 auf #2C203D 4,93:1 AA

Aa #703075 auf #AEC2C2 4,77:1 AA

Aa #703075 auf #5DD477 4,71:1 AA

Aa #DAF0D1 auf #4B56EB 4,53:1 AA

Aa #2C203D auf #7A8799 4,17:1 AA (großer Text)

Aa #CC3184 auf #DAF0D1 4,00:1 AA (großer Text)

Aa #E87D43 auf #2F328F 3,77:1 AA (großer Text)

Aa #FFCE6B auf #4B56EB 3,73:1 AA (großer Text)

Aa #25A2A8 auf #2F328F 3,45:1 AA (großer Text)

Aa #CC3184 auf #FFCE6B 3,29:1 AA (großer Text)

Aa #703075 auf #E87D43 3,14:1 AA (großer Text)

Aa #CC3184 auf #2C203D 3,14:1 AA (großer Text)

Aa #DAF0D1 auf #7A8799 3,02:1 AA (großer Text)

Aa #4B56EB auf #AEC2C2 2,95:1 Nicht bestanden

Aa #5DD477 auf #4B56EB 2,91:1 Nicht bestanden

Aa #2F328F auf #7A8799 2,91:1 Nicht bestanden

Aa #703075 auf #25A2A8 2,88:1 Nicht bestanden

Aa #4B56EB auf #2C203D 2,77:1 Nicht bestanden

Aa #CC3184 auf #AEC2C2 2,60:1 Nicht bestanden

Aa #CC3184 auf #5DD477 2,57:1 Nicht bestanden

Aa #DAF0D1 auf #25A2A8 2,55:1 Nicht bestanden

Aa #FFCE6B auf #7A8799 2,48:1 Nicht bestanden

Aa #703075 auf #7A8799 2,43:1 Nicht bestanden

Aa #E87D43 auf #DAF0D1 2,33:1 Nicht bestanden

Aa #CC3184 auf #2F328F 2,20:1 Nicht bestanden

Aa #FFCE6B auf #25A2A8 2,10:1 Nicht bestanden

Aa #7A8799 auf #AEC2C2 1,96:1 Nicht bestanden

Aa #E87D43 auf #4B56EB 1,94:1 Nicht bestanden

Aa #5DD477 auf #7A8799 1,94:1 Nicht bestanden

Aa #4B56EB auf #2F328F 1,94:1 Nicht bestanden

Aa #E87D43 auf #FFCE6B 1,92:1 Nicht bestanden

Aa #703075 auf #CC3184 1,83:1 Nicht bestanden

Aa #25A2A8 auf #4B56EB 1,78:1 Nicht bestanden

Aa #703075 auf #2C203D 1,72:1 Nicht bestanden

Aa #CC3184 auf #E87D43 1,72:1 Nicht bestanden

Aa #25A2A8 auf #AEC2C2 1,66:1 Nicht bestanden

Aa #5DD477 auf #25A2A8 1,64:1 Nicht bestanden

Aa #703075 auf #4B56EB 1,62:1 Nicht bestanden

Aa #CC3184 auf #25A2A8 1,57:1 Nicht bestanden

Aa #DAF0D1 auf #5DD477 1,56:1 Nicht bestanden

Aa #DAF0D1 auf #AEC2C2 1,54:1 Nicht bestanden

Aa #E87D43 auf #AEC2C2 1,52:1 Nicht bestanden

Aa #E87D43 auf #5DD477 1,50:1 Nicht bestanden

Aa #4B56EB auf #7A8799 1,50:1 Nicht bestanden

Aa #2F328F auf #2C203D 1,43:1 Nicht bestanden

Aa #CC3184 auf #7A8799 1,33:1 Nicht bestanden

Aa #E87D43 auf #7A8799 1,29:1 Nicht bestanden

Aa #FFCE6B auf #5DD477 1,28:1 Nicht bestanden

Aa #FFCE6B auf #AEC2C2 1,27:1 Nicht bestanden

Aa #FFCE6B auf #DAF0D1 1,22:1 Nicht bestanden

Aa #703075 auf #2F328F 1,20:1 Nicht bestanden

Aa #25A2A8 auf #7A8799 1,18:1 Nicht bestanden

Aa #CC3184 auf #4B56EB 1,13:1 Nicht bestanden

Aa #E87D43 auf #25A2A8 1,09:1 Nicht bestanden

Aa #5DD477 auf #AEC2C2 1,01:1 Nicht bestanden

TriRampo

TriRampo

CSS-Variablen

Über diese Palette

Farben im Detail

Kontrast & Barrierefreiheit

Ähnliche Paletten

Schriftarten

Icons & SVG

Farben

Bilder

CSS-Tools

Entwicklung

Dokumentation

Unternehmen