Harvest Evening Farbpalette
Harvest Evening ist eine Palette aus 5 Farben, die auf Brauntöne, Gelbtöne, Orangetöne und Neutraltöne aufbaut. In OKLCH reicht die Helligkeit von 27 % (#3B1F14, dunkel) bis 98 % (#FFF9F0, sehr hell), und die gesättigtste Farbe, #F0C36A, ist mäßig gesättigt. 3 ihrer 4 chromatischen Farben liegen auf der warmen Seite des Farbkreises. 4 ihrer 10 Farbpaare erreichen das WCAG-AA-Verhältnis von 4,5:1 für Fließtext. Sie ist getaggt mit herbst, warm, gelb, erdig und farbenblind-freundlich.
- Jet #3B1F14
- Dark Moss Green #5B6B34
- Pewter #9F935D
- Saffron #F0C36A
- Seashell #FFF9F0
Farbcodes
| Farbe | HEX | RGB | HSL | OKLCH |
|---|---|---|---|---|
| Jet | #3B1F14 | rgb(59, 31, 20) | hsl(17, 49%, 15%) | oklch(27.4% 0.048 42) |
| Dark Moss Green | #5B6B34 | rgb(91, 107, 52) | hsl(77, 35%, 31%) | oklch(50.1% 0.081 122.7) |
| Pewter | #9F935D | rgb(159, 147, 93) | hsl(49, 26%, 49%) | oklch(66.1% 0.074 97.2) |
| Saffron | #F0C36A | rgb(240, 195, 106) | hsl(40, 82%, 68%) | oklch(83.9% 0.119 82.9) |
| Seashell | #FFF9F0 | rgb(255, 249, 240) | hsl(36, 100%, 97%) | oklch(98.4% 0.014 78.3) |
Barrierefreiheit
Die besten Text-Hintergrund-Paare in Harvest Evening, nach WCAG-2-Kontrastverhältnis, mit dem APCA-Helligkeitskontrast (Lc) des Textes auf seinem Hintergrund.
| Paar | WCAG 2 | Stufe | APCA Lc |
|---|---|---|---|
| #FFF9F0 auf #3B1F14 | 14.41:1 | AAA | Lc -101.1 |
| #F0C36A auf #3B1F14 | 9.14:1 | AAA | Lc -70.9 |
| #FFF9F0 auf #5B6B34 | 5.58:1 | AA | Lc -80.9 |
Farbsehen
Kein Farbpaar kommt bei Protanopie, Deuteranopie, Tritanopie oder Achromatopsie auf ΔE 0.06 an eine andere Farbe heran. Sie ist als farbenblind-freundlich getaggt: Jedes Paar bleibt mindestens ΔE 0,14 auseinander.
Protanopie
Deuteranopie
Tritanopie
Achromatopsie
Im Code verwenden
Installiere diese Farben mit shadcn als Tailwind-CSS-v4-Theme-Farben: npx shadcn@latest add https://getcolors.so/r/palette/3b1f14-5b6b34-9f935d-f0c36a-fff9f0.json.
Mach sie zu deiner
Bearbeite die Farben, baue daraus ein vollständiges helles und dunkles Farbsystem oder sieh sie in echter UI.