Bornana 12

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

Zurück zur Bibliothek

Bornana 12

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

Bearbeiten

Lebendig 12 Farben Kühl Gemischt Komplementär orange yellow neon yedamameday

Likes 90

Farben 12

CSS-Variablen

:root {
  --c-vibrant-1: #EAF257;
  --c-vibrant-2: #8FCC49;
  --c-vibrant-3: #2DAD6B;
  --c-vibrant-4: #19705A;
  --c-vibrant-5: #031B30;
  --c-vibrant-6: #01061C;
  --c-vibrant-7: #FDFFCF;
  --c-vibrant-8: #E6C081;
  --c-vibrant-9: #E8985F;
  --c-vibrant-10: #B52D6D;
  --c-vibrant-11: #780E6F;
  --c-vibrant-12: #2C033B;
}

Über diese Palette

Diese lebendige Palette mit 12 Farben reicht vom hellsten Ton Ice Yellow (#FDFFCF) bis zum dunkelsten Ton Melanophobia (#01061C). Sie vereint Gargantua, Lone Hunter, Jade Powder, Sparkling Emerald, Oxford by Night, Melanophobia, Ice Yellow, Oats and Honey, Topaz Yellow, Hibiscus, Purple Curse und Midnight Purple in einem Set, das du direkt in deine Benutzeroberfläche übernehmen kannst. Farbpaare in der Palette: 66. Davon erreichen 26 die WCAG-AA-Kontrastschwelle (4,5:1) für Fließtext – am stärksten ist #01061C auf #FDFFCF mit 19,52:1.

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

Farben im Detail

Gargantua #EAF257

RGB: rgb(234, 242, 87)
HSL: hsl(63, 86%, 65%)
Luminanz: 0,817

Lone Hunter #8FCC49

RGB: rgb(143, 204, 73)
HSL: hsl(88, 56%, 54%)
Luminanz: 0,495

Jade Powder #2DAD6B

RGB: rgb(45, 173, 107)
HSL: hsl(149, 59%, 43%)
Luminanz: 0,315

Sparkling Emerald #19705A

RGB: rgb(25, 112, 90)
HSL: hsl(165, 64%, 27%)
Luminanz: 0,125

Oxford by Night #031B30

RGB: rgb(3, 27, 48)
HSL: hsl(208, 88%, 10%)
Luminanz: 0,010

Melanophobia #01061C

RGB: rgb(1, 6, 28)
HSL: hsl(229, 93%, 6%)
Luminanz: 0,002

Ice Yellow #FDFFCF

RGB: rgb(253, 255, 207)
HSL: hsl(63, 100%, 91%)
Luminanz: 0,969

Oats and Honey #E6C081

RGB: rgb(230, 192, 129)
HSL: hsl(37, 67%, 70%)
Luminanz: 0,561

Topaz Yellow #E8985F

RGB: rgb(232, 152, 95)
HSL: hsl(25, 75%, 64%)
Luminanz: 0,404

Hibiscus #B52D6D

RGB: rgb(181, 45, 109)
HSL: hsl(332, 60%, 44%)
Luminanz: 0,128

Purple Curse #780E6F

RGB: rgb(120, 14, 111)
HSL: hsl(305, 79%, 26%)
Luminanz: 0,055

Midnight Purple #2C033B

RGB: rgb(44, 3, 59)
HSL: hsl(284, 90%, 12%)
Luminanz: 0,009

Kontrast & Barrierefreiheit

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

Aa #01061C auf #FDFFCF 19,52:1 AAA

Aa #FDFFCF auf #2C033B 17,22:1 AAA

Aa #031B30 auf #FDFFCF 16,94:1 AAA

Aa #EAF257 auf #01061C 16,60:1 AAA

Aa #EAF257 auf #2C033B 14,65:1 AAA

Aa #EAF257 auf #031B30 14,41:1 AAA

Aa #01061C auf #E6C081 11,71:1 AAA

Aa #8FCC49 auf #01061C 10,44:1 AAA

Aa #E6C081 auf #2C033B 10,33:1 AAA

Aa #031B30 auf #E6C081 10,16:1 AAA

Aa #FDFFCF auf #780E6F 9,75:1 AAA

Aa #8FCC49 auf #2C033B 9,21:1 AAA

Aa #8FCC49 auf #031B30 9,06:1 AAA

Aa #01061C auf #E8985F 8,70:1 AAA

Aa #EAF257 auf #780E6F 8,29:1 AAA

Aa #E8985F auf #2C033B 7,68:1 AAA

Aa #031B30 auf #E8985F 7,55:1 AAA

Aa #2DAD6B auf #01061C 6,99:1 AA

Aa #2DAD6B auf #2C033B 6,17:1 AA

Aa #2DAD6B auf #031B30 6,07:1 AA

Aa #E6C081 auf #780E6F 5,84:1 AA

Aa #19705A auf #FDFFCF 5,81:1 AA

Aa #FDFFCF auf #B52D6D 5,72:1 AA

Aa #8FCC49 auf #780E6F 5,21:1 AA

Aa #EAF257 auf #19705A 4,94:1 AA

Aa #EAF257 auf #B52D6D 4,87:1 AA

Aa #E8985F auf #780E6F 4,35:1 AA (großer Text)

Aa #2DAD6B auf #780E6F 3,49:1 AA (großer Text)

Aa #19705A auf #E6C081 3,49:1 AA (großer Text)

Aa #E6C081 auf #B52D6D 3,43:1 AA (großer Text)

Aa #01061C auf #B52D6D 3,41:1 AA (großer Text)

Aa #19705A auf #01061C 3,36:1 AA (großer Text)

Aa #8FCC49 auf #19705A 3,11:1 AA (großer Text)

Aa #8FCC49 auf #B52D6D 3,06:1 AA (großer Text)

Aa #B52D6D auf #2C033B 3,01:1 AA (großer Text)

Aa #19705A auf #2C033B 2,96:1 Nicht bestanden

Aa #031B30 auf #B52D6D 2,96:1 Nicht bestanden

Aa #19705A auf #031B30 2,91:1 Nicht bestanden

Aa #2DAD6B auf #FDFFCF 2,79:1 Nicht bestanden

Aa #19705A auf #E8985F 2,59:1 Nicht bestanden

Aa #E8985F auf #B52D6D 2,55:1 Nicht bestanden

Aa #EAF257 auf #2DAD6B 2,37:1 Nicht bestanden

Aa #FDFFCF auf #E8985F 2,24:1 Nicht bestanden

Aa #2DAD6B auf #19705A 2,08:1 Nicht bestanden

Aa #2DAD6B auf #B52D6D 2,05:1 Nicht bestanden

Aa #01061C auf #780E6F 2,00:1 Nicht bestanden

Aa #EAF257 auf #E8985F 1,91:1 Nicht bestanden

Aa #8FCC49 auf #FDFFCF 1,87:1 Nicht bestanden

Aa #780E6F auf #2C033B 1,77:1 Nicht bestanden

Aa #031B30 auf #780E6F 1,74:1 Nicht bestanden

Aa #B52D6D auf #780E6F 1,70:1 Nicht bestanden

Aa #19705A auf #780E6F 1,68:1 Nicht bestanden

Aa #2DAD6B auf #E6C081 1,67:1 Nicht bestanden

Aa #FDFFCF auf #E6C081 1,67:1 Nicht bestanden

Aa #EAF257 auf #8FCC49 1,59:1 Nicht bestanden

Aa #8FCC49 auf #2DAD6B 1,49:1 Nicht bestanden

Aa #EAF257 auf #E6C081 1,42:1 Nicht bestanden

Aa #E6C081 auf #E8985F 1,34:1 Nicht bestanden

Aa #2DAD6B auf #E8985F 1,24:1 Nicht bestanden

Aa #8FCC49 auf #E8985F 1,20:1 Nicht bestanden

Aa #EAF257 auf #FDFFCF 1,18:1 Nicht bestanden

Aa #031B30 auf #01061C 1,15:1 Nicht bestanden

Aa #01061C auf #2C033B 1,13:1 Nicht bestanden

Aa #8FCC49 auf #E6C081 1,12:1 Nicht bestanden

Aa #19705A auf #B52D6D 1,02:1 Nicht bestanden

Aa #031B30 auf #2C033B 1,02:1 Nicht bestanden

Bornana 12

Bornana 12

CSS-Variablen

Über diese Palette

Farben im Detail

Kontrast & Barrierefreiheit

Ähnliche Paletten

Schriftarten

Icons & SVG

Farben

Bilder

CSS-Tools

Entwicklung

Dokumentation

Unternehmen