Wicked Skies

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

Zurück zur Bibliothek

Wicked Skies

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

Bearbeiten

Lebendig 12 Farben Kühl Dunkel Komplementär sky sunset vivid radiant

Likes 22

Farben 12

CSS-Variablen

:root {
  --c-vibrant-1: #00000F;
  --c-vibrant-2: #000133;
  --c-vibrant-3: #000356;
  --c-vibrant-4: #0203E2;
  --c-vibrant-5: #00CDFE;
  --c-vibrant-6: #680880;
  --c-vibrant-7: #FE007D;
  --c-vibrant-8: #DE1738;
  --c-vibrant-9: #FD5E53;
  --c-vibrant-10: #FC9C54;
  --c-vibrant-11: #FFE373;
  --c-vibrant-12: #FAFBBD;
}

Über diese Palette

Diese lebendige Palette mit 12 Farben reicht vom hellsten Ton Cashew Cheese (#FAFBBD) bis zum dunkelsten Ton Benthic Black (#00000F). Sie vereint Benthic Black, Mighty Midnight, Alucard’s Night, Pure Blue, Vivid Sky Blue, Peaceful Purple, Pink Poison, Wild Rider Red, Sunset Orange, Cocktail Hour, Shandy und Cashew Cheese in einem Set, das du direkt in deine Benutzeroberfläche übernehmen kannst. Farbpaare in der Palette: 66. Davon erreichen 27 die WCAG-AA-Kontrastschwelle (4,5:1) für Fließtext – am stärksten ist #00000F auf #FAFBBD mit 19,46:1.

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

Farben im Detail

Benthic Black #00000F

RGB: rgb(0, 0, 15)
HSL: hsl(240, 100%, 3%)
Luminanz: 0,000

Mighty Midnight #000133

RGB: rgb(0, 1, 51)
HSL: hsl(239, 100%, 10%)
Luminanz: 0,003

Alucard’s Night #000356

RGB: rgb(0, 3, 86)
HSL: hsl(238, 100%, 17%)
Luminanz: 0,007

Pure Blue #0203E2

RGB: rgb(2, 3, 226)
HSL: hsl(240, 98%, 45%)
Luminanz: 0,056

Vivid Sky Blue #00CDFE

RGB: rgb(0, 205, 254)
HSL: hsl(192, 100%, 50%)
Luminanz: 0,508

Peaceful Purple #680880

RGB: rgb(104, 8, 128)
HSL: hsl(288, 88%, 27%)
Luminanz: 0,047

Pink Poison #FE007D

RGB: rgb(254, 0, 125)
HSL: hsl(330, 100%, 50%)
Luminanz: 0,226

Wild Rider Red #DE1738

RGB: rgb(222, 23, 56)
HSL: hsl(350, 81%, 48%)
Luminanz: 0,164

Sunset Orange #FD5E53

RGB: rgb(253, 94, 83)
HSL: hsl(4, 98%, 66%)
Luminanz: 0,295

Cocktail Hour #FC9C54

RGB: rgb(252, 156, 84)
HSL: hsl(26, 97%, 66%)
Luminanz: 0,451

Shandy #FFE373

RGB: rgb(255, 227, 115)
HSL: hsl(48, 100%, 73%)
Luminanz: 0,774

Cashew Cheese #FAFBBD

RGB: rgb(250, 251, 189)
HSL: hsl(61, 89%, 86%)
Luminanz: 0,930

Kontrast & Barrierefreiheit

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

Aa #00000F auf #FAFBBD 19,46:1 AAA

Aa #000133 auf #FAFBBD 18,63:1 AAA

Aa #000356 auf #FAFBBD 17,08:1 AAA

Aa #00000F auf #FFE373 16,37:1 AAA

Aa #000133 auf #FFE373 15,67:1 AAA

Aa #000356 auf #FFE373 14,37:1 AAA

Aa #00000F auf #00CDFE 11,09:1 AAA

Aa #000133 auf #00CDFE 10,61:1 AAA

Aa #680880 auf #FAFBBD 10,13:1 AAA

Aa #00000F auf #FC9C54 9,95:1 AAA

Aa #000356 auf #00CDFE 9,73:1 AAA

Aa #000133 auf #FC9C54 9,53:1 AAA

Aa #0203E2 auf #FAFBBD 9,27:1 AAA

Aa #000356 auf #FC9C54 8,73:1 AAA

Aa #680880 auf #FFE373 8,52:1 AAA

Aa #0203E2 auf #FFE373 7,80:1 AAA

Aa #00000F auf #FD5E53 6,86:1 AA

Aa #000133 auf #FD5E53 6,56:1 AA

Aa #000356 auf #FD5E53 6,02:1 AA

Aa #00CDFE auf #680880 5,77:1 AA

Aa #00000F auf #FE007D 5,47:1 AA

Aa #0203E2 auf #00CDFE 5,28:1 AA

Aa #000133 auf #FE007D 5,24:1 AA

Aa #680880 auf #FC9C54 5,18:1 AA

Aa #000356 auf #FE007D 4,80:1 AA

Aa #0203E2 auf #FC9C54 4,74:1 AA

Aa #DE1738 auf #FAFBBD 4,57:1 AA

Aa #00000F auf #DE1738 4,26:1 AA (großer Text)

Aa #000133 auf #DE1738 4,07:1 AA (großer Text)

Aa #DE1738 auf #FFE373 3,85:1 AA (großer Text)

Aa #000356 auf #DE1738 3,74:1 AA (großer Text)

Aa #680880 auf #FD5E53 3,57:1 AA (großer Text)

Aa #FE007D auf #FAFBBD 3,56:1 AA (großer Text)

Aa #0203E2 auf #FD5E53 3,27:1 AA (großer Text)

Aa #FE007D auf #FFE373 2,99:1 Nicht bestanden

Aa #680880 auf #FE007D 2,85:1 Nicht bestanden

Aa #FD5E53 auf #FAFBBD 2,84:1 Nicht bestanden

Aa #0203E2 auf #FE007D 2,61:1 Nicht bestanden

Aa #00CDFE auf #DE1738 2,60:1 Nicht bestanden

Aa #FD5E53 auf #FFE373 2,39:1 Nicht bestanden

Aa #DE1738 auf #FC9C54 2,34:1 Nicht bestanden

Aa #680880 auf #DE1738 2,21:1 Nicht bestanden

Aa #00000F auf #0203E2 2,10:1 Nicht bestanden

Aa #0203E2 auf #DE1738 2,03:1 Nicht bestanden

Aa #00CDFE auf #FE007D 2,03:1 Nicht bestanden

Aa #000133 auf #0203E2 2,01:1 Nicht bestanden

Aa #FC9C54 auf #FAFBBD 1,96:1 Nicht bestanden

Aa #00000F auf #680880 1,92:1 Nicht bestanden

Aa #000133 auf #680880 1,84:1 Nicht bestanden

Aa #000356 auf #0203E2 1,84:1 Nicht bestanden

Aa #FE007D auf #FC9C54 1,82:1 Nicht bestanden

Aa #00CDFE auf #FAFBBD 1,76:1 Nicht bestanden

Aa #000356 auf #680880 1,69:1 Nicht bestanden

Aa #FC9C54 auf #FFE373 1,65:1 Nicht bestanden

Aa #00CDFE auf #FD5E53 1,62:1 Nicht bestanden

Aa #DE1738 auf #FD5E53 1,61:1 Nicht bestanden

Aa #00CDFE auf #FFE373 1,48:1 Nicht bestanden

Aa #FD5E53 auf #FC9C54 1,45:1 Nicht bestanden

Aa #FE007D auf #DE1738 1,29:1 Nicht bestanden

Aa #FE007D auf #FD5E53 1,25:1 Nicht bestanden

Aa #FFE373 auf #FAFBBD 1,19:1 Nicht bestanden

Aa #00000F auf #000356 1,14:1 Nicht bestanden

Aa #00CDFE auf #FC9C54 1,11:1 Nicht bestanden

Aa #000133 auf #000356 1,09:1 Nicht bestanden

Aa #0203E2 auf #680880 1,09:1 Nicht bestanden

Aa #00000F auf #000133 1,04:1 Nicht bestanden

Wicked Skies

Wicked Skies

CSS-Variablen

Über diese Palette

Farben im Detail

Kontrast & Barrierefreiheit

Ähnliche Paletten

Schriftarten

Icons & SVG

Farben

Bilder

CSS-Tools

Entwicklung

Dokumentation

Unternehmen