Fruit Salad

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

Zurück zur Bibliothek

Fruit Salad

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

Bearbeiten

Lebendig 12 Farben Kühl Gemischt Komplementär vibrant cold colorful saturated

Likes 18

Farben 12

CSS-Variablen

:root {
  --c-vibrant-1: #003AB0;
  --c-vibrant-2: #49E4FF;
  --c-vibrant-3: #F5EDE1;
  --c-vibrant-4: #706675;
  --c-vibrant-5: #36065B;
  --c-vibrant-6: #8512B6;
  --c-vibrant-7: #0F87D7;
  --c-vibrant-8: #22C93F;
  --c-vibrant-9: #FCCD12;
  --c-vibrant-10: #FF7D12;
  --c-vibrant-11: #C20000;
  --c-vibrant-12: #FA6EFD;
}

Über diese Palette

Diese lebendige Palette mit 12 Farben reicht vom hellsten Ton Milk Star White (#F5EDE1) bis zum dunkelsten Ton Cotinga Purple (#36065B). Sie vereint Royal Azure, Shimmering Expanse Cyan, Milk Star White, Rum, Cotinga Purple, Minesweeper’s Purple, Electron Blue, Walled Garden, Confident Yellow, Orange Popsicle, Free Speech Red und Flamazing Pink in einem Set, das du direkt in deine Benutzeroberfläche übernehmen kannst. Farbpaare in der Palette: 66. Davon erreichen 14 die WCAG-AA-Kontrastschwelle (4,5:1) für Fließtext – am stärksten ist #F5EDE1 auf #36065B mit 13,56:1.

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

Farben im Detail

Royal Azure #003AB0

RGB: rgb(0, 58, 176)
HSL: hsl(220, 100%, 35%)
Luminanz: 0,062

Shimmering Expanse Cyan #49E4FF

RGB: rgb(73, 228, 255)
HSL: hsl(189, 100%, 64%)
Luminanz: 0,641

Milk Star White #F5EDE1

RGB: rgb(245, 237, 225)
HSL: hsl(36, 50%, 92%)
Luminanz: 0,854

Rum #706675

RGB: rgb(112, 102, 117)
HSL: hsl(280, 7%, 43%)
Luminanz: 0,142

Cotinga Purple #36065B

RGB: rgb(54, 6, 91)
HSL: hsl(274, 88%, 19%)
Luminanz: 0,017

Minesweeper’s Purple #8512B6

RGB: rgb(133, 18, 182)
HSL: hsl(282, 82%, 39%)
Luminanz: 0,088

Electron Blue #0F87D7

RGB: rgb(15, 135, 215)
HSL: hsl(204, 87%, 45%)
Luminanz: 0,223

Walled Garden #22C93F

RGB: rgb(34, 201, 63)
HSL: hsl(130, 71%, 46%)
Luminanz: 0,425

Confident Yellow #FCCD12

RGB: rgb(252, 205, 18)
HSL: hsl(48, 98%, 53%)
Luminanz: 0,644

Orange Popsicle #FF7D12

RGB: rgb(255, 125, 18)
HSL: hsl(27, 100%, 54%)
Luminanz: 0,360

Free Speech Red #C20000

RGB: rgb(194, 0, 0)
HSL: hsl(0, 100%, 38%)
Luminanz: 0,115

Flamazing Pink #FA6EFD

RGB: rgb(250, 110, 253)
HSL: hsl(299, 97%, 71%)
Luminanz: 0,386

Kontrast & Barrierefreiheit

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

Aa #F5EDE1 auf #36065B 13,56:1 AAA

Aa #36065B auf #FCCD12 10,41:1 AAA

Aa #49E4FF auf #36065B 10,36:1 AAA

Aa #003AB0 auf #F5EDE1 8,10:1 AAA

Aa #36065B auf #22C93F 7,12:1 AAA

Aa #F5EDE1 auf #8512B6 6,55:1 AA

Aa #36065B auf #FA6EFD 6,53:1 AA

Aa #003AB0 auf #FCCD12 6,22:1 AA

Aa #003AB0 auf #49E4FF 6,19:1 AA

Aa #36065B auf #FF7D12 6,14:1 AA

Aa #F5EDE1 auf #C20000 5,49:1 AA

Aa #8512B6 auf #FCCD12 5,03:1 AA

Aa #49E4FF auf #8512B6 5,01:1 AA

Aa #F5EDE1 auf #706675 4,70:1 AA

Aa #003AB0 auf #22C93F 4,25:1 AA (großer Text)

Aa #FCCD12 auf #C20000 4,21:1 AA (großer Text)

Aa #49E4FF auf #C20000 4,20:1 AA (großer Text)

Aa #36065B auf #0F87D7 4,10:1 AA (großer Text)

Aa #003AB0 auf #FA6EFD 3,90:1 AA (großer Text)

Aa #003AB0 auf #FF7D12 3,67:1 AA (großer Text)

Aa #706675 auf #FCCD12 3,61:1 AA (großer Text)

Aa #49E4FF auf #706675 3,59:1 AA (großer Text)

Aa #8512B6 auf #22C93F 3,44:1 AA (großer Text)

Aa #F5EDE1 auf #0F87D7 3,31:1 AA (großer Text)

Aa #8512B6 auf #FA6EFD 3,16:1 AA (großer Text)

Aa #8512B6 auf #FF7D12 2,97:1 Nicht bestanden

Aa #706675 auf #36065B 2,88:1 Nicht bestanden

Aa #22C93F auf #C20000 2,88:1 Nicht bestanden

Aa #C20000 auf #FA6EFD 2,65:1 Nicht bestanden

Aa #0F87D7 auf #FCCD12 2,54:1 Nicht bestanden

Aa #49E4FF auf #0F87D7 2,53:1 Nicht bestanden

Aa #FF7D12 auf #C20000 2,49:1 Nicht bestanden

Aa #706675 auf #22C93F 2,47:1 Nicht bestanden

Aa #36065B auf #C20000 2,47:1 Nicht bestanden

Aa #003AB0 auf #0F87D7 2,45:1 Nicht bestanden

Aa #706675 auf #FA6EFD 2,27:1 Nicht bestanden

Aa #F5EDE1 auf #FF7D12 2,21:1 Nicht bestanden

Aa #706675 auf #FF7D12 2,13:1 Nicht bestanden

Aa #F5EDE1 auf #FA6EFD 2,08:1 Nicht bestanden

Aa #36065B auf #8512B6 2,07:1 Nicht bestanden

Aa #8512B6 auf #0F87D7 1,98:1 Nicht bestanden

Aa #F5EDE1 auf #22C93F 1,90:1 Nicht bestanden

Aa #0F87D7 auf #22C93F 1,74:1 Nicht bestanden

Aa #003AB0 auf #706675 1,72:1 Nicht bestanden

Aa #49E4FF auf #FF7D12 1,69:1 Nicht bestanden

Aa #FCCD12 auf #FF7D12 1,69:1 Nicht bestanden

Aa #003AB0 auf #36065B 1,67:1 Nicht bestanden

Aa #0F87D7 auf #C20000 1,66:1 Nicht bestanden

Aa #49E4FF auf #FA6EFD 1,59:1 Nicht bestanden

Aa #0F87D7 auf #FA6EFD 1,59:1 Nicht bestanden

Aa #FCCD12 auf #FA6EFD 1,59:1 Nicht bestanden

Aa #0F87D7 auf #FF7D12 1,50:1 Nicht bestanden

Aa #003AB0 auf #C20000 1,48:1 Nicht bestanden

Aa #49E4FF auf #22C93F 1,46:1 Nicht bestanden

Aa #22C93F auf #FCCD12 1,46:1 Nicht bestanden

Aa #706675 auf #0F87D7 1,42:1 Nicht bestanden

Aa #706675 auf #8512B6 1,39:1 Nicht bestanden

Aa #49E4FF auf #F5EDE1 1,31:1 Nicht bestanden

Aa #F5EDE1 auf #FCCD12 1,30:1 Nicht bestanden

Aa #003AB0 auf #8512B6 1,24:1 Nicht bestanden

Aa #8512B6 auf #C20000 1,19:1 Nicht bestanden

Aa #706675 auf #C20000 1,17:1 Nicht bestanden

Aa #22C93F auf #FF7D12 1,16:1 Nicht bestanden

Aa #22C93F auf #FA6EFD 1,09:1 Nicht bestanden

Aa #FF7D12 auf #FA6EFD 1,06:1 Nicht bestanden

Aa #49E4FF auf #FCCD12 1,00:1 Nicht bestanden

Fruit Salad

Fruit Salad

CSS-Variablen

Über diese Palette

Farben im Detail

Kontrast & Barrierefreiheit

Ähnliche Paletten

Schriftarten

Icons & SVG

Farben

Bilder

CSS-Tools

Entwicklung

Dokumentation

Unternehmen