Beret12

Palette mit 12 Farben · Warm · Hell · Harmonie: Analog

Zurück zur Bibliothek

Beret12

Palette mit 12 Farben · Temperatur: Warm · Ton: Hell · Harmonie: Analog

Bearbeiten

Lebendig 12 Farben Warm Hell Analog

Likes 51

Farben 12

CSS-Variablen

:root {
  --c-vibrant-1: #FEFCF2;
  --c-vibrant-2: #FEE6DD;
  --c-vibrant-3: #FFDFAB;
  --c-vibrant-4: #FFBF8F;
  --c-vibrant-5: #FF8567;
  --c-vibrant-6: #DD4D68;
  --c-vibrant-7: #7B3945;
  --c-vibrant-8: #B18458;
  --c-vibrant-9: #BAA268;
  --c-vibrant-10: #B89FA1;
  --c-vibrant-11: #7684CB;
  --c-vibrant-12: #6BAFE5;
}

Über diese Palette

Diese lebendige Palette mit 12 Farben reicht vom hellsten Ton Granulated Sugar (#FEFCF2) bis zum dunkelsten Ton Cordova Burgundy (#7B3945). Sie vereint Granulated Sugar, French Manicure, Horseradish Yellow, Sunset Cruise, Protein High, Rosy Cheeks, Cordova Burgundy, Cool Copper, Buffalo Hide, Lilac Smoke, Violets Are Blue und Sanctuary Spa in einem Set, das du direkt in deine Benutzeroberfläche übernehmen kannst. Farbpaare in der Palette: 66. Davon erreichen 4 die WCAG-AA-Kontrastschwelle (4,5:1) für Fließtext – am stärksten ist #FEFCF2 auf #7B3945 mit 8,12:1.

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

Farben im Detail

Granulated Sugar #FEFCF2

RGB: rgb(254, 252, 242)
HSL: hsl(50, 86%, 97%)
Luminanz: 0,971

French Manicure #FEE6DD

RGB: rgb(254, 230, 221)
HSL: hsl(16, 94%, 93%)
Luminanz: 0,829

Horseradish Yellow #FFDFAB

RGB: rgb(255, 223, 171)
HSL: hsl(37, 100%, 84%)
Luminanz: 0,770

Sunset Cruise #FFBF8F

RGB: rgb(255, 191, 143)
HSL: hsl(26, 100%, 78%)
Luminanz: 0,605

Protein High #FF8567

RGB: rgb(255, 133, 103)
HSL: hsl(12, 100%, 70%)
Luminanz: 0,390

Rosy Cheeks #DD4D68

RGB: rgb(221, 77, 104)
HSL: hsl(349, 68%, 58%)
Luminanz: 0,217

Cordova Burgundy #7B3945

RGB: rgb(123, 57, 69)
HSL: hsl(349, 37%, 35%)
Luminanz: 0,076

Cool Copper #B18458

RGB: rgb(177, 132, 88)
HSL: hsl(30, 36%, 52%)
Luminanz: 0,266

Buffalo Hide #BAA268

RGB: rgb(186, 162, 104)
HSL: hsl(42, 37%, 57%)
Luminanz: 0,373

Lilac Smoke #B89FA1

RGB: rgb(184, 159, 161)
HSL: hsl(355, 15%, 67%)
Luminanz: 0,376

Violets Are Blue #7684CB

RGB: rgb(118, 132, 203)
HSL: hsl(230, 45%, 63%)
Luminanz: 0,247

Sanctuary Spa #6BAFE5

RGB: rgb(107, 175, 229)
HSL: hsl(207, 70%, 66%)
Luminanz: 0,394

Kontrast & Barrierefreiheit

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

Aa #FEFCF2 auf #7B3945 8,12:1 AAA

Aa #FEE6DD auf #7B3945 6,99:1 AA

Aa #FFDFAB auf #7B3945 6,52:1 AA

Aa #FFBF8F auf #7B3945 5,21:1 AA

Aa #FEFCF2 auf #DD4D68 3,83:1 AA (großer Text)

Aa #7B3945 auf #6BAFE5 3,54:1 AA (großer Text)

Aa #FF8567 auf #7B3945 3,50:1 AA (großer Text)

Aa #FEFCF2 auf #7684CB 3,44:1 AA (großer Text)

Aa #7B3945 auf #B89FA1 3,39:1 AA (großer Text)

Aa #7B3945 auf #BAA268 3,36:1 AA (großer Text)

Aa #FEE6DD auf #DD4D68 3,29:1 AA (großer Text)

Aa #FEFCF2 auf #B18458 3,24:1 AA (großer Text)

Aa #FFDFAB auf #DD4D68 3,07:1 AA (großer Text)

Aa #FEE6DD auf #7684CB 2,96:1 Nicht bestanden

Aa #FEE6DD auf #B18458 2,79:1 Nicht bestanden

Aa #FFDFAB auf #7684CB 2,76:1 Nicht bestanden

Aa #FFDFAB auf #B18458 2,60:1 Nicht bestanden

Aa #7B3945 auf #B18458 2,51:1 Nicht bestanden

Aa #FFBF8F auf #DD4D68 2,46:1 Nicht bestanden

Aa #FEFCF2 auf #BAA268 2,41:1 Nicht bestanden

Aa #FEFCF2 auf #B89FA1 2,40:1 Nicht bestanden

Aa #7B3945 auf #7684CB 2,36:1 Nicht bestanden

Aa #FEFCF2 auf #FF8567 2,32:1 Nicht bestanden

Aa #FEFCF2 auf #6BAFE5 2,30:1 Nicht bestanden

Aa #FFBF8F auf #7684CB 2,21:1 Nicht bestanden

Aa #DD4D68 auf #7B3945 2,12:1 Nicht bestanden

Aa #FEE6DD auf #BAA268 2,08:1 Nicht bestanden

Aa #FFBF8F auf #B18458 2,08:1 Nicht bestanden

Aa #FEE6DD auf #B89FA1 2,06:1 Nicht bestanden

Aa #FEE6DD auf #FF8567 2,00:1 Nicht bestanden

Aa #FEE6DD auf #6BAFE5 1,98:1 Nicht bestanden

Aa #FFDFAB auf #BAA268 1,94:1 Nicht bestanden

Aa #FFDFAB auf #B89FA1 1,93:1 Nicht bestanden

Aa #FFDFAB auf #FF8567 1,86:1 Nicht bestanden

Aa #FFDFAB auf #6BAFE5 1,84:1 Nicht bestanden

Aa #DD4D68 auf #6BAFE5 1,67:1 Nicht bestanden

Aa #FF8567 auf #DD4D68 1,65:1 Nicht bestanden

Aa #DD4D68 auf #B89FA1 1,60:1 Nicht bestanden

Aa #DD4D68 auf #BAA268 1,58:1 Nicht bestanden

Aa #FEFCF2 auf #FFBF8F 1,56:1 Nicht bestanden

Aa #FFBF8F auf #BAA268 1,55:1 Nicht bestanden

Aa #FFBF8F auf #B89FA1 1,54:1 Nicht bestanden

Aa #7684CB auf #6BAFE5 1,50:1 Nicht bestanden

Aa #FFBF8F auf #FF8567 1,49:1 Nicht bestanden

Aa #FF8567 auf #7684CB 1,48:1 Nicht bestanden

Aa #FFBF8F auf #6BAFE5 1,47:1 Nicht bestanden

Aa #BAA268 auf #7684CB 1,43:1 Nicht bestanden

Aa #B89FA1 auf #7684CB 1,43:1 Nicht bestanden

Aa #B18458 auf #6BAFE5 1,41:1 Nicht bestanden

Aa #FF8567 auf #B18458 1,39:1 Nicht bestanden

Aa #B18458 auf #B89FA1 1,35:1 Nicht bestanden

Aa #FEE6DD auf #FFBF8F 1,34:1 Nicht bestanden

Aa #B18458 auf #BAA268 1,34:1 Nicht bestanden

Aa #FEFCF2 auf #FFDFAB 1,25:1 Nicht bestanden

Aa #FFDFAB auf #FFBF8F 1,25:1 Nicht bestanden

Aa #DD4D68 auf #B18458 1,18:1 Nicht bestanden

Aa #FEFCF2 auf #FEE6DD 1,16:1 Nicht bestanden

Aa #DD4D68 auf #7684CB 1,11:1 Nicht bestanden

Aa #FEE6DD auf #FFDFAB 1,07:1 Nicht bestanden

Aa #B18458 auf #7684CB 1,06:1 Nicht bestanden

Aa #BAA268 auf #6BAFE5 1,05:1 Nicht bestanden

Aa #FF8567 auf #BAA268 1,04:1 Nicht bestanden

Aa #B89FA1 auf #6BAFE5 1,04:1 Nicht bestanden

Aa #FF8567 auf #B89FA1 1,03:1 Nicht bestanden

Aa #FF8567 auf #6BAFE5 1,01:1 Nicht bestanden

Aa #BAA268 auf #B89FA1 1,01:1 Nicht bestanden

Beret12

Beret12

CSS-Variablen

Über diese Palette

Farben im Detail

Kontrast & Barrierefreiheit

Ähnliche Paletten

Schriftarten

Icons & SVG

Farben

Bilder

CSS-Tools

Entwicklung

Dokumentation

Unternehmen