Kinkan

Palette mit 8 Farben · Warm · Hell · Harmonie: Komplementär

Zurück zur Bibliothek

Kinkan

Palette mit 8 Farben · Temperatur: Warm · Ton: Hell · Harmonie: Komplementär

Bearbeiten

Lebendig 8 Farben Warm Hell Komplementär green pink pastel

Likes 267

Farben 8

CSS-Variablen

:root {
  --c-vibrant-1: #446176;
  --c-vibrant-2: #3EAAAE;
  --c-vibrant-3: #8CEFB6;
  --c-vibrant-4: #C4F0C2;
  --c-vibrant-5: #FFFEE4;
  --c-vibrant-6: #BEC0C0;
  --c-vibrant-7: #FFA7B9;
  --c-vibrant-8: #FF7A8F;
}

Über diese Palette

Diese lebendige Palette mit 8 Farben reicht vom hellsten Ton Buttermilk (#FFFEE4) bis zum dunkelsten Ton Steel Blue Grey (#446176). Sie vereint Steel Blue Grey, Modal Blue, Vaporwave Pool, Peasful Mint, Buttermilk, Quest, Amélie’s Tutu und Magical Girl in einem Set, das du direkt in deine Benutzeroberfläche übernehmen kannst. Farbpaare in der Palette: 28. Davon erreichen 3 die WCAG-AA-Kontrastschwelle (4,5:1) für Fließtext – am stärksten ist #446176 auf #FFFEE4 mit 6,39:1.

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

Farben im Detail

Steel Blue Grey #446176

RGB: rgb(68, 97, 118)
HSL: hsl(205, 27%, 36%)
Luminanz: 0,111

Modal Blue #3EAAAE

RGB: rgb(62, 170, 174)
HSL: hsl(182, 47%, 46%)
Luminanz: 0,328

Vaporwave Pool #8CEFB6

RGB: rgb(140, 239, 182)
HSL: hsl(145, 76%, 74%)
Luminanz: 0,707

Peasful Mint #C4F0C2

RGB: rgb(196, 240, 194)
HSL: hsl(117, 61%, 85%)
Luminanz: 0,780

Buttermilk #FFFEE4

RGB: rgb(255, 254, 228)
HSL: hsl(58, 100%, 95%)
Luminanz: 0,978

Quest #BEC0C0

RGB: rgb(190, 192, 192)
HSL: hsl(180, 2%, 75%)
Luminanz: 0,525

Amélie’s Tutu #FFA7B9

RGB: rgb(255, 167, 185)
HSL: hsl(348, 100%, 83%)
Luminanz: 0,524

Magical Girl #FF7A8F

RGB: rgb(255, 122, 143)
HSL: hsl(351, 100%, 74%)
Luminanz: 0,372

Kontrast & Barrierefreiheit

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

Aa #446176 auf #FFFEE4 6,39:1 AA

Aa #446176 auf #C4F0C2 5,16:1 AA

Aa #446176 auf #8CEFB6 4,70:1 AA

Aa #446176 auf #BEC0C0 3,57:1 AA (großer Text)

Aa #446176 auf #FFA7B9 3,57:1 AA (großer Text)

Aa #3EAAAE auf #FFFEE4 2,72:1 Nicht bestanden

Aa #446176 auf #FF7A8F 2,62:1 Nicht bestanden

Aa #FFFEE4 auf #FF7A8F 2,44:1 Nicht bestanden

Aa #446176 auf #3EAAAE 2,35:1 Nicht bestanden

Aa #3EAAAE auf #C4F0C2 2,19:1 Nicht bestanden

Aa #3EAAAE auf #8CEFB6 2,00:1 Nicht bestanden

Aa #C4F0C2 auf #FF7A8F 1,97:1 Nicht bestanden

Aa #8CEFB6 auf #FF7A8F 1,80:1 Nicht bestanden

Aa #FFFEE4 auf #BEC0C0 1,79:1 Nicht bestanden

Aa #FFFEE4 auf #FFA7B9 1,79:1 Nicht bestanden

Aa #3EAAAE auf #BEC0C0 1,52:1 Nicht bestanden

Aa #3EAAAE auf #FFA7B9 1,52:1 Nicht bestanden

Aa #C4F0C2 auf #FFA7B9 1,45:1 Nicht bestanden

Aa #C4F0C2 auf #BEC0C0 1,44:1 Nicht bestanden

Aa #8CEFB6 auf #FFFEE4 1,36:1 Nicht bestanden

Aa #BEC0C0 auf #FF7A8F 1,36:1 Nicht bestanden

Aa #FFA7B9 auf #FF7A8F 1,36:1 Nicht bestanden

Aa #8CEFB6 auf #BEC0C0 1,32:1 Nicht bestanden

Aa #8CEFB6 auf #FFA7B9 1,32:1 Nicht bestanden

Aa #C4F0C2 auf #FFFEE4 1,24:1 Nicht bestanden

Aa #3EAAAE auf #FF7A8F 1,11:1 Nicht bestanden

Aa #8CEFB6 auf #C4F0C2 1,10:1 Nicht bestanden

Aa #BEC0C0 auf #FFA7B9 1,00:1 Nicht bestanden

Kinkan

Kinkan

CSS-Variablen

Über diese Palette

Farben im Detail

Kontrast & Barrierefreiheit

Ähnliche Paletten

Schriftarten

Icons & SVG

Farben

Bilder

CSS-Tools

Entwicklung

Dokumentation

Unternehmen